add Matomo tracking

gatsby-browser.js

@@ -1,7 +1,35 @@
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/browser-apis/
- */
 
- // You can delete this file if you're not using it
+// Matomo page tracking
+// https://github.com/scottnonnenberg/blog/blob/master/gatsby-browser.js
+let first = true
+
+function getDuration() {
+  const start = window.start || new Date()
+  const now = new Date()
+  const difference = now.getTime() - start.getTime()
+
+  if (difference === 0) {
+    return null
+  }
+
+  return difference
+}
+
+exports.onRouteUpdate = state => {
+  window._paq = window._paq || []
+
+  if (first) {
+    first = false
+    window._paq.push([
+      'trackEvent',
+      'javascript',
+      'load',
+      'duration',
+      getDuration(),
+    ])
+  } else {
+    window._paq.push(['setCustomUrl', state.pathname])
+    window._paq.push(['setDocumentTitle', state.pathname])
+    window._paq.push(['trackPageView'])
+  }
+}

gatsby-config.js

@@ -1,6 +1,7 @@
 const path = require('path')
+const fs = require('fs')
 const yaml = require('js-yaml')
-const meta = yaml.safeLoad('./data/meta.yml')
+const meta = yaml.load(fs.readFileSync('./data/meta.yml', 'utf8'))
 const { url, googleanalytics } = meta
 
 module.exports = {

gatsby-ssr.js

@@ -1,7 +1,49 @@
-/**
+import React, { Fragment } from 'react'
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+const fs = require('fs')
- *
+const yaml = require('js-yaml')
- * See: https://www.gatsbyjs.org/docs/ssr-apis/
+const meta = yaml.load(fs.readFileSync('./data/meta.yml', 'utf8'))
- */
+const { url, matomoDomain, matomoSite } = meta
 
- // You can delete this file if you're not using it
+// add Matomo tracking code
+// adapted from:
+// https://github.com/scottnonnenberg/blog/blob/master/html.js#L58
+exports.onRenderBody = ({ setPostBodyComponents, pathname }) => {
+  if (process.env.NODE_ENV === 'production') {
+    if (!(navigator.doNotTrack == '1' || window.doNotTrack == '1')) {
+      const js = `
+        window._paq = window._paq || [];
+        window._paq.push(['setTrackerUrl', '${matomoDomain}/piwik.php']);
+        window._paq.push(['setSiteId', '${matomoSite}']);
+        window._paq.push(['enableLinkTracking']);
+        window._paq.push(['trackPageView']);
+        window._paq.push(['enableHeartBeatTimer']);
+        window.start = new Date();
+
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.type='text/javascript'; g.defer=true; g.async=true;
+        g.src='${matomoDomain}/piwik.js';
+        s.parentNode.insertBefore(g,s);
+      `
+
+      const noJs = `<img
+          src="${matomoDomain}/piwik.php?idsite=${matomoSite}&rec=1&url=${url + pathname}"
+          style="border:0"
+          alt="tracker"
+        />`
+
+      return setPostBodyComponents([
+        <Fragment key={'gatsby-plugin-matomo'}>
+          <script
+            type="text/javascript"
+            dangerouslySetInnerHTML={{ __html: js }}
+          />
+          <noscript
+            key={'gatsby-plugin-matomo-noscript'}
+            dangerouslySetInnerHTML={{ __html: noJs }}
+          />
+        </Fragment>,
+      ])
+    }
+  }
+  return null
+}

src/components/organisms/Footer.jsx

@@ -13,7 +13,10 @@ class Footer extends Component {
 
   generateFileName() {
     // results in 'matthias-kretschmann.vcf'
-    return `${this.props.meta.title.toLowerCase().split(' ').join('-')}.vcf`
+    return `${this.props.meta.title
+      .toLowerCase()
+      .split(' ')
+      .join('-')}.vcf`
   }
 
   constructVcard() {
@@ -53,7 +56,10 @@ class Footer extends Component {
       <footer className="footer">
         <Social meta={meta} minimal />
         <p className="footer__actions">
-          <a href={`${meta.url}/${this.generateFileName()}`} onClick={this.handleAddressbookClick}>
+          <a
+            href={`${meta.url}/${this.generateFileName()}`}
+            onClick={this.handleAddressbookClick}
+          >
             Add to addressbook
           </a>
           <a href={meta.gpg}>PGP/GPG key</a>