feat: google analytics events

.env.example

@@ -1 +1,2 @@
-VITE_APPWRITE_ENDPOINT=
+VITE_APPWRITE_ENDPOINT=
+VITE_GOOGLE_ANALYTICS=

package-lock.json

@@ -22,6 +22,7 @@
                 "@testing-library/jest-dom": "^5.16.4",
                 "@testing-library/svelte": "^3.1.3",
                 "@testing-library/user-event": "^14.2.0",
+                "@types/gtag.js": "^0.0.10",
                 "@typescript-eslint/eslint-plugin": "^5.27.1",
                 "@typescript-eslint/parser": "^5.27.1",
                 "eslint": "^8.17.0",
@@ -1476,6 +1477,12 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@types/gtag.js": {
+            "version": "0.0.10",
+            "resolved": "https://registry.npmjs.org/@types/gtag.js/-/gtag.js-0.0.10.tgz",
+            "integrity": "sha512-98Hy7woUb3jMAMXkZQwfIOYNyfxmI0+U4m0PpCGdnd/FHk0tDpQFCqgXdNkdEoXsKkcGya/2Gew1cAJjKJspVw==",
+            "dev": true
+        },
         "node_modules/@types/istanbul-lib-coverage": {
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -8960,6 +8967,12 @@
                 "@types/node": "*"
             }
         },
+        "@types/gtag.js": {
+            "version": "0.0.10",
+            "resolved": "https://registry.npmjs.org/@types/gtag.js/-/gtag.js-0.0.10.tgz",
+            "integrity": "sha512-98Hy7woUb3jMAMXkZQwfIOYNyfxmI0+U4m0PpCGdnd/FHk0tDpQFCqgXdNkdEoXsKkcGya/2Gew1cAJjKJspVw==",
+            "dev": true
+        },
         "@types/istanbul-lib-coverage": {
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",

package.json

@@ -33,6 +33,7 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/svelte": "^3.1.3",
         "@testing-library/user-event": "^14.2.0",
+        "@types/gtag.js": "^0.0.10",
         "@typescript-eslint/eslint-plugin": "^5.27.1",
         "@typescript-eslint/parser": "^5.27.1",
         "eslint": "^8.17.0",

src/global.d.ts

@@ -1 +1,5 @@
 /// <reference types="@sveltejs/kit" />
+/// <reference types="@types/gtag.js" />
+interface Window {
+    GOOGLE_ANALYTICS: string | false;
+}

src/lib/actions/analytics.ts

@@ -0,0 +1,37 @@
+import type { Action } from 'svelte/action';
+
+export type AnalyticsActionParam = {
+    name: string;
+    action: string;
+    parameters?: Record<string, string>;
+    event?: keyof HTMLElementEventMap;
+};
+
+export const event: Action<HTMLElement, AnalyticsActionParam> = (node, param) => {
+    if (isTrackingAllowed()) {
+        return;
+    }
+
+    node.addEventListener('click', () =>
+        gtag('event', param.name, {
+            ...param.parameters,
+            action: param.action
+        })
+    );
+};
+
+const isTrackingAllowed = () => {
+    if (!('gtag' in window)) {
+        return false;
+    }
+
+    if (window.navigator?.doNotTrack) {
+        if (navigator.doNotTrack === '1' || navigator.doNotTrack === 'yes') {
+            return false;
+        } else {
+            return true;
+        }
+    } else {
+        return true;
+    }
+};

src/lib/layout/navigation.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { base } from '$app/paths';
-
     import { page } from '$app/stores';
 
     $: project = $page.params.project;

src/routes/__layout.svelte

@@ -12,6 +12,10 @@
     import { browser } from '$app/env';
     import { app } from '$lib/stores/app';
 
+    if (browser) {
+        window.GOOGLE_ANALYTICS = import.meta.env.VITE_GOOGLE_ANALYTICS?.toString() ?? false;
+    }
+
     onMount(async () => {
         try {
             if (!$user) {
@@ -42,6 +46,22 @@
     }
 </script>
 
+<svelte:head>
+    {#if browser && window.GOOGLE_ANALYTICS}
+        <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${window.GOOGLE_ANALYTICS}`}></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+            gtag('js', new Date());
+            gtag('config', window.GOOGLE_ANALYTICS);
+        </script>
+    {/if}
+</svelte:head>
+
 <Notifications />
 
 <slot />

src/routes/console/[project]/users/authentication.svelte

@@ -8,6 +8,7 @@
     import { project } from '../store';
     import { authMethods } from '$lib/stores/auth-methods';
     import { OAuthProviders } from '$lib/stores/oauth-providers';
+    import { event } from '$lib/actions/analytics';
     import type { Provider } from '$lib/stores/oauth-providers';
 
     $: projectId = $project.$id;
@@ -64,6 +65,14 @@
                         selectedProvider = provider;
                         showModal = true;
                     }}
+                    use:event={{
+                        name: 'console_users',
+                        action: 'click_update',
+                        event: 'click',
+                        parameters: {
+                            provider: provider.name
+                        }
+                    }}
                     class="card u-flex u-flex-vertical u-cross-center">
                     <div class="image-item">
                         <img
@@ -74,8 +83,9 @@
                     </div>
                     <p class="u-margin-block-start-8">{provider.name}</p>
                     <div class="u-margin-block-start-24">
-                        <Pill success={provider.active}
-                            >{provider.active ? 'Enabled' : 'Disabled'}</Pill>
+                        <Pill success={provider.active}>
+                            {provider.active ? 'Enabled' : 'Disabled'}
+                        </Pill>
                     </div>
                 </button>
             {/each}