From a7ce67dbcf1a08380a01fc0e8ce9dc99e4a39c2d Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 5 Jul 2022 15:08:01 +0200
Subject: [PATCH] feat: google analytics events

---
 .env.example                                  |  3 +-
 package-lock.json                             | 13 +++++++
 package.json                                  |  1 +
 src/global.d.ts                               |  4 ++
 src/lib/actions/analytics.ts                  | 37 +++++++++++++++++++
 src/lib/layout/navigation.svelte              |  1 -
 src/routes/__layout.svelte                    | 20 ++++++++++
 .../[project]/users/authentication.svelte     | 14 ++++++-
 8 files changed, 89 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/actions/analytics.ts

diff --git a/.env.example b/.env.example
index f036bb204..82ea2c1e7 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,2 @@
-VITE_APPWRITE_ENDPOINT=
\ No newline at end of file
+VITE_APPWRITE_ENDPOINT=
+VITE_GOOGLE_ANALYTICS=
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 61bc26860..00f6cb7ad 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index e91f8e454..b847cf76b 100644
--- a/package.json
+++ b/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",
diff --git a/src/global.d.ts b/src/global.d.ts
index 63908c66c..f68b31bb9 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1 +1,5 @@
 /// <reference types="@sveltejs/kit" />
+/// <reference types="@types/gtag.js" />
+interface Window {
+    GOOGLE_ANALYTICS: string | false;
+}
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
new file mode 100644
index 000000000..c1e99cfda
--- /dev/null
+++ b/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;
+    }
+};
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 2b70baa5d..6c2f519f5 100644
--- a/src/lib/layout/navigation.svelte
+++ b/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;
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 7ed613c2c..5df5c4a54 100644
--- a/src/routes/__layout.svelte
+++ b/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 />
diff --git a/src/routes/console/[project]/users/authentication.svelte b/src/routes/console/[project]/users/authentication.svelte
index 4e2253df8..76fca0f54 100644
--- a/src/routes/console/[project]/users/authentication.svelte
+++ b/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}