hzdg / react-google-analytics

Google analytics component
Other
111 stars 9 forks source link

Do Not Create New Trackers #6

Open dschinkel opened 8 years ago

dschinkel commented 8 years ago

Just want to make sure that this isn't creating a new instance of the tracker as stated here Single Page Application Tracking in that you don't want to be doing because it causes reporting accuracy issues: .

I see you mention in your readme about using ga('create', 'UA-XXXX-Y', 'auto'); "Elsewhere". So does this call to create if this is used in multiple React components violate the following statement by Google?:

Do not create new trackers

Do not create new trackers in a single page app in an attempt to mimic what the JavaScript tracking snippet does for traditional websites. Doing so runs the risk of sending an incorrect referrer as well as incorrect campaign data as described above.
lettertwo commented 8 years ago

The ga function is just a wrapper for the GA command queue, so the guidelines outlined there should generally apply to using this lib, as well. That means if you call ga('create', ...) more than once, you will be creating multiple trackers.

So, 'elsewhere' is meant to convey a location like your app entry point (or a redux middleware, or some other 'top level' location) for ga('create', ...), and then any other place you want to track events (i.e., in components) for ga('send', ...).

We use redux for most of our SPA React efforts, so we typically create a middleware that takes care of both creating the tracker (once, on initialization), and then sending events whenever actions that we want to track pass through the middleware.

This is pseudocode, but hopefully it conveys the idea (apologies if redux is not your thing):

import ga from 'react-google-analytics';

// Create a GA tracker object.
ga('create', GA_TOKEN, 'auto');

/**
 * Redux middleware for mapping actions to Google analytics 'hits'.
 */
export default function analyticsMiddleware({getState}) {
  return next => action => {
    const result = next(action);

    switch (action.type) {
      case 'SOME_TRACKABLE_ACTION':
        ga('send', 'event', { ... });
        break;
    }

    return result;
  };
}