Add opt-in Google Analitics integration (#165)

.github/workflows/main-branch.yml

@@ -60,9 +60,9 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Run Astro build command
+        run: npm run build
         env:
           PUBLIC_APP_ENV: snapshot
-        run: npm run build
       - name: Percy check
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
@@ -85,6 +85,9 @@ jobs:
         run: npm ci
       - name: Run Astro build command
         run: npm run build
+        env:
+          PUBLIC_GA_MEASUREMENT_ID: ${{ secrets.PUBLIC_GA_MEASUREMENT_ID }}
+          PUBLIC_CLARITY_PROJECT_ID: ${{ secrets.PUBLIC_CLARITY_PROJECT_ID }}
       - name: Deploy to Netlify
         id: netlify
         uses: nwtgck/actions-netlify@v2

.github/workflows/pull-request.yml

@@ -60,9 +60,9 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Run Astro build command
+        run: npm run build
         env:
           PUBLIC_APP_ENV: snapshot
-        run: npm run build
       - name: Percy check
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

astro.config.ts

@@ -1,12 +1,18 @@
 import image from '@astrojs/image';
 import tailwind from '@astrojs/tailwind';
+import partytown from '@astrojs/partytown';
 import compress from 'astro-compress';
 import { defineConfig } from 'astro/config';
 import { visualizer } from 'rollup-plugin-visualizer';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), image(), compress()],
+  integrations: [
+    tailwind(),
+    image(),
+    compress(),
+    partytown({ config: { forward: ['dataLayer.push', 'clarity.push'] } }),
+  ],
   vite: {
     plugins: [visualizer()],
   },

package-lock.json

@@ -8,6 +8,7 @@
       "name": "devscard",
       "version": "0.0.1",
       "dependencies": {
+        "@astrojs/partytown": "1.0.2",
         "@floating-ui/dom": "1.1.0",
         "iconify-icon": "1.0.2",
         "nanoid": "4.0.0"
@@ -157,6 +158,15 @@
         "vfile-message": "^3.0.0"
       }
     },
+    "node_modules/@astrojs/partytown": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/partytown/-/partytown-1.0.2.tgz",
+      "integrity": "sha512-+pUjLxdp0SYqUO+X+FjFN95KxK7w4Rs5gIMQ7scKUWd2073D3/5hTlij9qNmX5Bk/tFHUfTivKIZ5p233Lpa9Q==",
+      "dependencies": {
+        "@builder.io/partytown": "^0.7.1",
+        "mrmime": "^1.0.0"
+      }
+    },
     "node_modules/@astrojs/prism": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-1.0.1.tgz",
@@ -588,6 +598,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@builder.io/partytown": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@builder.io/partytown/-/partytown-0.7.5.tgz",
+      "integrity": "sha512-Zbr2Eo0AQ4yzmQr/36/h+6LKjmdVBB3Q5cGzO6rtlIKB/IOpbQVUZW+XAnhpJmJr9sIF97OZjgbhG9k7Sjn4yw==",
+      "bin": {
+        "partytown": "bin/partytown.cjs"
+      }
+    },
     "node_modules/@emmetio/abbreviation": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.3.tgz",
@@ -5915,7 +5933,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
       "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -9541,6 +9558,15 @@
         "vfile-message": "^3.0.0"
       }
     },
+    "@astrojs/partytown": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/partytown/-/partytown-1.0.2.tgz",
+      "integrity": "sha512-+pUjLxdp0SYqUO+X+FjFN95KxK7w4Rs5gIMQ7scKUWd2073D3/5hTlij9qNmX5Bk/tFHUfTivKIZ5p233Lpa9Q==",
+      "requires": {
+        "@builder.io/partytown": "^0.7.1",
+        "mrmime": "^1.0.0"
+      }
+    },
     "@astrojs/prism": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-1.0.1.tgz",
@@ -9862,6 +9888,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@builder.io/partytown": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@builder.io/partytown/-/partytown-0.7.5.tgz",
+      "integrity": "sha512-Zbr2Eo0AQ4yzmQr/36/h+6LKjmdVBB3Q5cGzO6rtlIKB/IOpbQVUZW+XAnhpJmJr9sIF97OZjgbhG9k7Sjn4yw=="
+    },
     "@emmetio/abbreviation": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.3.tgz",
@@ -13667,8 +13698,7 @@
     "mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
-      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
-      "dev": true
+      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw=="
     },
     "ms": {
       "version": "2.1.2",

package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@astrojs/image": "0.12.1",
+    "@astrojs/partytown": "1.0.2",
     "@astrojs/react": "1.2.2",
     "@astrojs/tailwind": "2.1.3",
     "@percy/cli": "1.17.0",

src/web/analytics/analytics.astro

@@ -0,0 +1,10 @@
+---
+import Clarity from './clarity.astro';
+import GoogleAnalytics from './google-analytics.astro';
+
+const GA_MEASUREMENT_ID = import.meta.env.PUBLIC_GA_MEASUREMENT_ID;
+const CLARITY_PROJECT_ID = import.meta.env.PUBLIC_CLARITY_PROJECT_ID;
+---
+
+{GA_MEASUREMENT_ID && <GoogleAnalytics id={GA_MEASUREMENT_ID} />}
+{CLARITY_PROJECT_ID && <Clarity id={CLARITY_PROJECT_ID} />}

src/web/analytics/clarity.astro

@@ -0,0 +1,22 @@
+---
+export interface Props {
+  id: string;
+}
+
+const { id } = Astro.props;
+---
+
+<script type="text/partytown" define:vars={{ id }}>
+  (function (c, l, a, r, i, t, y) {
+    c[a] =
+      c[a] ||
+      function () {
+        (c[a].q = c[a].q || []).push(arguments);
+      };
+    t = l.createElement(r);
+    t.async = 1;
+    t.src = 'https://www.clarity.ms/tag/' + i;
+    y = l.getElementsByTagName(r)[0];
+    y.parentNode.insertBefore(t, y);
+  })(window, document, 'clarity', 'script', id);
+</script>

src/web/analytics/google-analytics.astro

@@ -0,0 +1,17 @@
+---
+export interface Props {
+  id: string;
+}
+
+const { id } = Astro.props;
+---
+
+<script type="text/partytown" src={`https://www.googletagmanager.com/gtag/js?id=${id}`}></script>
+<script type="text/partytown" define:vars={{ id }}>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+  gtag('config', id);
+</script>

src/web/components/layout.astro

@@ -1,5 +1,6 @@
 ---
 import type { Data } from '@/types/data';
+import Analytics from '@/web/analytics/analytics.astro';
 
 export interface Props extends Pick<Data['config'], 'seo' | 'i18n'> {}
 
@@ -34,6 +35,7 @@ const { seo, i18n } = Astro.props;
 
       window.localStorage.setItem('theme', theme);
     </script>
+    <Analytics />
   </head>
   <body class="flex justify-center overflow-x-hidden bg-gray-50 dark:bg-gray-900 xl:relative xl:left-7">
     <slot />