Merge pull request #628 from thecodingmachine/template-analytics

Template google analytics data (2)

.github/workflows/continuous_integration.yml

@@ -39,6 +39,10 @@ jobs:
         run: yarn run proto && yarn run copy-to-front
         working-directory: "messages"
 
+      - name: "Create index.html"
+        run: ./templater.sh
+        working-directory: "front"
+
       - name: "Build"
         run: yarn run build
         env:

deeployer.libsonnet

@@ -78,7 +78,8 @@
         "TURN_SERVER": "turn:coturn.workadventu.re:443,turns:coturn.workadventu.re:443",
         "TURN_USER": "workadventure",
         "TURN_PASSWORD": "WorkAdventure123",
-        "JITSI_PRIVATE_MODE": if env.SECRET_JITSI_KEY != '' then "true" else "false"
+        "JITSI_PRIVATE_MODE": if env.SECRET_JITSI_KEY != '' then "true" else "false",
+        //"GA_TRACKING_ID": "UA-10196481-11"
       }
     },
     "uploader": {

front/.gitignore

@@ -5,4 +5,5 @@
 /dist/webpack.config.js
 /dist/webpack.config.js.map
 /dist/src
-*.sh
+*.sh
+!templater.sh

front/Dockerfile

@@ -11,5 +11,6 @@ COPY --from=builder --chown=docker:docker /var/www/messages/generated /var/www/h
 RUN yarn install
 
 ENV NODE_ENV=production
+ENV STARTUP_COMMAND_0="./templater.sh"
 ENV STARTUP_COMMAND_1="yarn run build"
 ENV APACHE_DOCUMENT_ROOT=dist/

front/dist/ga.html.tmpl

@@ -0,0 +1,9 @@
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=<!-- TRACKING NUMBER -->"></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', '<!-- TRACKING NUMBER -->');
+</script>

front/dist/index.html.tmpl

@@ -6,15 +6,8 @@
               content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-        <!-- Global site tag (gtag.js) - Google Analytics -->
+        <!-- TRACK CODE -->
-        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
+        <!-- END TRACK CODE -->
-        <script>
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-
-            gtag('config', 'UA-10196481-11');
-        </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="static/images/favicons/apple-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="static/images/favicons/apple-icon-60x60.png">

front/templater.sh

@@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+set -x
+set -o nounset errexit
+template_file_index=dist/index.html.tmpl
+generated_file_index=dist/index.html
+tmp_trackcodefile=/tmp/trackcode
+
+# To inject tracking code, you have two choices:
+# 1) Template using the provided google analytics
+# 2) Insert with your own provided code, by overriding the ANALYTICS_CODE_PATH
+# The ANALYTICS_CODE_PATH is the location of a file inside the container
+ANALYTICS_CODE_PATH="${ANALYTICS_CODE_PATH:-dist/ga.html.tmpl}"
+
+if [[ "${INSERT_ANALYTICS:-NO}" == "NO" ]]; then
+    echo "" > "${tmp_trackcodefile}"
+fi
+
+# Automatically insert analytics if GA_TRACKING_ID is set
+if [[ "${GA_TRACKING_ID:-}" != ""  || "${INSERT_ANALYTICS:-NO}" != "NO" ]]; then
+    echo "Templating code from ${ANALYTICS_CODE_PATH}"
+    sed "s#<!-- TRACKING NUMBER -->#${GA_TRACKING_ID:-}#g" "${ANALYTICS_CODE_PATH}" > "$tmp_trackcodefile"
+fi
+
+echo "Templating ${generated_file_index} from ${template_file_index}"
+sed "/<!-- TRACK CODE -->/r ${tmp_trackcodefile}" "${template_file_index}" > "${generated_file_index}"
+rm "${tmp_trackcodefile}"