switch to gatsby-plugin-matomo

data/meta.yml

@@ -25,7 +25,7 @@ addressbook: /vcard-matthias-kretschmann.vcf
 
 typekit: dtg3zui
 googleanalytics: UA-1441794-4
-matomoDomain: https://analytics.kremalicious.com
+matomoUrl: https://analytics.kremalicious.com
 matomoSite: 2
 
 avatarBase64: >

gatsby-browser.js

@@ -1,35 +0,0 @@
-
-// 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

@@ -2,7 +2,7 @@ const path = require('path')
 const fs = require('fs')
 const yaml = require('js-yaml')
 const meta = yaml.load(fs.readFileSync('./data/meta.yml', 'utf8'))
-const { url, googleanalytics } = meta
+const { url, googleanalytics, matomoUrl, matomoSite } = meta
 
 module.exports = {
   siteMetadata: {
@@ -44,6 +44,14 @@ module.exports = {
         respectDNT: true,
       },
     },
+    {
+      resolve: 'gatsby-plugin-matomo',
+      options: {
+        siteId: `${matomoSite}`,
+        siteUrl: `${url}`,
+        matomoUrl: `${matomoUrl}`,
+      },
+    },
     {
       resolve: 'gatsby-plugin-svgr',
       options: {

gatsby-ssr.js

@@ -1,49 +0,0 @@
-import React, { Fragment } from 'react'
-const fs = require('fs')
-const yaml = require('js-yaml')
-const meta = yaml.load(fs.readFileSync('./data/meta.yml', 'utf8'))
-const { url, matomoDomain, matomoSite } = meta
-
-// 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
-}

package.json

@@ -20,6 +20,7 @@
     "gatsby-link": "^1.6.44",
     "gatsby-plugin-favicon": "^2.1.1",
     "gatsby-plugin-google-analytics": "^1.0.31",
+    "gatsby-plugin-matomo": "0.0.1",
     "gatsby-plugin-offline": "^1.0.15",
     "gatsby-plugin-react-helmet": "^2.0.11",
     "gatsby-plugin-react-next": "^1.0.11",