Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @shopify/react-google-analytics with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactGoogleAnalytics = require("@shopify/react-google-analytics")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@shopify/react-google-analytics v3.0.21

Google Analytics

@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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free