Ga events to storyblok buttons (#909)

* Add storyblok button click event * Add onClick event to StoryblokButton to trigger GA event --------- Co-authored-by: Kylee Fields <[email protected]>
chaynHQ · May 17, 2024 · 303a108 · 303a108
1 parent 50879e9
commit 303a108
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/components/storyblok/StoryblokButton.tsx b/components/storyblok/StoryblokButton.tsx
@@ -2,6 +2,9 @@ import { Box, Button } from '@mui/material';
 import { storyblokEditable } from '@storyblok/react';
 import { STORYBLOK_COLORS } from '../../constants/enums';
 import Link from '../common/Link';
+import logEvent, { getEventUserData } from '../../utils/logEvent';
+import { generateStoryblokButtonEvent } from '../../constants/events';
+import { useTypedSelector } from '../../hooks/store';
 
 interface StoryblokLink {
  cached_url: string;
@@ -17,6 +20,10 @@ interface StoryblokButtonProps {
 
 const StoryblokButton = (props: StoryblokButtonProps) => {
  const { _uid, _editable, text, color = 'secondary.main', link, size = 'medium' } = props;
+ const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
+ const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
+ const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
+ const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
 
  if (!link || !link.cached_url) return <></>;
 
@@ -42,6 +49,9 @@ const StoryblokButton = (props: StoryblokButtonProps) => {
  color={color.includes('primary') ? 'primary' : 'secondary'}
  href={link.cached_url}
  size={size}
+ onClick={() => {
+ logEvent(generateStoryblokButtonEvent(text), eventUserData);
+ }}
  >
  {text}
  </Button>

diff --git a/constants/events.ts b/constants/events.ts
@@ -108,6 +108,8 @@ export const FAQ_OPENED = 'FAQ_OPENED';
 export const ACCORDION_OPENED = 'ACCORDION_OPENED';
 export const generateAccordionEvent = (title: string) =>
  `ACCORDION_${title.split(' ').join('_').toUpperCase()}`;
+export const generateStoryblokButtonEvent = (text: string) =>
+ `STORYBLOK_BUTTON_${text.split(' ').join('_').toUpperCase()}_CLICKED`;
 
 export const LEAVE_SITE_BUTTON_CLICKED = 'LEAVE_SITE_BUTTON_CLICKED';
 export const SOCIAL_LINK_CLICKED = 'SOCIAL_LINK_CLICKED';
@@ -213,4 +215,4 @@ export const WHATSAPP_UNSUBSCRIBE_SUCCESS = 'WHATSAPP_UNSUBSCRIBE_SUCCESS';
 export const WHATSAPP_UNSUBSCRIBE_ERROR = 'WHATSAPP_UNSUBSCRIBE_ERROR';
 
 // PROMO BANNER EVENTS
-export const SIGN_UP_TODAY_BANNER_BUTTON_CLICKED = 'SIGN_UP_TODAY_BANNER_BUTTON_CLICKED';
+export const SIGN_UP_TODAY_BANNER_BUTTON_CLICKED = 'SIGN_UP_TODAY_BANNER_BUTTON_CLICKED';