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

@@ -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",

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}>

frontend/src/hooks/api/getters/useUiConfig/defaultValue.ts

@@ -13,6 +13,7 @@ export const defaultValue = {
         EEA: false,
         CO: false,
         SE: false,
+        T: false,
     },
     links: [
         {

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);
+});

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);
+};

frontend/src/interfaces/uiConfig.ts

@@ -28,6 +28,7 @@ export interface IFlags {
     OIDC?: boolean;
     CO?: boolean;
     SE?: boolean;
+    T?: boolean;
 }
 
 export interface IVersionInfo {

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"