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']
}

API

GA(trackerID, options)

trackerID

Type: String

Your Google Analytics tracker ID; eg UA-XXXXXXXX-X

options.aip

Type: Integer

Default: 0

Anonymize the sender's IP address. See Anonymize IP.

options.an

Type: String

Specifies the application's name. See Application Name.

options.aid

Type: String

Specifies the application identifier. See Application ID.

options.aiid

Type: String

Specifies the application installer identifier. See Application Installer ID.

options.av

Type: String

Specifies the application verison. See Application Version.

options.ds

Type: String

Indicates the data source type of the hit; eg web or app. See Data Source.

ga.send(type, params)

type

Type: String

The type of hit to send. Must be one of these: pageview, screenview, event, transaction, item, social, exception, or timing.

params

Type: Object

The parameters to send based on the type of hit.

Please follow the links for each available parameter set:

• Event
• Exception
• Item
• Pageview
• Screenview
• Social
• Timing
• Transaction

For pageview hits only, if no params are provided, then the document.title and location.href values will be auto-filled. This allows you to send valid requests by writing:

ga.send('pageview')
// is the same as:
//=> ga.send('pageview', { dt:document.title, dl:location.href })

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' ]
}