Google Analytics for Nuxt.js 678bytes

ga.js

export default ({ app }) =>  {
  if (process.env.NODE_ENV !== 'production') return

  const KEY = 'ga:user'
  const UID = (localStorage[KEY] = localStorage[KEY] || Math.random() + '.' + Math.random())

  function encode(obj) {
    let k
    let str = 'https://www.google-analytics.com/collect?v=1'
    for (k in obj) {
      if (obj[k]) {
        str += `&${k}=${encodeURIComponent(obj[k])}`
      }
    }
    return str
  }

  class GA {
    constructor(ua, opts = {}) {
      this.args = Object.assign({ tid: ua, cid: UID }, opts)
      this.send('pageview')
    }

    send(type, opts) {
      if (type === 'pageview' && !opts) {
        opts = { dl: location.href, dt: document.title }
      }
      let obj = Object.assign({ t: type }, this.args, opts, { z: Date.now() })
      new Image().src = encode(obj)
    }
  }

  app.router.onReady(() => {
    const ga = new GA(process.env.TRACKER_ID)
    app.router.afterEach(to => ga.send('pageview', { dp: to.fullPath }))
  })
}

nuxt.config.js

export default {
  plugins: ['~/plugins/ga.client.js']
}

Conditionally Load Google Analytics

Export GA as class

Plugin

// /plugins/ga.client.js
function encode(obj) {
  let k
  let str = 'https://www.google-analytics.com/collect?v=1'
  for (k in obj) {
    if (obj[k]) {
      str += `&${k}=${encodeURIComponent(obj[k])}`
    }
  }
  return str
}

export class GA {
  constructor(ua, opts = {}) {
    const KEY = 'ga:user'
    const UID = (localStorage[KEY] = localStorage[KEY] || Math.random() + '.' + Math.random())
    this.args = Object.assign({ tid: ua, cid: UID }, opts)
    this.send('pageview')
  }

  send(type, opts) {
    if (type === 'pageview' && !opts) {
      opts = {
        dl: location.href,
        dt: document.title,
        aip: 0
      }
    }
    let obj = Object.assign({ t: type }, this.args, opts, { z: Date.now() })
    new Image().src = encode(obj)
  }
}

export default async function ({ store, app: { router } }) {
  if (process.env.NODE_ENV !== 'production') return
  if (store.state.accepted !== true) return

  router.onReady(() => {
    const ga = new GA(process.env.UA)
    router.afterEach(to => ga.send('pageview', { dp: to.fullPath }))
  })
}

Component

<template>
  <button @click="accepted">OK</button>
</template>

<script>
import { GA } from '@/plugins/ga.client'

export default {
  methods: {
    accepted () {
      this.$store.commit('setAccepted', true)
      document.cookie = 'accepted=true'
      new GA(process.env.UA)
    }
  }
}
</script>

Store

// /store/index.js
const cookieparser = process.server
  ? require('cookieparser')
  : undefined

const state = () => ({
  accepted: null
})

const mutations = {
  setAccepted: (state, payload) => state.accepted = payload
}

const actions = {
  nuxtServerInit({ commit }, { req }) {
    let accepted = null
    if (req.headers.cookie) {
      const parsed = cookieparser.parse(req.headers.cookie)
      try {
        accepted = JSON.parse(parsed.accepted)
      } catch {
        // No valid cookie found
      }
    }
    commit('setAccepted', accepted)
  }
}

export default {
  state,
  mutations,
  actions
}

Config

// /nuxt.config.js
export default {
  plugins: [ '~/plugins/ga.client.js' ]
}