Bonus: Add Analytics

now.json

@@ -4,5 +4,9 @@
   "builds": [{"src": "package.json", "use": "now-sapper"}],
   "regions": ["arn", "bru", "cdg", "lhr"],
   "public": true,
-  "build": {}
+  "build": {
+    "env": {
+      "TRACKING_ID": "@tracking-id"
+    }
+  }
 }

rollup.config.js

@@ -11,6 +11,7 @@ import pkg from './package.json';
 const mode = process.env.NODE_ENV;
 const dev = mode === 'development';
 const legacy = !!process.env.SAPPER_LEGACY_BUILD;
+const trackingId = process.env.TRACKING_ID || '';
 
 const onwarn = (warning, onwarn) =>
   (warning.code === 'CIRCULAR_DEPENDENCY' &&
@@ -27,6 +28,7 @@ export default {
       replace({
         'process.browser': true,
         'process.env.NODE_ENV': JSON.stringify(mode),
+        'process.env.TRACKING_ID': JSON.stringify(trackingId),
       }),
       json(),
       svelte({

src/analytics.js

@@ -0,0 +1,13 @@
+export function setupAnalytics(gaID) {
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', gaID);
+
+  const script = document.createElement('script');
+  script.src = `https://www.googletagmanager.com/gtag/js?id=${gaID}`;
+  document.body.appendChild(script);
+}

src/client.js

@@ -1,5 +1,10 @@
 import * as sapper from '@sapper/app';
+import {setupAnalytics} from './analytics';
 
 sapper.start({
   target: document.querySelector('#sapper'),
 });
+
+if (process.env.TRACKING_ID) {
+  setupAnalytics(process.env.TRACKING_ID);
+}