[feat] Integrate Google Analytics via gtag.js (#2940)

aimhubio · Jul 26, 2023 · 31ddd5f · 31ddd5f
1 parent ad977f3
commit 31ddd5f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 123 deletions.
diff --git a/src/aimcore/web/ui/public/index.html b/src/aimcore/web/ui/public/index.html
@@ -16,7 +16,7 @@
 
     <!-- Load pyodide -->
     <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
-    
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -156,71 +156,25 @@
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
     />
     <title>Aim</title>
-
-    <script>
-      !(function () {
-        var analytics = (window.analytics = window.analytics || []);
-        if (!analytics.initialize)
-          if (analytics.invoked)
-            window.console &&
-              console.error &&
-              console.error('Segment snippet included twice.');
-          else {
-            analytics.invoked = !0;
-            analytics.methods = [
-              'trackSubmit',
-              'trackClick',
-              'trackLink',
-              'trackForm',
-              'pageview',
-              'identify',
-              'reset',
-              'group',
-              'track',
-              'ready',
-              'alias',
-              'debug',
-              'page',
-              'once',
-              'off',
-              'on',
-              'addSourceMiddleware',
-              'addIntegrationMiddleware',
-              'setAnonymousId',
-              'addDestinationMiddleware',
-            ];
-            analytics.factory = function (e) {
-              return function () {
-                var t = Array.prototype.slice.call(arguments);
-                t.unshift(e);
-                analytics.push(t);
-                return analytics;
-              };
-            };
-            for (var e = 0; e < analytics.methods.length; e++) {
-              var key = analytics.methods[e];
-              analytics[key] = analytics.factory(key);
-            }
-            analytics.load = function (key, e) {
-              var t = document.createElement('script');
-              t.type = 'text/javascript';
-              t.async = !0;
-              t.src =
-                'https://cdn.segment.com/analytics.js/v1/' +
-                key +
-                '/analytics.min.js';
-              var n = document.getElementsByTagName('script')[0];
-              n.parentNode.insertBefore(t, n);
-              analytics._loadOptions = e;
-            };
-            analytics.SNIPPET_VERSION = '4.15.3';
-          }
-      })();
-    </script>
     <script>
       window.API_BASE_PATH = '{{ base_path }}';
       window.externalPublicPath = '%PUBLIC_URL%/';
     </script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-WYW4M0GBHQ"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-WYW4M0GBHQ', {
+        send_page_view: false,
+      });
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/aimcore/web/ui/src/services/analytics.ts b/src/aimcore/web/ui/src/services/analytics.ts
@@ -1,62 +1,22 @@
-//@ts-nocheck
-export const SEGMENT_DEMO_WRITE_KEY = 'Z5rtxFe3gJmZB8JD97c4rqQa9R0q4Gkn';
-export const SEGMENT_WRITE_KEY = 'RrVqLHHD6WDXoFBkodO9KidodTtU92XO';
-export function isDev() {
-  return process.env.NODE_ENV === 'development';
-}
+const isDev = process.env.NODE_ENV === 'development';
 
-let initialized = false;
+const enabled = () =>
+  !isDev && window.telemetry_enabled === 1 && window.gtag !== undefined;
 
-const enabled = () => {
-  return (
-    !isDev() && window.analytics !== false && window.telemetry_enabled === 1
-  );
-};
-
-const init = () => {
-  if (initialized) return;
-  if (
-    window.location.hostname.indexOf('aimstack.io') !== -1 &&
-    (window.location.hostname.indexOf('demo') !== -1 ||
-      window.location.hostname.indexOf('play') !== -1)
-  ) {
-    window.analytics._writeKey = SEGMENT_DEMO_WRITE_KEY;
-    window.analytics.load(SEGMENT_DEMO_WRITE_KEY);
-  } else {
-    window.analytics._writeKey = SEGMENT_WRITE_KEY;
-    window.analytics.load(SEGMENT_WRITE_KEY);
+const pageView = (pageName: string) => {
+  if (enabled()) {
+    window.gtag('event', 'page_view', {
+      page_title: pageName,
+      page_path: window.location.pathname,
+      page_location: window.location.href,
+    });
   }
-  window.analytics.identify();
-  initialized = true;
-};
-
-const pageView = (pageName, pageCat = null) => {
-  if (!enabled()) return;
-  init();
-  window.analytics.page(pageCat, pageName, {
-    path: window.location.pathname,
-    url: window.location.hostname,
-    search: null,
-    referrer: null,
-    title: null,
-  });
 };
 
 const trackEvent = (eventName: string, properties = {}) => {
-  if (!enabled()) return;
-  init();
-
-  window.analytics.track(eventName, properties, {
-    path: window.location.pathname,
-    url: window.location.hostname,
-    page: {
-      path: null,
-      search: null,
-      referrer: null,
-      title: null,
-      url: null,
-    },
-  });
+  if (enabled()) {
+    window.gtag('event', eventName, properties);
+  }
 };
 
-export { init, pageView, trackEvent };
+export { pageView, trackEvent };
diff --git a/src/aimcore/web/ui/src/types/global.d.ts b/src/aimcore/web/ui/src/types/global.d.ts
@@ -1,5 +1,12 @@
+interface GTAG {
+  (command: string, target: string, params?: any): void;
+}
 declare global {
   const __DEV__: boolean;
+  interface Window {
+    gtag: GTAG;
+    telemetry_enabled: number;
+  }
 }
 
 export enum AppNameEnum {
@@ -9,10 +16,3 @@ export enum AppNameEnum {
   AUDIOS = 'audios',
   TEXT = 'text',
 }
-
-// export enum GroupNameEnum {
-//   COLOR = 'color',
-//   STROKE = 'stroke',
-//   CHART = 'chart',
-//   ROW = 'row',
-// }