add snowplow url at build time

.github/workflows/ci_cd_on_pr_dev_sandbox.yml

@@ -40,6 +40,8 @@ jobs:
             triggers: ('frontend/')
             build_file: ./frontend/Dockerfile
             build_context: ./frontend
+            build_args: | 
+              VITE_SNOWPLOW_URL=${{ secrets.VITE_SNOWPLOW_URL }}
           - package: database-migrations
             triggers: ('backend/db')
             build_file: ./backend/db/Dockerfile

frontend/Dockerfile

@@ -1,8 +1,9 @@
 # Build static files
 FROM node:lts-alpine AS build
-
+ARG VITE_SNOWPLOW_URL
 WORKDIR /app
 COPY . .
+ENV VITE_SNOWPLOW_URL=$VITE_SNOWPLOW_URL
 RUN npm ci --ignore-scripts && \
     npm run build
 

frontend/index.html

@@ -10,7 +10,6 @@
   <link rel="apple-touch-icon" href="bcid-apple-touch-icon.png">
   <link rel="preload" href="https://fonts.googleapis.com/css?family=Material+Icons" as="style">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
-  <script type="text/javascript" src="/env.js"></script>
   <title>FIN Pay Transparency</title>
 </head>
 

frontend/src/main.js

@@ -18,6 +18,9 @@ import 'viewerjs/dist/viewer.css';
 import component from 'v-viewer';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 
+import { initializeSnowplow } from './snowplow';
+initializeSnowplow(import.meta.env.VITE_SNOWPLOW_URL);
+
 const myCustomLightTheme = {
   dark: false,
   colors: {

frontend/src/snowplow.js

@@ -0,0 +1,22 @@
+// <!-- Snowplow starts plowing - Standalone vE.2.14.0 -->
+export const initializeSnowplow = (url) => {
+  ;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[];
+    p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments)
+    };p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[0];n.async=1;
+    n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,"script","https://www2.gov.bc.ca/StaticWebResources/static/sp/sp-2-14-0.js","snowplow"));
+  window.snowplow('newTracker','rt', url, {
+    appId: 'Snowplow_standalone',
+    cookieLifetime: 86400 * 548,
+    platform: 'web',
+    post: true,
+    forceSecureTracker: true,
+    contexts: {
+      webPage: true,
+      performanceTiming: true
+    }
+  });
+  window.snowplow('enableActivityTracking', 30, 30); // Ping every 30 seconds after 30 seconds
+  window.snowplow('enableLinkClickTracking');
+  window.snowplow('trackPageView');
+  // <!-- Snowplow stops plowing -->
+}