fix ga integration

Author: samuelcolvin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tutorcruncher-socket",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "TutorCruncher socket",
   "author": "Samuel Colvin <[email protected]>",
   "private": false,

src/components/enquiry.vue

@@ -85,7 +85,7 @@ export default {
     },
     /* istanbul ignore next */
     prepare_grecaptcha: function () {
-      const grecaptcha_callback = (response) => this.$set(this.$root.enquiry_data, 'grecaptcha_response', response)
+      const grecaptcha_callback = response => this.$set(this.$root.enquiry_data, 'grecaptcha_response', response)
 
       if (this.$root.grecaptcha_key === null) {
         grecaptcha_callback('-')
@@ -99,8 +99,8 @@ export default {
         })
       }
       if (window.grecaptcha === undefined) {
-        window._grecaptcha_loaded = render_grecaptcha
-        add_script('https://www.google.com/recaptcha/api.js?onload=_grecaptcha_loaded&render=explicit')
+        window._tcs_grecaptcha_loaded = render_grecaptcha
+        add_script('https://www.google.com/recaptcha/api.js?onload=_tcs_grecaptcha_loaded&render=explicit')
       } else {
         render_grecaptcha()
       }

src/main.js

@@ -15,7 +15,7 @@ const raven_config = {
   tags: {
     host: window.location.host,
   },
-  shouldSendCallback: (data) => {
+  shouldSendCallback: data => {
     // if no culprit this a message and came from socket
     const culprit = data.culprit || '/socket.js'
     return culprit.indexOf('/socket.js') > 0
@@ -120,7 +120,8 @@ module.exports = function (public_key, config) {
   }
 
   if (!config.router_mode) {
-    config.router_mode = 'hash'
+    // use history mode with enquiry so it doesn't add the hash
+    config.router_mode = config.mode === 'enquiry' ? 'history' : 'hash'
   } else if (ROUTER_MODES.indexOf(config.router_mode) === -1) {
     error = `invalid router mode "${config.router_mode}", options are: ${ROUTER_MODES.join(', ')}`
     config.router_mode = 'hash'

src/utils.js

@@ -6,15 +6,15 @@ marked.setOptions({
   smartLists: true,
 })
 
-const to_markdown = (t) => {
+const to_markdown = t => {
   if (t === null || t === undefined) {
     return ''
   } else {
     return marked(t)
   }
 }
 
-const clean = (obj) => {
+const clean = obj => {
   let new_obj = {}
   for (let [k, v] of Object.entries(obj)) {
     if (typeof v === 'object') {
@@ -26,15 +26,15 @@ const clean = (obj) => {
   return new_obj
 }
 
-const auto_url_root = (path) => {
+const auto_url_root = path => {
   // remove :
   // * contractor slug
   // * /enquiry
   path = path.replace(/\/\d+-[\w-]+$/, '/').replace(/\/enquiry$/, '/')
   return path
 }
 
-const add_script = (url) => {
+const add_script = url => {
   const s = document.createElement('script')
   s.async = true
   s.src = url
@@ -44,11 +44,11 @@ const add_script = (url) => {
 /* istanbul ignore next */
 const init_ga = (router, config) => {
   const ga_prefixes = []
-  if (process.env.GA_ID === null || window._tcs_ga !== undefined) {
+  if (process.env.GA_ID === null) {
     return ga_prefixes
   }
-  window._tcs_ga = true
-  ga_prefixes.push('tcs.')
+  const tcs_ga_name = `${config.mode}-tcs`
+  ga_prefixes.push(tcs_ga_name + '.')
   if (window.ga === undefined) {
     // taken from https://developers.google.com/analytics/devguides/collection/analyticsjs/
     add_script('https://www.google-analytics.com/analytics.js')
@@ -59,18 +59,24 @@ const init_ga = (router, config) => {
   } else {
     ga_prefixes.push('')
   }
-  window.ga('create', 'UA-41117087-3', 'auto', 'tcs')
-  window.ga('tcs.set', 'dimension1', config.mode)
-  window.ga('tcs.set', 'dimension2', config.router_mode)
-  let initial_load = true
+  window.ga('create', 'UA-41117087-3', 'auto', tcs_ga_name)
+  window.ga(tcs_ga_name + '.set', 'dimension1', config.mode)
+  window.ga(tcs_ga_name + '.set', 'dimension2', config.router_mode)
+
+  if (!window._tcs_ga) {
+    // we only submit router changes for one socket instance to avoid duplicate page loads
+    let initial_load = true
+    router.afterEach(to => {
+      const _prefixes = initial_load ? ['tcs.'] : ga_prefixes
+      initial_load = false
+      for (let prefix of _prefixes) {
+        window.ga(prefix + 'set', 'page', to.fullPath)
+        window.ga(prefix + 'send', 'pageview')
+      }
+    })
+  }
+  window._tcs_ga = true
 
-  router.afterEach(to => {
-    const _prefixes = initial_load ? ['tcs.'] : ga_prefixes
-    for (let prefix of _prefixes) {
-      window.ga(prefix + 'set', 'page', to.fullPath)
-      window.ga(prefix + 'send', 'pageview')
-    }
-  })
   return ga_prefixes
 }
 

test/unit/specs/main.js

@@ -49,7 +49,7 @@ describe('main.js', done => {
     let el = document.createElement('div')
     el.setAttribute('id', 'socket')
     document.body.appendChild(el)
-    const vm = socket('public_key', {mode: 'enquiry', url_root: '/'})
+    const vm = socket('public_key', {mode: 'enquiry', url_root: '/', router_mode: 'hash'})
     vm.enquiry_form_info = 'foobar'
     vm.contractors = [{}]
     expect(vm.$el.querySelectorAll('.tcs-grid')).to.have.lengthOf(0)