@openeventkit/event-site 2.0.103 → 2.0.104

package/env.template

@@ -33,3 +33,4 @@ GATSBY_METADATA_DESCRIPTION=
 GATSBY_CMS_BACKEND_REPO=
 GATSBY_CMS_BACKEND_BRANCH=
 GATSBY_SITE_URL=
+GATSBY_GOOGLE_TAGMANAGER_ID=

package/gatsby-browser.js

@@ -2,6 +2,9 @@ import * as Sentry from "@sentry/gatsby";
 import { RewriteFrames as RewriteFramesIntegration } from "@sentry/integrations";
 import ReduxWrapper from "./src/state/ReduxWrapper";
 
+import AnalyticsManager from "./src/utils/analytics/AnalyticsManager";
+import GoogleTagManagerProvider from "./src/utils/analytics/providers/GoogleTagManagerProvider";
+
 import smoothscroll from "smoothscroll-polyfill";
 import "what-input";
 
@@ -15,6 +18,9 @@ import marketingSettings from "data/marketing-settings.json";
 // smooth scroll polyfill needed for Safari
 smoothscroll.polyfill();
 
+const googleTagManagerProvider = new GoogleTagManagerProvider();
+const analyticsManager = new AnalyticsManager(googleTagManagerProvider);
+
 export const wrapRootElement = ReduxWrapper;
 
 export const onClientEntry = () => {

package/gatsby-config.js

@@ -39,6 +39,16 @@ const manifestPlugin = faviconAsset ? [
   }
 ] : [];
 
+const googleTagManagerPlugin = process.env.GATSBY_GOOGLE_TAGMANAGER_ID ? [
+  {
+    resolve: "gatsby-plugin-google-tagmanager",
+    options: {
+      id: process.env.GATSBY_GOOGLE_TAGMANAGER_ID,
+      includeInDevelopment: true
+    }
+  }
+] : [];
+
 const plugins = [
   ...manifestPlugin,
   {
@@ -177,6 +187,7 @@ const plugins = [
       }
     }
   },
+  ...googleTagManagerPlugin,
   "gatsby-plugin-netlify", // make sure to keep it last in the array
 ];
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.103",
+  "version": "2.0.104",
   "author": "Tipit LLC",
   "dependencies": {
     "@mui/base": "^5.0.0-alpha.114",
@@ -36,6 +36,7 @@
     "core-js": "^2.6.11",
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
+    "data-guardian": "^1.1.2",
     "disqus-react": "1.0.10",
     "dotenv": "^8.2.0",
     "dropzone": "^5.7.2",
@@ -46,6 +47,7 @@
     "full-schedule-widget": "3.0.5",
     "gatsby": "^5.8.1",
     "gatsby-alias-imports": "^1.0.6",
+    "gatsby-plugin-google-tagmanager": "^5.13.1",
     "gatsby-plugin-image": "^3.8.0",
     "gatsby-plugin-manifest": "^5.12.3",
     "gatsby-plugin-netlify": "^5.1.0",
@@ -121,7 +123,7 @@
     "stream-browserify": "^3.0.0",
     "stream-chat": "^2.7.2",
     "stream-chat-react": "3.1.7",
-    "summit-registration-lite": "5.0.24",
+    "summit-registration-lite": "5.0.25",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
     "upcoming-events-widget": "3.0.5",

package/src/components/AttendeeToAttendeeWidgetComponent.js

@@ -23,7 +23,10 @@ import { PHASES } from "../utils/phasesUtils";
 import "attendee-to-attendee-widget/dist/index.css";
 
 import { SentryFallbackFunction } from "./SentryErrorComponent";
-import { onInitLogoutEvent } from "../utils/customEvents";
+import {
+  useCustomEvent,
+  INIT_LOGOUT_EVENT
+} from "../utils/customEvents";
 
 const sbAuthProps = {
   supabaseUrl: getEnvVariable(SUPABASE_URL),
@@ -187,18 +190,15 @@ const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings }) => {
   const trackerRef = useRef();
 
   const handleLogout = useCallback(() => {
-    if(trackerRef.current)
+    if (trackerRef.current)
       trackerRef.current.signOut();
   },[]);
 
-  useEffect(()=>{
-    window.addEventListener(onInitLogoutEvent, handleLogout)
-    return () => window.removeEventListener(onInitLogoutEvent, handleLogout);
-  },[]);
+  useCustomEvent(INIT_LOGOUT_EVENT, handleLogout);
 
   useEffect(() => {
     if (!isLoggedUser) {
-      if(trackerRef.current)
+      if (trackerRef.current)
           trackerRef.current.signOut();
     }
   }, [isLoggedUser]);

package/src/components/RegistrationLiteComponent.js

@@ -25,6 +25,9 @@ import useMarketingSettings, { MARKETING_SETTINGS_KEYS }  from "@utils/useMarket
 import useSiteSettings from "@utils/useSiteSettings";
 import { SentryFallbackFunction } from "./SentryErrorComponent";
 
+import { triggerAnalyticsTrackEvent } from "@utils/customEvents";
+import { PURCHASE_COMPLETE } from "@utils/analytics/events";
+
 import styles from "../styles/marketing-hero.module.scss";
 
 const RegistrationLiteComponent = ({
@@ -153,11 +156,12 @@ const RegistrationLiteComponent = ({
         goToRegistration: () => navigate(`${getEnvVariable(REGISTRATION_BASE_URL)}/a/${summit.slug}`),
         goToMyOrders: () => navigate("/a/my-tickets"),
         completedExtraQuestions: async (attendee) => {
-            if(!attendee) return true;
+            if (!attendee) return true;
             await getExtraQuestions(attendee?.id);
             return checkRequireExtraQuestionsByAttendee(attendee);
         },
         onPurchaseComplete: (order) => {
+            triggerAnalyticsTrackEvent(PURCHASE_COMPLETE, { order });
             // check if it"s necessary to update profile
             setUserOrder(order).then(()=> checkOrderData(order));
         },

package/src/utils/analytics/AnalyticsManager.js

@@ -0,0 +1,28 @@
+import AnalyticsProvider from "./AnalyticsProvider";
+import { CustomEventManager, ANALYTICS_TRACK_EVENT } from "../customEvents";
+import { normalizeData } from "@utils/dataNormalization";
+
+class AnalyticsManager {
+  constructor(analyticsProvider) {
+    if (!(analyticsProvider instanceof AnalyticsProvider)) {
+      throw new Error("An instance of AnalyticsProvider is required.");
+    }
+    this.analyticsProvider = analyticsProvider;
+    CustomEventManager.addEventListener(ANALYTICS_TRACK_EVENT, this.handleTrackEvent.bind(this));
+  }
+
+  get provider() {
+    return this.analyticsProvider;
+  }
+
+  handleTrackEvent = (event) => {
+    const { eventName, eventParams } = event.detail;
+    this.trackEvent(eventName, eventParams);
+  }
+
+  trackEvent = (eventName, eventParams) => {
+    this.analyticsProvider.trackEvent(eventName, normalizeData(eventParams));
+  }
+}
+
+export default AnalyticsManager;

package/src/utils/analytics/AnalyticsProvider.js

@@ -0,0 +1,7 @@
+class AnalyticsProvider {
+  trackEvent(eventName, eventParams) {
+    throw new Error("trackEvent method must be implemented");
+  }
+}
+
+export default AnalyticsProvider;

package/src/utils/analytics/events.js

@@ -0,0 +1 @@
+export const PURCHASE_COMPLETE = "purchase_complete";

package/src/utils/analytics/providers/GoogleTagManagerProvider.js

@@ -0,0 +1,38 @@
+import AnalyticsProvider from "../AnalyticsProvider";
+import { getEnvVariable, GOOGLE_TAGMANAGER_ID } from "@utils/envVariables";
+
+class GoogleTagManagerProvider extends AnalyticsProvider {
+  constructor() {
+    super();
+    if (!getEnvVariable(GOOGLE_TAGMANAGER_ID)) {
+      console.warn("GoogleTagManagerProvider: GOOGLE_TAGMANAGER_ID environment variable is not set. Tracking will be disabled.");
+    }
+    this.dataLayer = (typeof window !== "undefined" && window.dataLayer) || [];
+  }
+
+  gtag() {
+    this.dataLayer.push(arguments);
+  };
+
+  trackEvent = (eventName, eventParams) => {
+    this.gtag("event", eventName, eventParams);
+  };
+
+  config = (targetId, additionalConfig) => {
+    this.gtag("config", targetId, additionalConfig);
+  };
+
+  set = (parameters) => {
+    this.gtag("set", parameters);
+  };
+
+  get = (target, fieldName, callback) => {
+    this.gtag("get", target, fieldName, callback);
+  };
+
+  consent = (consentArg, consentParams) => {
+    this.gtag("consent", consentArg, consentParams);
+  };
+}
+
+export default GoogleTagManagerProvider;

package/src/utils/customEvents/CustomEventManager.js

@@ -0,0 +1,22 @@
+class CustomEventManager {
+  static dispatchEvent = (eventName, eventData, target = window) => {
+    if (typeof target !== "undefined") {
+      const event = new CustomEvent(eventName, { detail: eventData });
+      target.dispatchEvent(event);
+    }
+  };
+
+  static addEventListener = (eventName, callback, target = window) => {
+    if (typeof target !== "undefined") {
+      target.addEventListener(eventName, callback);
+    }
+  };
+
+  static removeEventListener = (eventName, callback, target = window) => {
+    if (typeof target !== "undefined") {
+      target.removeEventListener(eventName, callback);
+    }
+  };
+}
+
+export default CustomEventManager;

package/src/utils/customEvents/index.js

@@ -0,0 +1,15 @@
+import useCustomEvent from "./useCustomEvent";
+import CustomEventManager from "./CustomEventManager";
+
+export { useCustomEvent, CustomEventManager };
+
+export const INIT_LOGOUT_EVENT = "site_logout";
+export const ANALYTICS_TRACK_EVENT = "analytics_track_event";
+
+export const triggerOnInitLogout = () => {
+  CustomEventManager.dispatchEvent(INIT_LOGOUT_EVENT);
+};
+
+export const triggerAnalyticsTrackEvent = (eventName, eventParams) => {
+  CustomEventManager.dispatchEvent(ANALYTICS_TRACK_EVENT, { eventName, eventParams });
+};

package/src/utils/customEvents/useCustomEvent.js

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import CustomEventManager from "./CustomEventManager";
+
+const useCustomEvent = (eventName, callback) => {
+  useEffect(() => {
+    CustomEventManager.addEventListener(eventName, callback);
+    return () => {
+      CustomEventManager.removeEventListener(eventName, callback);
+    };
+  }, [eventName, callback]);
+};
+
+export default useCustomEvent;

package/src/utils/dataNormalization.js

@@ -0,0 +1,12 @@
+import { maskData } from "data-guardian";
+
+const FIRST_NAME_KEY = "first_name";
+const LAST_NAME_KEY = "last_name";
+
+const excludeKeys = [FIRST_NAME_KEY, LAST_NAME_KEY];
+
+const maskingConfig = {
+  keyCheck: (key) => excludeKeys.some(excludeKey => key.includes(excludeKey))
+};
+
+export const normalizeData = (data) => maskData(data, maskingConfig);

package/src/utils/envVariables.js

@@ -25,6 +25,7 @@ export const WS_PUB_SERVER_URL = 'WS_PUB_SERVER_URL';
 export const REAL_TIME_UPDATES_STRATEGY = 'REAL_TIME_UPDATES_STRATEGY';
 export const TIMEINTERVALSINCE1970_API_URL = 'TIMEINTERVALSINCE1970_API_URL';
 export const ABLY_API_KEY = 'ABLY_API_KEY';
+export const GOOGLE_TAGMANAGER_ID = 'GOOGLE_TAGMANAGER_ID';
 
 const processEnv = {
     /**
@@ -61,6 +62,7 @@ const processEnv = {
     REAL_TIME_UPDATES_STRATEGY: process.env.GATSBY_REAL_TIME_UPDATES_STRATEGY,
     TIMEINTERVALSINCE1970_API_URL: process.env.GATSBY_TIMEINTERVALSINCE1970_API_URL,
     ABLY_API_KEY: process.env.GATSBY_ABLY_API_KEY,
+    GOOGLE_TAGMANAGER_ID: process.env.GATSBY_GOOGLE_TAGMANAGER_ID,
 }
 
 export const getEnvVariable = (name) => {
@@ -97,4 +99,5 @@ if (typeof window === 'object') {
     window.REAL_TIME_UPDATES_STRATEGY = processEnv[REAL_TIME_UPDATES_STRATEGY];
     window.TIMEINTERVALSINCE1970_API_URL = processEnv[TIMEINTERVALSINCE1970_API_URL];
     window.ABLY_API_KEY = processEnv[ABLY_API_KEY];
+    window.GOOGLE_TAGMANAGER_ID = processEnv[GOOGLE_TAGMANAGER_ID];
 }

package/src/utils/customEvents.js

@@ -1,8 +0,0 @@
-export const onInitLogoutEvent = 'site_logout';
-
-export const triggerOnInitLogout = () => {
-    if(typeof window !== 'undefined') {
-        const event = new Event(onInitLogoutEvent);
-        window.dispatchEvent(event);
-    }
-}