From 76adf613d3db2d3bab52c665f91fa85c9e1d1a21 Mon Sep 17 00:00:00 2001
From: Erik Vroon <erik.vroon22@gmail.com>
Date: Sat, 24 Feb 2024 22:34:51 +0100
Subject: [PATCH] Add support for umami analytics (#528)

We can make the loading of analytics script slightly more abstract to
support more providers.
---
 docs/docs/running-bracket/configuration.md | 11 +++++++----
 frontend/.env.development                  |  5 +++--
 frontend/src/pages/_app.tsx                | 16 +++++++---------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/docs/docs/running-bracket/configuration.md b/docs/docs/running-bracket/configuration.md
index 8854eeec..fa29a0a7 100644
--- a/docs/docs/running-bracket/configuration.md
+++ b/docs/docs/running-bracket/configuration.md
@@ -47,9 +47,11 @@ AUTO_RUN_MIGRATIONS=true
   accounts. You get the secret when you create a new site in HCaptcha.
 - `NEXT_PUBLIC_API_BASE_URL`:  The base URL of the backend API to which the frontend sends requests.
   For example: `https://api.bracket.com`
-- `PLAUSIBLE_ANALYTICS_DATA_DOMAIN`: The `data-domain` attribute passed to the script for Plausible
+- `ANALYTICS_DATA_DOMAIN`: The `data-domain` attribute passed to the script for Plausible
   analytics
-- `PLAUSIBLE_ANALYTICS_SCRIPT_SRC`: The URL to the script for Plausible analytics.
+- `ANALYTICS_DATA_WEBSITE_ID`: The `data-website-id` attribute passed to the script for Umami
+  analytics
+- `ANALYTICS_SCRIPT_SRC`: The URL to the script for analytics purposes.
 
 ### Frontend: Example configuration file
 
@@ -60,8 +62,9 @@ This is an example of how the config file should look like:
 ```shell
 NEXT_PUBLIC_HCAPTCHA_SITE_KEY='10000000-ffff-ffff-ffff-000000000001'
 NEXT_PUBLIC_API_BASE_URL='https://api.bracket.com'
-PLAUSIBLE_ANALYTICS_DATA_DOMAIN='bracket.com'
-PLAUSIBLE_ANALYTICS_SCRIPT_SRC='https://plausible.bracket.com/js/script.js'
+ANALYTICS_SCRIPT_SRC='https://analytics.bracket.com/script.js'
+ANALYTICS_DATA_DOMAIN='bracket.com'
+ANALYTICS_DATA_WEBSITE_ID='bracket.com'
 ```
 
 [next-config-url]: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#loading-environment-variables
diff --git a/frontend/.env.development b/frontend/.env.development
index 83d88669..d9db6373 100644
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -1,3 +1,4 @@
 NEXT_PUBLIC_HCAPTCHA_SITE_KEY='10000000-ffff-ffff-ffff-000000000001'
-PLAUSIBLE_ANALYTICS_DATA_DOMAIN=''
-PLAUSIBLE_ANALYTICS_SCRIPT_SRC=''
+ANALYTICS_SCRIPT_SRC=''
+ANALYTICS_DATA_DOMAIN=''
+ANALYTICS_DATA_WEBSITE_ID=''
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index 7b7eb13e..d11c023a 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -27,19 +27,17 @@ const theme = createTheme({
   },
 });
 
-function PlausibleAnalyticsScript() {
-  if (
-    process.env.PLAUSIBLE_ANALYTICS_DATA_DOMAIN == null ||
-    process.env.PLAUSIBLE_ANALYTICS_SCRIPT_SRC == null
-  ) {
+function AnalyticsScript() {
+  if (process.env.ANALYTICS_SCRIPT_SRC == null) {
     return null;
   }
 
   return (
     <script
-      defer
-      data-domain={process.env.PLAUSIBLE_ANALYTICS_DATA_DOMAIN}
-      src={process.env.PLAUSIBLE_ANALYTICS_SCRIPT_SRC}
+      async
+      data-domain={process.env.ANALYTICS_DATA_DOMAIN}
+      data-website-id={process.env.ANALYTICS_DATA_WEBSITE_ID}
+      src={process.env.ANALYTICS_SCRIPT_SRC}
     />
   );
 }
@@ -52,7 +50,7 @@ const App = ({ Component, pageProps }: any) => (
       <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="shortcut icon" href="/favicon.svg" />
-      <PlausibleAnalyticsScript />
+      <AnalyticsScript />
 
       <ColorSchemeScript defaultColorScheme="auto" />
     </Head>