From 054eff5bedf8c2c78c33f26f895dc8f72d23c42d Mon Sep 17 00:00:00 2001
From: Thomas Jaskiewicz <dev@thomasjaskiewicz.com>
Date: Sat, 16 Oct 2021 21:41:08 +0200
Subject: [PATCH] Add Umami Analytics integration (#44)

* Add Umami Analytics integration

* Leave empty line
---
 .env.example       |  4 +++-
 README.md          | 14 ++++++++++++++
 docker-compose.yml |  2 ++
 src/config.js      |  8 ++++++++
 src/server.js      |  8 ++++++++
 5 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index 224c0e9..d2f58fa 100644
--- a/.env.example
+++ b/.env.example
@@ -22,4 +22,6 @@ RAZZLE_DISCORD=https://discord.gg/DJKexrJ
 RAZZLE_TIKTOK=https://www.tiktok.com/@technotim
 RAZZLE_KIT=https://kit.co/TechnoTim
 RAZZLE_FOOTER=Thanks for stopping by!
-RAZZLE_GA_TRACKING_ID=G-XXXXXXXXXX
\ No newline at end of file
+RAZZLE_GA_TRACKING_ID=G-XXXXXXXXXX
+RAZZLE_UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
+RAZZLE_UMAMI_APP_URL=https://your-umami-app.com
diff --git a/README.md b/README.md
index adf428b..39a81b2 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,18 @@ Sample event for YouTube button.
   });
 ```
 
+## Umami Analytics Support
+
+See [Adding a website & Collecting data](https://umami.is/docs/collect-data) page to add and generate your tracking code.
+
+Generated tracking code should look like:
+
+```javascript
+<script async defer data-website-id="00000000-1111-2222-3333-444444444444" src="https://your-umami-app.com/umami.js"></script>
+```
+
+Use `data-website-id` as environment variable `UMAMI_WEBSITE_ID` and `src` as `UMAMI_APP_URL`.
+
 ## Docker
 
 This container image is published on both [GitHub Container Registry](https://github.com/techno-tim/littlelink-server/pkgs/container/littlelink-server) and [DockerHub](https://hub.docker.com/repository/docker/timothystewart6/littlelink-server) choose whichever one works for you.  They will both be updated during CI.
@@ -97,6 +109,8 @@ services:
       - GITLAB=https://www.gitlab.com/
       - PATREON=https://www.patreon.com/technotim
       - DEVTO=https://dev.to/
+      - UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
+      - UMAMI_APP_URL=https://your-umami-app.com
     ports:
       - 8080:3000
     restart: unless-stopped
diff --git a/docker-compose.yml b/docker-compose.yml
index 4e3d83b..8ae63fd 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -63,6 +63,8 @@ services:
       - GITLAB=https://www.gitlab.com/
       - PATREON=https://www.patreon.com/technotim
       - DEVTO=https://dev.to/
+      - UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
+      - UMAMI_APP_URL=https://your-umami-app.com
 
     ports:
       - 8080:3000
diff --git a/src/config.js b/src/config.js
index 7a152f6..0954971 100644
--- a/src/config.js
+++ b/src/config.js
@@ -57,6 +57,8 @@ export const runtimeConfig =
         GITLAB: window?.env?.GITLAB,
         PATREON: window?.env?.PATREON,
         DEVTO: window?.env?.DEVTO,
+        UMAMI_WEBSITE_ID: window?.env?.UMAMI_WEBSITE_ID,
+        UMAMI_APP_URL: window?.env?.UMAMI_APP,
       }
     : {
         // server
@@ -197,4 +199,10 @@ export const runtimeConfig =
           ? process.env.PATREON
           : process.env.RAZZLE_PATREON,
         DEVTO: nodeIsProduction ? process.env.DEVTO : process.env.RAZZLE_DEVTO,
+        UMAMI_WEBSITE_ID: nodeIsProduction
+          ? process.env.UMAMI_WEBSITE_ID
+          : process.env.RAZZLE_UMAMI_WEBSITE_ID,
+        UMAMI_APP_URL: nodeIsProduction
+          ? process.env.UMAMI_APP_URL
+          : process.env.RAZZLE_UMAMI_APP_URL,
       };
diff --git a/src/server.js b/src/server.js
index a3b509e..66bfab6 100644
--- a/src/server.js
+++ b/src/server.js
@@ -85,6 +85,14 @@ server
       </script>`
             : ''
         }
+        ${
+          runtimeConfig.UMAMI_WEBSITE_ID && runtimeConfig.UMAMI_APP_URL
+            ? `
+            <!-- Umami Analytics -->
+            <script async defer data-website-id="${runtimeConfig.UMAMI_WEBSITE_ID}" src="${runtimeConfig.UMAMI_APP_URL}/umami.js">
+            </script>`
+            : ''
+        }
 
     </head>
     <body>