Add possibility to generate message event on click of menu item

docs/README.md

@@ -56,7 +56,8 @@ _Example:_
       "activeClassName": "rebel-pink",
       "mutedClassName": "c-action-primary"
     },
-    "iconToTheRight": true
+    "iconToTheRight": true,
+    "analyticsEvent": "menu_footer_click"
   }
 }
 ```
@@ -79,7 +80,8 @@ _Example:_
           "noFollow": false,
           "tagTitle": "Shop",
           "text": "Shop"
-        }
+        },
+        "analyticsEvent": "menu_footer_click"
       },
       {
         "id": "menu-item-about-us",
@@ -91,7 +93,8 @@ _Example:_
           "noFollow": false,
           "tagTitle": "about-us",
           "text": "About Us"
-        }
+        },
+        "analyticsEvent": "menu_footer_click"
       }
     ]
   }
@@ -112,6 +115,7 @@ You can define a submenu for a menu-item:
       "tagTitle": "Shop",
       "text": "Shop"
     },
+    "analyticsEvent": "menu_footer_click"
   },
   "blocks": ["vtex.menu@2.x:submenu#shop"] // Defining a submenu
 },
@@ -143,6 +147,7 @@ The available `menu-item` block props are as follows:
 | `onMountBehavior` | `enum` | Whether the submenu should always be automatically displayed when its parent is hovered/clicked on (`open`) or not (`closed`). | `closed` |
 | `itemProps`         | `CategoryItem` or `CustomItem` | Item props                                           | `undefined`           |
 | `classes`         | `CustomCSSClasses` | Used to override default CSS handles. To better understand how this prop works, we recommend reading about it [here](https://github.com/vtex-apps/css-handles#usecustomclasses). Note that this is only useful if you're importing this block as a React component.                                      | `undefined`           |
+| `analyticsEvent`         | `String` | Used to generate [event message](https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event) on click of menu item, for web analytics purposes.                                   | `undefined`           |
 
 - For icons in the menu items:
 
@@ -208,6 +213,10 @@ In order to apply CSS customizations on this and other blocks, follow the instru
 | `submenuWrapper`           |
 | `submenu`                  |
 
+#### Web analytics
+To track user data when a menu item is clicked, an [event message](https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event) can be generated, containing `analyticsEvent` and `itemProps`.
+
+
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

manifest.json

@@ -16,7 +16,8 @@
     "vtex.store-graphql": "2.x",
     "vtex.native-types": "0.x",
     "vtex.store-icons": "0.x",
-    "vtex.css-handles": "1.x"
+    "vtex.css-handles": "1.x",
+    "vtex.pixel-manager": "1.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/MenuItem.tsx

@@ -24,6 +24,7 @@ import useSubmenuImplementation from './hooks/useSubmenuImplementation'
 import MenuContext from './components/MenuContext'
 import { useMouseSpeedDebouncer } from './hooks/useMouseSpeedDebouncer'
 import { useUrlChange } from './hooks/useUrlChange'
+import { usePixel } from 'vtex.pixel-manager'
 
 const CSS_HANDLES = ['menuItem', 'menuItemInnerDiv'] as const
 
@@ -38,6 +39,7 @@ export interface MenuItemSchema {
   blockClass?: string
   experimentalOptimizeRendering?: boolean
   classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
+  analyticsEvent?: string
 }
 
 type SubmenuState = {
@@ -81,6 +83,13 @@ const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
   onMountBehavior = 'closed',
   ...props
 }) => {
+  const {push} = usePixel(); 
+  const pushAnalyticsEvent = () => {
+    props?.analyticsEvent && push({
+      event: props.analyticsEvent,
+      props: props.itemProps
+    })
+  }
   const { experimentalOptimizeRendering } = useContext(MenuContext)
   const [
     { isActive, hasBeenActive, onMountBehavior: onMountBehaviorFlag },
@@ -190,6 +199,7 @@ const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
         debouncedSetActive(false)
         setHovered(false)
       }}
+      onClick={pushAnalyticsEvent}
     >
       <Item {...props} active={isActive} />
       {(isActive || !experimentalOptimizeRendering) && (