feat(analytics): add analytics on deploy script (#32)

app.js

@@ -13,14 +13,12 @@ require('dotenv').config({ path: 'variables.env' })
 const helpers = require('./helpers')
 const { translate, initializeTranslations } = require('./i18n/i18n')
 const breadcrumb = require('./lib/breadcrumb')
+const settings = require('./lib/settings')
 const routes = require('./routes/index')
-const { initClients, getSpace } = require('./services/contentful')
-const { updateCookie } = require('./lib/cookies')
+const { getSpace } = require('./services/contentful')
 
 const app = express()
 
-const SETTINGS_NAME = 'theExampleAppSettings'
-
 // View engine setup
 app.set('views', path.join(__dirname, 'views'))
 app.set('view engine', 'pug')
@@ -40,42 +38,9 @@ app.use(function (req, res, next) {
   }
   next()
 })
-// Set our application state based on environment variables or query parameters
-app.use(async function (request, response, next) {
-  // Set default settings based on environment variables
-  let settings = {
-    spaceId: process.env.CONTENTFUL_SPACE_ID,
-    deliveryToken: process.env.CONTENTFUL_DELIVERY_TOKEN,
-    previewToken: process.env.CONTENTFUL_PREVIEW_TOKEN,
-    editorialFeatures: false,
-    // Overwrite default settings using those stored in cookie, if present
-    ...request.cookies.theExampleAppSettings
-  }
 
-  // Allow setting of API credentials via query parameters
-  const { space_id, preview_token, delivery_token } = request.query
-  if (space_id && preview_token && delivery_token) { // eslint-disable-line camelcase
-    settings = {
-      ...settings,
-      spaceId: space_id,
-      deliveryToken: delivery_token,
-      previewToken: preview_token
-    }
-    updateCookie(response, SETTINGS_NAME, settings)
-  }
-
-  // Allow enabling of editorial features via query parameters
-  const { enable_editorial_features } = request.query
-  if (enable_editorial_features !== undefined) { // eslint-disable-line camelcase
-    delete request.query.enable_editorial_features
-    settings.editorialFeatures = true
-    updateCookie(response, SETTINGS_NAME, settings)
-  }
-
-  initClients(settings)
-  response.locals.settings = settings
-  next()
-})
+// Set our application settings based on environment variables or query parameters
+app.use(settings)
 
 // Make data available for our views to consume
 app.use(async function (request, response, next) {

bin/vendor/analytics.html

@@ -0,0 +1,44 @@
+<!-- Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109296848-1"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-40725207-13');
+</script>
+<!-- Google Analytics end -->
+<!-- Snowplow starts plowing -->
+<script async>
+  ;(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","//d1fc8wv8zag5ca.cloudfront.net/2.8.2/sp.js","snowplow"));
+
+  snowplow('newTracker', 'defaultTracker', 'col.contentful.com', {
+    appId: 'the_example_app',
+    platform: 'web',
+    respectDoNotTrack: true,
+    bufferSize: 1,
+    cookieDomain: window.location.host,
+    contexts: {
+      webPage: true,
+      gaCookies: true,
+      geolocation: false
+    }
+  });
+
+  snowplow('trackPageView');
+
+  const space_id = decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent('space_id').replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
+
+  snowplow('trackSelfDescribingEvent', {
+    schema: 'iglu:com.contentful/app_the_example_app_open/jsonschema/1-0-0',
+    data: {
+      space_id,
+      sdk_language_used: 'javascript',
+      app_framework: 'nodejs'
+    }
+  });
+</script>
+<!-- Snowplow stops plowing -->

bin/vendor/deploy.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+set -e
+
+analytics_file="../bin/vendor/analytics.html"
+layout_file="$(dirname $0)/../../views/layout.pug"
+
+# Replace analytics script in layout
+distro=`uname`
+if [[ $distro != 'Linux' ]]; then
+  sed -i '' 's,'"<!--ANALYTICS-->,include $analytics_file"',g' "$layout_file"
+else  # If running on macOS, the sed command has different syntax
+  sed -i 's,'"<!--ANALYTICS-->,include $analytics_file"',g' "$layout_file"
+fi

lib/settings.js

@@ -0,0 +1,48 @@
+/**
+ * The purpose of this middleware is to set our application settings based
+ * on environment variables or query parameters
+ */
+
+const { initClients } = require('../services/contentful')
+const { updateCookie } = require('./cookies')
+
+const SETTINGS_NAME = 'theExampleAppSettings'
+
+module.exports = async function settingsMiddleware (request, response, next) {
+  // Set default settings based on environment variables
+  let settings = {
+    spaceId: process.env.CONTENTFUL_SPACE_ID,
+    deliveryToken: process.env.CONTENTFUL_DELIVERY_TOKEN,
+    previewToken: process.env.CONTENTFUL_PREVIEW_TOKEN,
+    editorialFeatures: false,
+    // Overwrite default settings using those stored in cookie, if present
+    ...request.cookies.theExampleAppSettings
+  }
+
+  // Allow setting of API credentials via query parameters
+  const { space_id, preview_token, delivery_token } = request.query
+  if (space_id && preview_token && delivery_token) { // eslint-disable-line camelcase
+    settings = {
+      ...settings,
+      spaceId: space_id,
+      deliveryToken: delivery_token,
+      previewToken: preview_token
+    }
+    updateCookie(response, SETTINGS_NAME, settings)
+  }
+
+  // Allow enabling of editorial features via query parameters
+  const { enable_editorial_features } = request.query
+  if (enable_editorial_features !== undefined) { // eslint-disable-line camelcase
+    delete request.query.enable_editorial_features
+    settings.editorialFeatures = true
+    updateCookie(response, SETTINGS_NAME, settings)
+  }
+
+  // The space id needs to be available in the frontend for our example app
+  response.cookie('space_id', settings.spaceId)
+
+  initClients(settings)
+  response.locals.settings = settings
+  next()
+}

package.json

@@ -15,7 +15,8 @@
     "test:integration": "jest test/integration",
     "test:integration:watch": "jest test/integration --watch",
     "test:unit": "jest test/unit",
-    "test:unit:watch": "jest test/unit --watch"
+    "test:unit:watch": "jest test/unit --watch",
+    "heroku-postbuild": "./bin/vendor/deploy.sh"
   },
   "engines": {
     "node": ">=8.4.0"

views/layout.pug

@@ -139,3 +139,5 @@ html
               use(xlink:href='/icons/icons.svg#cross')
 
     script(src='/scripts/index.js')
+
+    <!--ANALYTICS-->