npm

Need private packages and team management tools?Check out npm Orgs. »

@shopify/react-google-analytics

3.0.19 • Public • Published

@shopify/react-google-analytics

Build Status License: MIT npm version npm bundle size (minified + gzip)

Allows React apps to easily embed tracking pixel iframes

Installation

$ yarn add @shopify/react-google-analytics

Usage

This library exports a <Universal /> & a <GaJS /> component, which allows React apps to easily embed Google Analytics scripts.

analytics.js example


import {Universal} from '@shopify/react-google-analytics';
 
const UNIVERSAL_GA_ACCOUNT_ID = 'UA-xxxx-xx';
 
<Universal
  account={UNIVERSAL_GA_ACCOUNT_ID}
  domain={shopDomain}
  disableTracking
  debug
  // NOTE: This prop will load and set the debug mode for Google Analytics
  // https://developers.google.com/analytics/devguides/collection/analyticsjs/debugging
/>;

Set custom variables for analytics.js

import {Universal} from '@shopify/react-google-analytics';
 
const UNIVERSAL_GA_ACCOUNT_ID = 'UA-xxxx-xx';
 
<Universal
  account={UNIVERSAL_GA_ACCOUNT_ID}
  domain={shopDomain}
  set={{
    foo: 'bar', // This translates to ga('set', 'foo', 'bar');
  }}
/>;

Getting access to the universal tracking instance

import {Universal} from '@shopify/react-google-analytics';
 
const UNIVERSAL_GA_ACCOUNT_ID = 'UA-xxxx-xx';
 
<Universal
  account={UNIVERSAL_GA_ACCOUNT_ID}
  domain={shopDomain}
  onLoad={ga => {
    this.ga = ga;
  }}
/>;
 
<button
  onClick={() => {
    this.ga('send', 'event', 'Videos', 'play', 'Cool Video');
  }}
>
  Play Video
</button>;

For more info on using analytics.js see the documentation

ga.js example


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.

import {GaJS} from '@shopify/react-google-analytics';
 
const GA_JS_ACCOUNT_ID = 'UA-xxxx-xx';
 
<GaJS
  account={GA_JS_ACCOUNT_ID}
  domain={shopDomain}
  disableTracking
  // NOTE: Disables the tracking snippet from sending data to Google Analytics.
  // https://developers.google.com/analytics/devguides/collection/gajs/#disable
/>;

Set custom variables for ga.js

import {GaJS} from '@shopify/react-google-analytics';
 
const GA_JS_ACCOUNT_ID = 'UA-xxxx-xx';
 
<GaJS
  account={GA_JS_ACCOUNT_ID}
  domain={shopDomain}
  set={{
    foo: 'bar', // This translates to _gaq.push(['foo', 'bar']);
  }}
/>;

Getting access to the ga tracking instance

import {GaJS} from '@shopify/react-google-analytics';
 
const GA_JS_ACCOUNT_ID = 'UA-xxxx-xx';
 
<GaJS
  account={GA_JS_ACCOUNT_ID}
  domain={shopDomain}
  onLoad={_gaq => {
    this._gaq = _gaq;
  }}
/>;
 
<button
  onClick={() => {
    this._gaq.push(['_trackEvent', 'button3', 'clicked']);
  }}
>
  Play Video
</button>;

For more info on using ga.js see the documentation

Keywords

none

install

npm i @shopify/react-google-analytics

Downloadsweekly downloads

29

version

3.0.19

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability