Google Analytics

Set Up

  1. Sign up for Google Analytics if you haven't already, and create a new web property. Make a note of your property's tracking Id.

  2. Add the JavaScript Tracking Snippet to your site.

    Tip: during development and testing it is often helpful to use the debug version of analytics.js. Follow the instructions here to enable it.

  3. Import the target, then provide it when creating middleware or a meta reducer:

    import { GoogleAnalytics } from 'redux-beacon/targets/google-analytics';

const middleware = createMiddleware(eventsMap, GoogleAnalytics);
const metaReducer = createMetaReducer(eventsMap, GoogleAnalytics);

    Warning: the last line of the tracking snippet ga('send', 'pageview') hits Google Analytics with a page view that matches the first loaded route. If you're tracking page views using Redux Beacon, be sure to remove this line so the initial page load isn't recorded twice.

Usage

Each event passed to the target is pushed to Google Analytics using the global tracker: window.ga('send', [generated event]). The generated event must have a hitType property specifying the type of analytics event and any other properties required for the event type. Please refer to the analytics.js docs for a listing of the most common user interaction events, and their required properties.

Tip: If you're using Typescript, there are typed interfaces for each of the above events (see below). If you're not using Typescript, you may want to quickly scan the type definitions instead of going through the analytics.js docs: google-analytics/index.d.ts

Google Analytics Ecommerce Plugin

The Google Analytics target has support for the basic ecommerce plugin built-in. In order to use the ecommerce features, you first need to add this line to the end of your tracking snippet: ga('require', 'ecommerce');

You must add the require after you call ga('create', 'UA-XXXXX-Y'). Once you've done this, you can use the ecommerce specific events to track transactions:

  • addTransaction
  • addItem
  • ecommSend
  • ecommClear

You can also provide a customTrackerId field to your event object if you want to use a custom tracker object to track events. Ex:

  const events = [
    {
      hitType: 'addItem',
      customTrackerId: 'myTracker',
      ...
    },
  ];

Note: Google Analytics will fail silently if you try to use these events without adding the require call in your initial tracking code. It is also not recommended to use GA's basic analytics plugin if you're also going to use the enhanced ecommerce plugin. At this time, we do not have support for the enhanced ecommerce plugin.

See the google developer docs for more information on creating a custom tracker and for using the google analytics ecommerce plugin

Examples

For Typescript Users

This target also exposes interfaces for common Google Analytics events:

import {
  PageView,
  Event,
  UserTiming,
  SocialInteraction,
  Exception,
} from 'redux-beacon/targets/google-analytics';

To use them, just specify the event type in your event definition:

const pageView = (action): PageView => ({
  hitType: 'pageview',
  page: action.payload,
});