@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)

License

MIT © Neil Kistner