From ae51e979cd1b9540751047b6d13ba7bdfd515937 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Fri, 6 May 2022 14:04:09 +0200
Subject: [PATCH] refactor: add Plausible tracker on SaaS domain (#956)

* feat: add Plausible tracker on SaaS domain

* refactor: check uiFlags.T instead of the domain
---
 frontend/package.json                         |  1 +
 frontend/src/component/App.tsx                |  2 +
 .../api/getters/useUiConfig/defaultValue.ts   |  1 +
 .../src/hooks/usePlausibleTracker.test.ts     | 17 +++++++++
 frontend/src/hooks/usePlausibleTracker.ts     | 37 +++++++++++++++++++
 frontend/src/interfaces/uiConfig.ts           |  1 +
 frontend/yarn.lock                            |  5 +++
 7 files changed, 64 insertions(+)
 create mode 100644 frontend/src/hooks/usePlausibleTracker.test.ts
 create mode 100644 frontend/src/hooks/usePlausibleTracker.ts

diff --git a/frontend/package.json b/frontend/package.json
index db9e6f3dba..d98fd85b33 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -76,6 +76,7 @@
     "lodash.clonedeep": "4.5.0",
     "msw": "^0.39.2",
     "pkginfo": "^0.4.1",
+    "plausible-tracker": "^0.3.5",
     "prettier": "2.6.2",
     "prop-types": "15.8.1",
     "react": "17.0.2",
diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx
index 870cc0c7be..d94b591735 100644
--- a/frontend/src/component/App.tsx
+++ b/frontend/src/component/App.tsx
@@ -12,12 +12,14 @@ import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
 import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import { SplashPageRedirect } from 'component/splash/SplashPageRedirect/SplashPageRedirect';
 import styles from 'component/styles.module.scss';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 export const App = () => {
     const { authDetails } = useAuthDetails();
     const { user } = useAuthUser();
     const isLoggedIn = Boolean(user?.id);
     const hasFetchedAuth = Boolean(authDetails || user);
+    usePlausibleTracker();
 
     return (
         <SWRProvider isUnauthorized={!isLoggedIn}>
diff --git a/frontend/src/hooks/api/getters/useUiConfig/defaultValue.ts b/frontend/src/hooks/api/getters/useUiConfig/defaultValue.ts
index 18c2c65ecb..d0cb77ed38 100644
--- a/frontend/src/hooks/api/getters/useUiConfig/defaultValue.ts
+++ b/frontend/src/hooks/api/getters/useUiConfig/defaultValue.ts
@@ -13,6 +13,7 @@ export const defaultValue = {
         EEA: false,
         CO: false,
         SE: false,
+        T: false,
     },
     links: [
         {
diff --git a/frontend/src/hooks/usePlausibleTracker.test.ts b/frontend/src/hooks/usePlausibleTracker.test.ts
new file mode 100644
index 0000000000..467bc4b4a8
--- /dev/null
+++ b/frontend/src/hooks/usePlausibleTracker.test.ts
@@ -0,0 +1,17 @@
+import { renderHook } from '@testing-library/react-hooks';
+import {
+    usePlausibleTracker,
+    enablePlausibleTracker,
+} from 'hooks/usePlausibleTracker';
+
+test('usePlausibleTracker', async () => {
+    const { result } = renderHook(() => usePlausibleTracker());
+    expect(result.current).toBeUndefined();
+});
+
+test('enablePlausibleTracker', async () => {
+    expect(enablePlausibleTracker({})).toEqual(false);
+    expect(enablePlausibleTracker({ SE: true })).toEqual(false);
+    expect(enablePlausibleTracker({ T: false })).toEqual(false);
+    expect(enablePlausibleTracker({ T: true })).toEqual(true);
+});
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
new file mode 100644
index 0000000000..fc608fdffe
--- /dev/null
+++ b/frontend/src/hooks/usePlausibleTracker.ts
@@ -0,0 +1,37 @@
+import Plausible from 'plausible-tracker';
+import { useEffect } from 'react';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { IFlags } from 'interfaces/uiConfig';
+
+const PLAUSIBLE_UNLEASH_API_HOST = 'https://plausible.getunleash.io';
+const PLAUSIBLE_UNLEASH_DOMAIN = 'app.unleash-hosted.com';
+
+export const usePlausibleTracker = () => {
+    const { uiConfig } = useUiConfig();
+    const enabled = enablePlausibleTracker(uiConfig.flags);
+
+    useEffect(() => {
+        if (enabled) {
+            try {
+                return initPlausibleTracker();
+            } catch (error) {
+                console.warn(error);
+            }
+        }
+    }, [enabled]);
+};
+
+const initPlausibleTracker = (): (() => void) => {
+    const plausible = Plausible({
+        domain: PLAUSIBLE_UNLEASH_DOMAIN,
+        apiHost: PLAUSIBLE_UNLEASH_API_HOST,
+        trackLocalhost: true,
+    });
+
+    return plausible.enableAutoPageviews();
+};
+
+// Enable Plausible if we're on the Unleash SaaS domain.
+export const enablePlausibleTracker = (flags: Partial<IFlags>): boolean => {
+    return Boolean(flags.T);
+};
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index 94921882bd..4cd9a3a613 100644
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@@ -28,6 +28,7 @@ export interface IFlags {
     OIDC?: boolean;
     CO?: boolean;
     SE?: boolean;
+    T?: boolean;
 }
 
 export interface IVersionInfo {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index c92a877de8..4891b31e65 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3169,6 +3169,11 @@ pkginfo@^0.4.1:
   resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.4.1.tgz#b5418ef0439de5425fc4995042dced14fb2a84ff"
   integrity sha1-tUGO8EOd5UJfxJlQQtztFPsqhP8=
 
+plausible-tracker@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/plausible-tracker/-/plausible-tracker-0.3.5.tgz#49c09a7eb727f1d5c859c3fc8072837b13ee9b85"
+  integrity sha512-6c6VPdPtI9KmIsfr8zLBViIDMt369eeaNA1J8JrAmAtrpSkeJWvjwcJ+cLn7gVJn5AtQWC8NgSEee2d/5RNytA==
+
 postcss@^8.4.13:
   version "8.4.13"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.13.tgz#7c87bc268e79f7f86524235821dfdf9f73e5d575"