add custom event helper

dimaslanjaka · Oct 19, 2023 · d3ab715 · d3ab715
1 parent f5cbd73
commit d3ab715
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/src/components/GAnalytics/utils/callGAnalytics.ts b/src/components/GAnalytics/utils/callGAnalytics.ts
@@ -1,8 +1,7 @@
 /* global gtag */
-import { projectConfig } from '@root/src/project';
 import { insertBefore } from '@root/src/utils';
-import { TAG_ID, fetchIp, gtagBuilder } from './userData';
 import './dummy';
+import { TAG_ID, fetchIp } from './userData';
 
 /**
  * call google analytics script
@@ -30,14 +29,12 @@ function sendInitialData() {
   // window.gtag('config', TAG_ID);
   // send user by ip
   fetchIp().then(() => {
-    // send custom event
-    gtag(
-      'event',
-      'screen_view',
-      gtagBuilder({
-        app_name: projectConfig.title,
-        screen_name: document.title
-      })
-    );
+    // send custom event here
+    // sendCustomEvent('custom_event', 'sample', 'hello world');
+    // gtag('set', 'user_properties', {
+    //   favorite_composer: 'Mahler',
+    //   favorite_instrument: 'double bass',
+    //   season_ticketholder: 'true'
+    // });
   });
 }
diff --git a/src/components/GAnalytics/utils/userData.ts b/src/components/GAnalytics/utils/userData.ts
@@ -154,12 +154,25 @@ const ipApi = async function () {
   return setDataUser(IP);
 };
 
-const localhost = islocalhost();
+const isLocal = islocalhost();
 export function gtagBuilder(obj: Record<string, any>) {
-  if (localhost) obj.debug_mode = true;
+  if (isLocal) obj.debug_mode = true;
   return obj;
 }
 
+/**
+ * send custom event
+ * @param actionName action name
+ * @param eventCategory event category
+ * @param dimension5 event value
+ */
+export function sendCustomEvent(actionName: string, eventCategory: string, dimension5: string) {
+  gtag('event', actionName, {
+    eventCategory,
+    dimension5
+  });
+}
+
 function processData() {
   const { ip } = data_analystic.info;
   if (ip) {
@@ -172,6 +185,15 @@ function processData() {
       })
     );
   }
+
+  gtag(
+    'event',
+    'screen_view',
+    gtagBuilder({
+      app_name: projectConfig.title,
+      screen_name: document.title
+    })
+  );
 }
 
 /**