Add tracking to the ProfileMenu

sumup-oss · Sep 30, 2021 · 8f10bbb · 8f10bbb
1 parent d130536
commit 8f10bbb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/.changeset/calm-items-repair.md b/.changeset/calm-items-repair.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Added tracking support to the ProfileMenu.
diff --git a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx b/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx
@@ -26,6 +26,7 @@ import Popover, { PopoverProps } from '../../../Popover';
 import { Skeleton } from '../../../Skeleton';
 import { TRACKING_ELEMENTS } from '../../constants';
 import { UserProps } from '../../types';
+import { TrackingProps } from '../../../../hooks/useClickEvent';
 
 const profileWrapperStyles = ({ theme }: StyleProps) => css`
   height: 100%;
@@ -150,6 +151,10 @@ export interface ProfileMenuProps extends ProfileProps {
    * a profile action.
    */
   trackingLabel?: string;
+  /**
+   * Additional data that is dispatched with the tracking event.
+   */
+  tracking?: TrackingProps;
 }
 
 export function ProfileMenu({
@@ -158,6 +163,7 @@ export function ProfileMenu({
   actions,
   isActive,
   trackingLabel,
+  tracking,
 }: ProfileMenuProps): JSX.Element {
   const [isOpen, setOpen] = useState(false);
   const offsetModifier = { name: 'offset', options: { offset: [-16, 8] } };
@@ -182,6 +188,9 @@ export function ProfileMenu({
         actions={actions}
         placement="bottom-end"
         modifiers={[offsetModifier]}
+        tracking={
+          tracking ? { ...tracking, component: 'profile_menu' } : undefined
+        }
       />
     </TrackingElement>
   );