add dev mode

* will load all scripts in development
* ignores your local browser's DNT header
* outputs some information in browser console about what it is doing

README.md

@@ -17,6 +17,7 @@ Plugin uses sensible defaults prioritizing user experience & privacy:
 - use image tracking fallback for `noscript`
 - don't load anything when visitor has Do Not Track enabled
 - don't load anything in non-production environments
+- dev mode for local development
 
 ## Usage
 
@@ -36,7 +37,7 @@ Plugin uses sensible defaults prioritizing user experience & privacy:
         options: {
           siteId: 'YOUR_SITE_ID',
           siteUrl: 'https://YOUR_LIVE_SITE_URL.COM',
-          matomoUrl: 'https://YOUR_MATOMO_URL.COM',
+          matomoUrl: 'https://YOUR_MATOMO_URL.COM'
         },
       },
     ]
@@ -44,7 +45,16 @@ Plugin uses sensible defaults prioritizing user experience & privacy:
 
 3. That's it!
 
-_NOTE: This plugin only generates output when run in production mode. To test your tracking code, run: `gatsby build && gatsby serve`_.
+_NOTE: By default, this plugin only generates output when run in production mode. To test your tracking code, run `gatsby build && gatsby serve` or set `dev` option to `true`_.
+
+## Options
+
+Option      | Explanation
+------------|---------
+`siteId`    | Your Matomo site ID configured in your Matomo installation.
+`siteUrl`   | The url of your site, usually the same as `siteMetadata.siteUrl`. Only used for generating the url for `noscript` image tracking fallback.
+`matomoUrl` | The url of your Matomo installation.
+`dev`       | Activate dev mode by setting it to `true`. Will load all scripts despite not running in `production` environment. Ignores your local browser's DNT header too. Outputs some information in console about what it is doing. Useful for local testing but careful: all hits will be send like in production.
 
 ## Development
 

src/gatsby-browser.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+
 let first = true
 
 function getDuration() {
@@ -15,6 +17,9 @@ function getDuration() {
 exports.onRouteUpdate = ({ location }) => {
   if (process.env.NODE_ENV !== 'production' && typeof _paq !== 'undefined') {
     window._paq = window._paq || []
+    window.dev = window.dev || null
+
+    const pathname = location.pathname
 
     if (first) {
       first = false
@@ -25,10 +30,18 @@ exports.onRouteUpdate = ({ location }) => {
         'duration',
         getDuration()
       ])
+
+      if (window.dev) {
+        console.log(`[Matomo] Page view for: ${pathname}`)
+      }
     } else {
-      window._paq.push(['setCustomUrl', location.pathname])
-      window._paq.push(['setDocumentTitle', location.pathname])
+      window._paq.push(['setCustomUrl', pathname])
+      window._paq.push(['setDocumentTitle', pathname])
       window._paq.push(['trackPageView'])
+
+      if (window.dev) {
+        console.log(`[Matomo] Page view for: ${pathname}`)
+      }
     }
   }
   return null

src/gatsby-ssr.js

@@ -1,19 +1,26 @@
 import React from 'react'
 
-function buildTrackingCode(siteId, matomoUrl) {
+function buildTrackingCode(pluginOptions) {
   const html = `
-    if (!(navigator.doNotTrack == '1' || window.doNotTrack == '1')) {
+    window.dev = ${pluginOptions.dev}
+
+    if (window.dev === true || !(navigator.doNotTrack == '1' || window.doNotTrack == '1')) {
       window._paq = window._paq || [];
-      window._paq.push(['setTrackerUrl', '${matomoUrl}/piwik.php']);
-      window._paq.push(['setSiteId', '${siteId}']);
+      window._paq.push(['setTrackerUrl', '${pluginOptions.matomoUrl}/piwik.php']);
+      window._paq.push(['setSiteId', '${pluginOptions.siteId}']);
       window._paq.push(['enableLinkTracking']);
       window._paq.push(['trackPageView']);
       window._paq.push(['enableHeartBeatTimer']);
       window.start = new Date();
 
+      if (window.dev === true) {
+        console.log('[Matomo] Tracking initialized')
+        console.log('[Matomo] matomoUrl: ${pluginOptions.matomoUrl}, siteId: ${pluginOptions.siteId}')
+      }
+
       var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-      g.type='text/javascript'; g.defer=true; g.async=true;
-      g.src='${matomoUrl}/piwik.js';
+      g.defer=true; g.async=true;
+      g.src='${pluginOptions.matomoUrl}/piwik.js';
       s.parentNode.insertBefore(g,s);
     }
   `
@@ -27,8 +34,8 @@ function buildTrackingCode(siteId, matomoUrl) {
   )
 }
 
-function buildTrackingCodeNoJs(siteId, matomoUrl, siteUrl, pathname) {
-  const html = `<img src="${matomoUrl}/piwik.php?idsite=${siteId}&rec=1&url=${siteUrl + pathname}" style="border:0" alt="tracker" />`
+function buildTrackingCodeNoJs(pluginOptions, pathname) {
+  const html = `<img src="${pluginOptions.matomoUrl}/piwik.php?idsite=${pluginOptions.siteId}&rec=1&url=${pluginOptions.siteUrl + pathname}" style="border:0" alt="tracker" />`
 
   return (
     <noscript
@@ -39,14 +46,10 @@ function buildTrackingCodeNoJs(siteId, matomoUrl, siteUrl, pathname) {
 }
 
 exports.onRenderBody = ({ setPostBodyComponents, pathname }, pluginOptions) => {
-  if (process.env.NODE_ENV === 'production') {
-    const siteId = pluginOptions.siteId
-    const siteUrl = pluginOptions.siteUrl
-    const matomoUrl = pluginOptions.matomoUrl
-
+  if (process.env.NODE_ENV === 'production' || pluginOptions.dev === true) {
     return setPostBodyComponents([
-      buildTrackingCode(siteId, matomoUrl),
-      buildTrackingCodeNoJs(siteId, matomoUrl, siteUrl, pathname)
+      buildTrackingCode(pluginOptions),
+      buildTrackingCodeNoJs(pluginOptions, pathname)
     ])
   }
   return null