Skip to content
Permalink
Browse files

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
  • Loading branch information...
kremalicious committed May 8, 2018
1 parent 0109e19 commit 5c05efe1815fb617e0153924696dc6350e2e753c
Showing with 45 additions and 19 deletions.
  1. +12 −2 README.md
  2. +15 −2 src/gatsby-browser.js
  3. +18 −15 src/gatsby-ssr.js
@@ -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,15 +37,24 @@ 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'
},
},
]
```

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

@@ -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
@@ -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

0 comments on commit 5c05efe

Please sign in to comment.
You can’t perform that action at this time.