Google Analytics

Add Google Analytics to your nuxt.js application.

This plugins automatically sends first page and route change events to Google Analytics.

yarn add @rabota/google-analytics

or

npm install --save @rabota/google-analytics

Table of contents

• Features
• Setup
• Options
• Examples
• Methods
• Links
• License
• Author

Features

• Supports multiple IDs
• You can pass an async function to provide IDs
• Easy-to-use API
• Automatically handling all SPA caveats (spa: true option)
• gtag API
• Logging

Note: Google Analytics is disabled in development mode by default. You can set development option to true to run Google Analytics in development mode.

Setup

• Add @rabota/google-analytics dependency using yarn or npm to your project
• Add @rabota/google-analytics to modules section of nuxt.config.js

{
  modules: [
    ['@rabota/google-analytics', [
      counter: 'GA_TRACKING_ID', // main tracking ID
      includeCounters: [ 'GA_TRACKING_ID_2', ..., 'GA_TRACKING_ID_3' ], // additional tracking IDs
      options: {
       // google analytics options
      },
      spa: true, // sends new pages to GA in SPA
      logging: true, // logs all events to each counter
      development: true
    }]
  ]
}

Options

counter

{string|Function} Tracking ID

Could be an async function that returns an ID.

includeCounters

{string|Array<string>|Function} Additional tracking IDs

Could be an async function that returns one or array of IDs.

options

{Object} Google Analytics (todo)

spa

{boolean} Sends new pages & pageviews to GA in SPA (default: true).

logging

{boolean} Output all sending events for each counter (default: false).

development

{boolean} set true if you want to run GA in dev mode. By default GA is disabled in dev mode.

Methods

this.$ga - is a Layer Instance.

#pushAll

Same as gtag function of GA. Sends data to all trackers.

#pushTo

The same as gtag function of GA. Sends data to specific tracker.

More information about GA routing: https://developers.google.com/gtagjs/devguide/routing

More methods or properties you can find here: @rabota/analytics-layer/src/layer.js.

Examples

After setup you can access the GA through this.$ga instance in any component you need.

export default {
  mounted () {
    this.$ga.pushAll('event', 'add_to_cart', {
      'items': [
        'id': 'U1234',
        'ecomm_prodid': 'U1234',
        'name': 'Argyle Funky Winklepickers',
        'list': 'Search Results',
        'category': 'Footwear',
        'quantity': 1,
        'ecomm_totalvalue': 123.45,
        'price': 123.45
      ]
    });
  }
}

Send to a specific tracker

export default {
  mounted () {
    this.$ga.pushTo( 'GA_TRACKING_ID', 'event', 'event-name', params );
  }
}

Links

• Documentation for Google Analytics (gtag)

License

MIT

Author

Alexander Belov (c) 2019