1 | # `@shopify/react-google-analytics`
|
2 |
|
3 | [![Build Status](https://travis-ci.org/Shopify/quilt.svg?branch=master)](https://travis-ci.org/Shopify/quilt)
|
4 | [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-google-analytics.svg)](https://badge.fury.io/js/%40shopify%2Freact-google-analytics.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/react-google-analytics.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/react-google-analytics.svg)
|
5 |
|
6 | Allows React apps to easily embed tracking pixel iframes
|
7 |
|
8 | ## Installation
|
9 |
|
10 | ```bash
|
11 | $ yarn add @shopify/react-google-analytics
|
12 | ```
|
13 |
|
14 | ## Usage
|
15 |
|
16 | This library exports a `<Universal />` & a `<GaJS />` component, which allows React apps to easily embed Google Analytics scripts.
|
17 |
|
18 | ## analytics.js example
|
19 |
|
20 | ---
|
21 |
|
22 | ```jsx
|
23 | import {Universal} from '@shopify/react-google-analytics';
|
24 |
|
25 | const UNIVERSAL_GA_ACCOUNT_ID = 'UA-xxxx-xx';
|
26 |
|
27 | <Universal
|
28 | account={UNIVERSAL_GA_ACCOUNT_ID}
|
29 | domain={shopDomain}
|
30 | disableTracking
|
31 | debug
|
32 | // NOTE: This prop will load and set the debug mode for Google Analytics
|
33 | // https://developers.google.com/analytics/devguides/collection/analyticsjs/debugging
|
34 | />;
|
35 | ```
|
36 |
|
37 | #### Set custom variables for analytics.js
|
38 |
|
39 | ```jsx
|
40 | import {Universal} from '@shopify/react-google-analytics';
|
41 |
|
42 | const UNIVERSAL_GA_ACCOUNT_ID = 'UA-xxxx-xx';
|
43 |
|
44 | <Universal
|
45 | account={UNIVERSAL_GA_ACCOUNT_ID}
|
46 | domain={shopDomain}
|
47 | set={{
|
48 | foo: 'bar', // This translates to ga('set', 'foo', 'bar');
|
49 | }}
|
50 | />;
|
51 | ```
|
52 |
|
53 | #### Getting access to the universal tracking instance
|
54 |
|
55 | ```jsx
|
56 | import {Universal} from '@shopify/react-google-analytics';
|
57 |
|
58 | const UNIVERSAL_GA_ACCOUNT_ID = 'UA-xxxx-xx';
|
59 |
|
60 | <Universal
|
61 | account={UNIVERSAL_GA_ACCOUNT_ID}
|
62 | domain={shopDomain}
|
63 | onLoad={ga => {
|
64 | this.ga = ga;
|
65 | }}
|
66 | />;
|
67 |
|
68 | <button
|
69 | onClick={() => {
|
70 | this.ga('send', 'event', 'Videos', 'play', 'Cool Video');
|
71 | }}
|
72 | >
|
73 | Play Video
|
74 | </button>;
|
75 | ```
|
76 |
|
77 | #### Handling Errors
|
78 |
|
79 | As browsers become more strict and tracking scripts blocked more frequently by users, there is a good chance this component will not be able to embed the Google Analytics script as intended. For these cases, you can pass an `onError` callback as follows:
|
80 |
|
81 | ```jsx
|
82 | import {Universal} from '@shopify/react-google-analytics';
|
83 |
|
84 | const UNIVERSAL_GA_ACCOUNT_ID = 'UA-xxxx-xx';
|
85 |
|
86 | <Universal
|
87 | account={UNIVERSAL_GA_ACCOUNT_ID}
|
88 | domain={shopDomain}
|
89 | onError={error => {
|
90 | // do something with error
|
91 | }}
|
92 | />;
|
93 | ```
|
94 |
|
95 | For more info on using analytics.js see the [documentation](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
|
96 |
|
97 | ## ga.js example
|
98 |
|
99 | ---
|
100 |
|
101 | `WARNING: ga.js is a legacy library. If you are starting a new implementation, we recommend you use the latest version of this library, analytics.js.`
|
102 |
|
103 | ```jsx
|
104 | import {GaJS} from '@shopify/react-google-analytics';
|
105 |
|
106 | const GA_JS_ACCOUNT_ID = 'UA-xxxx-xx';
|
107 |
|
108 | <GaJS
|
109 | account={GA_JS_ACCOUNT_ID}
|
110 | domain={shopDomain}
|
111 | disableTracking
|
112 | // NOTE: Disables the tracking snippet from sending data to Google Analytics.
|
113 | // https://developers.google.com/analytics/devguides/collection/gajs/#disable
|
114 | />;
|
115 | ```
|
116 |
|
117 | #### Set custom variables for ga.js
|
118 |
|
119 | ```jsx
|
120 | import {GaJS} from '@shopify/react-google-analytics';
|
121 |
|
122 | const GA_JS_ACCOUNT_ID = 'UA-xxxx-xx';
|
123 |
|
124 | <GaJS
|
125 | account={GA_JS_ACCOUNT_ID}
|
126 | domain={shopDomain}
|
127 | set={{
|
128 | foo: 'bar', // This translates to _gaq.push(['foo', 'bar']);
|
129 | }}
|
130 | />;
|
131 | ```
|
132 |
|
133 | #### Getting access to the ga tracking instance
|
134 |
|
135 | ```jsx
|
136 | import {GaJS} from '@shopify/react-google-analytics';
|
137 |
|
138 | const GA_JS_ACCOUNT_ID = 'UA-xxxx-xx';
|
139 |
|
140 | <GaJS
|
141 | account={GA_JS_ACCOUNT_ID}
|
142 | domain={shopDomain}
|
143 | onLoad={_gaq => {
|
144 | this._gaq = _gaq;
|
145 | }}
|
146 | />;
|
147 |
|
148 | <button
|
149 | onClick={() => {
|
150 | this._gaq.push(['_trackEvent', 'button3', 'clicked']);
|
151 | }}
|
152 | >
|
153 | Play Video
|
154 | </button>;
|
155 | ```
|
156 |
|
157 | For more info on using ga.js see the [documentation](https://developers.google.com/analytics/devguides/collection/gajs/)
|