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 | debug
|
31 | // NOTE: This prop will load and set the debug mode for Google Analytics
|
32 | // https://developers.google.com/analytics/devguides/collection/analyticsjs/debugging
|
33 | />;
|
34 | ```
|
35 |
|
36 | #### Set custom variables for analytics.js
|
37 |
|
38 | ```jsx
|
39 | import {Universal} from '@shopify/react-google-analytics';
|
40 |
|
41 | const UNIVERSAL_GA_ACCOUNT_ID = 'UA-xxxx-xx';
|
42 |
|
43 | <Universal
|
44 | account={UNIVERSAL_GA_ACCOUNT_ID}
|
45 | domain={shopDomain}
|
46 | set={{
|
47 | foo: 'bar', // This translates to ga('set', 'foo', 'bar');
|
48 | }}
|
49 | />;
|
50 | ```
|
51 |
|
52 | #### Getting access to the universal tracking instance
|
53 |
|
54 | ```jsx
|
55 | import {Universal} from '@shopify/react-google-analytics';
|
56 |
|
57 | const UNIVERSAL_GA_ACCOUNT_ID = 'UA-xxxx-xx';
|
58 |
|
59 | <Universal
|
60 | account={UNIVERSAL_GA_ACCOUNT_ID}
|
61 | domain={shopDomain}
|
62 | onLoad={ga => {
|
63 | this.ga = ga;
|
64 | }}
|
65 | />;
|
66 |
|
67 | <button
|
68 | onClick={() => {
|
69 | this.ga('send', 'event', 'Videos', 'play', 'Cool Video');
|
70 | }}
|
71 | >
|
72 | Play Video
|
73 | </button>;
|
74 | ```
|
75 |
|
76 | For more info on using analytics.js see the [documentation](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
|
77 |
|
78 | ## ga.js example
|
79 |
|
80 | ---
|
81 |
|
82 | `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.`
|
83 |
|
84 | ```jsx
|
85 | import {GaJS} from '@shopify/react-google-analytics';
|
86 |
|
87 | const GA_JS_ACCOUNT_ID = 'UA-xxxx-xx';
|
88 |
|
89 | <GaJS
|
90 | account={GA_JS_ACCOUNT_ID}
|
91 | domain={shopDomain}
|
92 | debug
|
93 | // NOTE: Disables the tracking snippet from sending data to Google Analytics.
|
94 | // https://developers.google.com/analytics/devguides/collection/gajs/#disable
|
95 | />;
|
96 | ```
|
97 |
|
98 | #### Set custom variables for ga.js
|
99 |
|
100 | ```jsx
|
101 | import {GaJS} from '@shopify/react-google-analytics';
|
102 |
|
103 | const GA_JS_ACCOUNT_ID = 'UA-xxxx-xx';
|
104 |
|
105 | <GaJS
|
106 | account={GA_JS_ACCOUNT_ID}
|
107 | domain={shopDomain}
|
108 | set={{
|
109 | foo: 'bar', // This translates to _gaq.push(['foo', 'bar']);
|
110 | }}
|
111 | />;
|
112 | ```
|
113 |
|
114 | #### Getting access to the ga tracking instance
|
115 |
|
116 | ```jsx
|
117 | import {GaJS} from '@shopify/react-google-analytics';
|
118 |
|
119 | const GA_JS_ACCOUNT_ID = 'UA-xxxx-xx';
|
120 |
|
121 | <GaJS
|
122 | account={GA_JS_ACCOUNT_ID}
|
123 | domain={shopDomain}
|
124 | onLoad={_gaq => {
|
125 | this._gaq = _gaq;
|
126 | }}
|
127 | />;
|
128 |
|
129 | <button
|
130 | onClick={() => {
|
131 | this._gaq.push(['_trackEvent', 'button3', 'clicked']);
|
132 | }}
|
133 | >
|
134 | Play Video
|
135 | </button>;
|
136 | ```
|
137 |
|
138 | For more info on using ga.js see the [documentation](https://developers.google.com/analytics/devguides/collection/gajs/)
|