feat(Pixel): add original referrer, utm params & app version

micro optimization: inits Image outside of onRouteUpdate
BREAKING CHANGE: simplifies query string construction using utils/query-string.js which removes string substitution of [[title]] etc.
BREAKING CHANGE: removes [[random]]

feat(Pixel): provide version and new url

gatsby-config.js

@@ -1,5 +1,5 @@
 const path = require(`path`)
-const { homepage } = require(`./package.json`)
+const { homepage, version } = require(`./package.json`)
 
 const isProduction = process.env.GAIAMA_CONTENT_ID
 
@@ -188,9 +188,10 @@ module.exports = {
     {
       resolve: `gatsby-plugin-pixel`,
       options: {
+        version,
         endpoint: isProduction
-          ? `https://gaiama-analytics.now.sh/[[nocache]]/p?uid=[[uid]]&title=[[title]]`
-          : `http://localhost:7789/[[nocache]]/p?uid=[[uid]]&title=[[title]]`,
+          ? `https://www.gaiama.org/api/p`
+          : `http://localhost:7789/p`,
       },
     },
     {

plugins/gatsby-plugin-pixel/gatsby-browser.js

@@ -1,27 +1,40 @@
-import cuid from 'cuid'
+const cuid = require(`cuid`)
+const Qs = require(`@/utils/query-string`)
 
 // store views so we won't count recurring pages
 const views = {}
+// init Image here to be reused on every route change
+const pixel = new Image()
+// uid used to group visitors instead of PII
 const uid = cuid()
 
-exports.onRouteUpdate = ({ location: { pathname, search } }, { endpoint }) => {
+/**
+ * utm_source – Identifies which site sent the traffic - utm_source=Google
+ * utm_campaign - Identifies a specific product promotion or strategic campaign - utm_campaign=spring_sale
+ * utm_content - Identifies what specifically was clicked to bring the user to the site - utm_content=logolink
+ */
+exports.onRouteUpdate = (
+  { location: { pathname, search } },
+  { endpoint, version }
+) => {
   const isRecurring = !!views[pathname]
-  const utmSourceResults = /utm_source=([^&]*)/.exec(search)
-  const utmSource = utmSourceResults ? utmSourceResults[1] : ``
+  const { utm_source, utm_campaign, utm_content } = Qs.parse(search)
 
   views[pathname] = isRecurring ? views[pathname] + 1 : 1
 
   if (!isRecurring) {
     setTimeout(() => {
-      const { title } = document
-      const nocache = `${Math.random()}`.replace(`0.`, ``)
-      const pixel = new Image()
-      pixel.src =
-        endpoint
-          .replace(`[[nocache]]`, encodeURIComponent(nocache))
-          .replace(`[[uid]]`, encodeURIComponent(uid))
-          .replace(`[[title]]`, encodeURIComponent(title)) +
-        (utmSource ? `&utm_source=${utmSource}` : ``)
-    }, 500)
+      // eslint-disable-next-line
+      const { title: dt, referrer } = document
+      const query = { uid, dt }
+
+      if (referrer) query.dr = referrer // document referrer
+      if (utm_source) query.cs = utm_source // campaign source
+      if (utm_campaign) query.cn = utm_campaign // campaign name
+      if (utm_content) query.cc = utm_content // campaign content
+      if (version) query.av = version // application version
+
+      pixel.src = Qs.stringify(query, endpoint)
+    }, 1000)
   }
 }