Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

@wyze/gatsby-plugin-google-analytics

Build Status npm Codecov.io

A Gatsby plugin to add Google Analytics.

Installation

Yarn

$ yarn add --dev @wyze/gatsby-plugin-google-analytics

npm

$ npm install --save-dev @wyze/gatsby-plugin-google-analytics

Usage

// gatsby-config.js

module.exports = {
  // ...
  plugins: [
    {
      resolve: '@wyze/gatsby-plugin-google-analytics',
      options: {
        gaPlugins: {
          config: [
            {
              name: 'eventTracker',
              options: {
                events: [ 'click', 'contextmenu' ],
                hitFilter: [
                  '@@/ga-function',
                  [ 'model', 'element', 'event', `model.set('eventAction', event.type, true)` ],
                ],
              },
            },
            'outboundLinkTracker',
          ],
          sources: 'js/autotrack.custom.js',
        }
        trackingId: 'UA-123456-1',
      },
    },
  ]
}

Options

Option Type Default Description
anonymize boolean true Anonymize information sent to GA.
gaPlugins object Specify Google Analytic plugins.
gaPlugins.config (object | string)[] Configuration for additional scripts that were included.
gaPlugins.config[].name string Plugin name to require.
gaPlugins.config[].options object Options to pass to plugin.
gaPlugins.sources string[] Additional scripts to include.
respectDNT boolean true Respect user’s Do Not Track setting.
trackingId string Tracking code from Google Analytics.

Note: Bold denotes required fields.

Function as a gaPlugin option

Some plugins for Google Analytics allow you to specify a function to override certain functionality. Unfortunalty Gatsby calls JSON.stringify on plugin options before passing them into the plugin. This plugin uses special syntax to work around that limitation and pass a function to the Google Analytics plugin.

See the example for eventTracker and we will replicate the plugin options below.

module.exports = {
  // ...
  gaPlugins: {
    config: [
      {
        name: 'eventTracker',
        options: {
          events: [ 'click', 'auxclick', 'contextmenu' ],
          // Key here is specifying an array with a special key
          hitFilter: [
            '@@/ga-function',
            [ 'model', 'element', 'event', `model.set('eventAction', event.type, true)` ],
          ],
        },
      },
    ],
  },
}

In order to transform a key to a function, we specify it as an array. The first item must be @@/ga-function, with the second item being arguments to the Function constructor. All of the items in the array minus the last item, will be the arguments of the function. The last item in the array will be the function body.

Change Log

Full Change Log

v1.0.0 (2018-05-21)

License

MIT © Neil Kistner

© 2023 Gatsby, Inc.