ReactGA - React Google Analytics Module
- This is a JavaScript module that can be used to include Google Analytics tracking code in a website or app that uses React for its front-end codebase.
- It does not currently use any React code internally, but has been written for use with a number of Mozilla Foundation websites that are using React, as a way to standardize our GA Instrumentation across projects.
- It is designed to work with, Universal Analytics and will not support the older ga.js implementation.
- This module is mildly opinionated in how we instrument tracking within our front-end code.
Components
Initialize
GA must be initialized using this function before any of the other tracking functions will record any data.
If you aren't getting any data back from Page Timings, you may have to add siteSpeedSampleRate: 100 to the gaOptions object.
This will send 100% of hits to Google Analytics. By default only 1% are sent.
_ Properties_
** gaTrackingID ** String or Array. Required. GA Tracking ID like UA-000000-01
** options ** Object with values debug, titleCase, gaOptions, gaAddress, alwaysSendToDefaultTracker, testMode, standardImplementation, useExistingGa, redactEmail
Set
This will set the values of custom dimensions in Google Analytics.
Properties
** fieldsObject ** Object can have any value e.g { userId: 123 }
PageView
This will send all the named trackers listed in the array parameter. The default tracker will or will not send according to the initialize() setting alwaysSendToDefaultTracker (defaults to true if not provided). Properties ** path ** String. e.g. '/get-involved/other-ways-to-help' ** trackerNames ** Array. Optional. A list of extra trackers to run the command on ** title ** String. Optional. e.g. 'Other Ways to Help'
ModalView
A modal view is often an equivalent to a pageview in our UX, but without a change in URL that would record a standard GA pageview. For example, a 'contact us' modal may be accessible from any page in a site, even if we don't have a standalone 'contact us' page on its own URL. In this scenario, the modalview should be recorded using this function. Properties ** modalName ** String. E.g. 'login', 'read-terms-and-conditions'
Event
Tracking in-page event interactions is key to understanding the use of any interactive web property. This is how we record user interactions that don't trigger a change in URL. Properties ** args ** Object. It can have values category, action, label, value, nonInteraction, transport
Timing
Allow to measure periods of time such as AJAX requests and resources loading by sending hits using the analytics.js library. For more detailed description, please refer to https://developers.google.com/analytics/devguides/collection/analyticsjs/user-timings. Properties ** args ** Object. Can have values category, variable, value, label
GA
The original ga function can be accessed via this method. This gives developers the flexibility of directly using ga.js features that have not yet been implemented in ReactGA. No validations will be done by ReactGA as it is being bypassed if this approach is used.