From a7ce67dbcf1a08380a01fc0e8ce9dc99e4a39c2d Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 5 Jul 2022 15:08:01 +0200 Subject: [PATCH 1/7] 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 @@ /// +/// +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} From 064a578ab0f40f80529b43e38af4d522a40cead9 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 5 Jul 2022 16:03:49 +0200 Subject: [PATCH 2/7] fix: tracking check --- src/lib/actions/analytics.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts index c1e99cfda..833e210ea 100644 --- a/src/lib/actions/analytics.ts +++ b/src/lib/actions/analytics.ts @@ -8,7 +8,7 @@ export type AnalyticsActionParam = { }; export const event: Action = (node, param) => { - if (isTrackingAllowed()) { + if (!isTrackingAllowed()) { return; } From 933817e133f9b0b25f47245789aac652f45817af Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 5 Jul 2022 23:09:01 +0200 Subject: [PATCH 3/7] feat: add more analytics --- src/lib/actions/analytics.ts | 2 +- src/routes/console/[project]/users/index.svelte | 15 +++++++++++---- src/routes/console/[project]/users/teams.svelte | 15 +++++++++++---- 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts index 833e210ea..92b3b3e0e 100644 --- a/src/lib/actions/analytics.ts +++ b/src/lib/actions/analytics.ts @@ -12,7 +12,7 @@ export const event: Action = (node, param) => return; } - node.addEventListener('click', () => + node.addEventListener(param.event ?? 'click', () => gtag('event', param.name, { ...param.parameters, action: param.action diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte index f6c929831..2fec22ca0 100644 --- a/src/routes/console/[project]/users/index.svelte +++ b/src/routes/console/[project]/users/index.svelte @@ -14,6 +14,7 @@ import Create from './_createUser.svelte'; import type { Models } from '@aw-labs/appwrite-console'; import { goto } from '$app/navigation'; + import { event } from '$lib/actions/analytics'; import { Pill } from '$lib/elements'; import { toLocaleDateTime } from '$lib/helpers/date'; import { Container } from '$lib/layout'; @@ -112,16 +113,22 @@
-
+

Total results: {$usersList.response.total}

{:else}
-
+
diff --git a/src/routes/console/[project]/users/teams.svelte b/src/routes/console/[project]/users/teams.svelte index 3cbd37636..0be454a51 100644 --- a/src/routes/console/[project]/users/teams.svelte +++ b/src/routes/console/[project]/users/teams.svelte @@ -13,6 +13,7 @@ import { Empty, Pagination, Avatar, Search } from '$lib/components'; import Create from './_createTeam.svelte'; import { goto } from '$app/navigation'; + import { event } from '$lib/actions/analytics'; import { toLocaleDateTime } from '$lib/helpers/date'; import { Container } from '$lib/layout'; import { base } from '$app/paths'; @@ -91,15 +92,21 @@
-
+

Total results: {$teamsList.response.total}

{:else} -
+
From e0093b581ab55e44ba05a50207f994f3e4cfb40d Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 5 Jul 2022 23:16:48 +0200 Subject: [PATCH 4/7] fix: analytics events --- src/lib/actions/analytics.ts | 2 +- src/routes/console/[project]/users/index.svelte | 17 +++++++++++++---- src/routes/console/[project]/users/teams.svelte | 15 ++++++++++++--- 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts index 92b3b3e0e..16f26754a 100644 --- a/src/lib/actions/analytics.ts +++ b/src/lib/actions/analytics.ts @@ -11,7 +11,7 @@ export const event: Action = (node, param) => if (!isTrackingAllowed()) { return; } - + console.log('asd'); node.addEventListener(param.event ?? 'click', () => gtag('event', param.name, { ...param.parameters, diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte index 2fec22ca0..cc212249f 100644 --- a/src/routes/console/[project]/users/index.svelte +++ b/src/routes/console/[project]/users/index.svelte @@ -12,7 +12,6 @@ TableRowLink } from '$lib/elements/table'; import Create from './_createUser.svelte'; - import type { Models } from '@aw-labs/appwrite-console'; import { goto } from '$app/navigation'; import { event } from '$lib/actions/analytics'; import { Pill } from '$lib/elements'; @@ -21,6 +20,7 @@ import { base } from '$app/paths'; import { usersList } from './store'; import { onMount } from 'svelte'; + import type { Models } from '@aw-labs/appwrite-console'; let showCreate = false; let search = ''; @@ -53,9 +53,18 @@ - + + + {#if $usersList?.response?.total} diff --git a/src/routes/console/[project]/users/teams.svelte b/src/routes/console/[project]/users/teams.svelte index 0be454a51..a0c73f35e 100644 --- a/src/routes/console/[project]/users/teams.svelte +++ b/src/routes/console/[project]/users/teams.svelte @@ -48,9 +48,18 @@ - + + + {#if $teamsList?.response?.total}
From e7b0c8cef720f58f1a1189386f874f7a1092664e Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 5 Jul 2022 23:17:08 +0200 Subject: [PATCH 5/7] fix: remove console.log --- src/lib/actions/analytics.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts index 16f26754a..92b3b3e0e 100644 --- a/src/lib/actions/analytics.ts +++ b/src/lib/actions/analytics.ts @@ -11,7 +11,7 @@ export const event: Action = (node, param) => if (!isTrackingAllowed()) { return; } - console.log('asd'); + node.addEventListener(param.event ?? 'click', () => gtag('event', param.name, { ...param.parameters, From e7498fceb349d574a0ce8e2bbb0374168eb95a8a Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 6 Jul 2022 09:49:03 +0200 Subject: [PATCH 6/7] feat: inputs show live text not as placeholder --- .../[project]/users/user/[user]/index.svelte | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte index d1398cc7f..c7e609065 100644 --- a/src/routes/console/[project]/users/user/[user]/index.svelte +++ b/src/routes/console/[project]/users/user/[user]/index.svelte @@ -29,9 +29,9 @@ let showError: false | 'name' | 'email' | 'phone' | 'password' = false; let errorMessage = 'Something went wrong'; let errorType: 'error' | 'warning' | 'success' = 'error'; - let userName: string = null, - userEmail: string = null, - userPhone: string = null, + let userName: string = $user.response.name, + userEmail: string = $user.response.email, + userPhone: string = $user.response.phone, newPassword: string = null, newPref = false, newKey: string = null, @@ -113,7 +113,6 @@ try { await sdkForProject.users.updateName($user.response.$id, userName); $user.response.name = userName; - userName = null; showError = false; addNotification({ message: 'Name has been updated', @@ -127,7 +126,6 @@ try { await sdkForProject.users.updateEmail($user.response.$id, userEmail); $user.response.email = userEmail; - userEmail = null; showError = false; addNotification({ message: 'Email has been updated', @@ -141,7 +139,6 @@ try { await sdkForProject.users.updatePhone($user.response.$id, userPhone); $user.response.phone = userPhone; - userPhone = null; showError = false; addNotification({ message: 'Phone has been updated', @@ -284,7 +281,7 @@ {#if showError === 'name'} @@ -295,7 +292,7 @@ @@ -308,7 +305,7 @@ {#if showError === 'email'} @@ -319,7 +316,7 @@ @@ -332,7 +329,7 @@ {#if showError === 'phone'} @@ -343,7 +340,7 @@ From 37e925911985c9355f295af0bcf529200eb48fe6 Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 6 Jul 2022 10:01:09 +0200 Subject: [PATCH 7/7] feat: inputs show live text not placeholder --- .../console/[project]/users/teams/[team]/index.svelte | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/routes/console/[project]/users/teams/[team]/index.svelte b/src/routes/console/[project]/users/teams/[team]/index.svelte index ab25e03e9..98ffc800d 100644 --- a/src/routes/console/[project]/users/teams/[team]/index.svelte +++ b/src/routes/console/[project]/users/teams/[team]/index.svelte @@ -15,7 +15,7 @@ let showError: false | 'name' | 'email' | 'password' = false; let errorMessage = 'Something went wrong'; let errorType: 'error' | 'warning' | 'success' = 'error'; - let teamName: string = null; + let teamName: string = $team.response.name; function addError(location: typeof showError, message: string, type: typeof errorType) { showError = location; @@ -27,7 +27,6 @@ try { await sdkForProject.teams.update($page.params.team, teamName); $team.response.name = teamName; - teamName = null; addNotification({ message: 'Name has been updated', type: 'success' @@ -68,7 +67,7 @@ {#if showError === 'name'} @@ -79,7 +78,7 @@