Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add possibility to generate message event on click of menu item #174

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add possibility to generate message event on click of menu item #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e0c188b
Add the ability to generate pixel messages
cavaglieridomenico Jan 2, 2023
56fc7ae
Update README.md
cavaglieridomenico Jan 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions docs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@ _Example:_
"activeClassName": "rebel-pink",
"mutedClassName": "c-action-primary"
},
"iconToTheRight": true
"iconToTheRight": true,
"analyticsEvent": "menu_footer_click"
}
}
```
Expand All @@ -79,7 +80,8 @@ _Example:_
"noFollow": false,
"tagTitle": "Shop",
"text": "Shop"
}
},
"analyticsEvent": "menu_footer_click"
},
{
"id": "menu-item-about-us",
Expand All @@ -91,7 +93,8 @@ _Example:_
"noFollow": false,
"tagTitle": "about-us",
"text": "About Us"
}
},
"analyticsEvent": "menu_footer_click"
}
]
}
Expand All @@ -112,6 +115,7 @@ You can define a submenu for a menu-item:
"tagTitle": "Shop",
"text": "Shop"
},
"analyticsEvent": "menu_footer_click"
},
"blocks": ["[email protected]:submenu#shop"] // Defining a submenu
},
Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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)):
Expand Down
3 changes: 2 additions & 1 deletion manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
10 changes: 10 additions & 0 deletions react/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -38,6 +39,7 @@ export interface MenuItemSchema {
blockClass?: string
experimentalOptimizeRendering?: boolean
classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
analyticsEvent?: string
}

type SubmenuState = {
Expand Down Expand Up @@ -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 },
Expand Down Expand Up @@ -190,6 +199,7 @@ const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
debouncedSetActive(false)
setHovered(false)
}}
onClick={pushAnalyticsEvent}
>
<Item {...props} active={isActive} />
{(isActive || !experimentalOptimizeRendering) && (
Expand Down