Community Plugin

@wyze/gatsby-plugin-google-analytics

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)

[3365ff0851] - Initial commit (Neil Kistner)