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 @@
///
+///
+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;
+ event?: keyof HTMLElementEventMap;
+};
+
+export const event: Action = (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 @@
+
+ {#if browser && window.GOOGLE_ANALYTICS}
+
+
+ {/if}
+
+
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">
{provider.name}
-
{provider.active ? 'Enabled' : 'Disabled'}
+
+ {provider.active ? 'Enabled' : 'Disabled'}
+
{/each}