Neutered Puppy Masquerade

    react-native-google-analytics-bridge
    TypeScript icon, indicating that this package has built-in type declarations

    7.1.0 • Public • Published

    Deprecation notice

    On November 13th 2018 Google issued the following statement:

    We want to let you know that in October 2019 we will begin to sunset our Google Analytics for mobile apps reporting and the Google Analytics Services SDK.

    Data collection and processing for such properties will stop on October 31, 2019.

    The message is quite clear, and therefore I am officially deprecating this library. If you want to continue using Google's solutions for analytics, I recommend you move to Google Analytics for Firebase instead.

    For React Native, there is a great library called react-native-firebase which implements Analytics (and other Firebase solutions).

    I will continue to support this library for minor fixes, but no major changes will occur. The repository itself will be archived sometime in 2019.

    Thanks to everyone who have used or contributed to this library!

    - Christian (@cbrevik)

    GoogleAnalyticsBridge npm version Build Status

    Google Analytics Bridge is built to provide an easy interface to the native Google Analytics libraries on both iOS and Android.

    Why a native bridge? Why not use just JavaScript?

    The key difference with the native bridge is that you get a lot of the metadata handled automatically by the Google Analytics native library. This will include the device UUID, device model, viewport size, OS version etc.

    You will only have to send in a few parameteres when tracking, e.g:

    import { GoogleAnalyticsTracker } from "react-native-google-analytics-bridge";
    let tracker = new GoogleAnalyticsTracker("UA-12345-1");
     
    tracker.trackScreenView("Home");
    tracker.trackEvent("testcategory", "testaction");

    Version 6 breaking changes!

    If you are upgrading to version 6 from an older version, read this wiki post for important details.

    The newest version of this library has a new API surface. The API changes are in most cases backwards-compatible.

    Important: If you are using ecommerce or custom dimensions, you probably have to migrate to new API if you upgrade!

    Content

    Installation and linking libraries

    • For React Native >= 0.40 use version 5.0.0 (and up) of this module.
    • For React Native < 0.40 use version 4.0.3.

    Install with npm: npm install --save react-native-google-analytics-bridge

    Or, install with yarn: yarn add react-native-google-analytics-bridge

    Either way, then link with: react-native link react-native-google-analytics-bridge

    If it doesn't work immediately after this, consult the manual installation guide. Both Android and iOS has a couple of prerequisite SDKs linked and installed.

    Important: Does this library work with Expo? We have to sort of invert the question a bit, because it should be: does Expo work with other libraries? And the answer is no:

    The most limiting thing about Expo is that you can’t add in your own native modules without detaching and using ExpoKit.

    This includes using create-react-native-app which also makes use of Expo.

    Usage

    // You have access to three classes in this module:
    import {
      GoogleAnalyticsTracker,
      GoogleTagManager,
      GoogleAnalyticsSettings
    } from "react-native-google-analytics-bridge";
     
    // The tracker must be constructed, and you can have multiple:
    let tracker1 = new GoogleAnalyticsTracker("UA-12345-1");
    let tracker2 = new GoogleAnalyticsTracker("UA-12345-2");
     
    tracker1.trackScreenView("Home");
    tracker1.trackEvent("Customer", "New");
     
    // The GoogleAnalyticsSettings is static, and settings are applied across all trackers:
    GoogleAnalyticsSettings.setDispatchInterval(30);
    // Setting `dryRun` to `true` lets you test tracking without sending data to GA
    GoogleAnalyticsSettings.setDryRun(true);
     
    // GoogleTagManager is also static, and works only with one container. All functions here are Promises:
    GoogleTagManager.openContainerWithId("GT-NZT48")
      .then(() => {
        return GoogleTagManager.stringForKey("pack");
      })
      .then(pack => {
        console.log("Pack: ", pack);
      })
      .catch(err => {
        console.log(err);
      });
     
    // You can also register Function Call tag handlers when the container is open.
    GoogleTagManager.registerFunctionCallTagHandler(
      "some_function", // Must be equal to Function Name field when the tag was configured.
      (functionName, tagArguments) => {
        // functionName is passed for convenience. In this example it will be equal to "some_function".
        // tagArguments is an object and is populated based on Tag configuration in TagManager interface.
        console.log("Handling Function Call tag:", functionName);
      }
    )

    JavaScript API

    Table of Contents

    GoogleAnalyticsSettings

    Settings which are applied across all trackers.

    setOptOut

    Sets if OptOut is active and disables Google Analytics. This is disabled by default. Note: This has to be set each time the App starts.

    Parameters
    Examples
    GoogleAnalyticsSettings.setOptOut(true);

    setDispatchInterval

    Sets the trackers dispatch interval. Events, screen views, etc, are sent in batches to your tracker. This function allows you to configure how often (in seconds) the batches are sent to your tracker. Recommended to keep this around 20-120 seconds to preserve battery and network traffic. This is set to 20 seconds by default.

    Parameters
    Examples
    GoogleAnalyticsSettings.setDispatchInterval(30);

    setDryRun

    When enabled the native library prevents any data from being sent to Google Analytics. This allows you to test or debug the implementation, without your test data appearing in your Google Analytics reports.

    Parameters
    Examples
    GoogleAnalyticsSettings.setDryRun(true);

    GoogleAnalyticsTracker

    Examples

    // Constructing a tracker is simple:
    import { GoogleAnalyticsTracker } from "react-native-google-analytics-bridge";
    const tracker = new GoogleAnalyticsTracker("UA-12345-1");
    tracker.trackScreenView("Home");
     
    // You can have multiple trackers if you have several tracking ids
    const tracker2 = new GoogleAnalyticsTracker("UA-12345-2");
    // One optional feature as well is constructing a tracker with a CustomDimensionsFieldIndexMap, to map custom dimension field names to index keys:
    const fieldIndexMap = { customerType: 1 };
    const tracker3 = new GoogleAnalyticsTracker("UA-12345-3", fieldIndexMap);
     
    // This is because the Google Analytics API expects custom dimensions to be tracked by index keys, and not field names.
    // Here the underlying logic will transform the custom dimension, so what ends up being sent to GA is { 1: 'Premium' }:
    tracker3.trackScreenView("Home", { customDimensions: { customerType: "Premium" } });
     
    // If you do not use a CustomDimensionsFieldIndexMap, you will have to use index as keys instead for custom dimensions:
    tracker.trackScreenView("Home", { customDimensions: { 1: "Premium" } });

    trackScreenView

    Track the current screen/view. Calling this will also set the "current view" for other calls. So events tracked will be tagged as having occured on the current view, Home in this example. This means it is important to track navigation, especially if events can fire on different views.

    Parameters
    • screenName string (Required) The name of the current screen
    • payload HitPayload (Optional) An object containing the hit payload (optional, default null)
    Examples
    tracker.trackScreenView('Home');
    // With payload:
    const payload = { impressionList: "Sale", impressionProducts: [ { id: "PW928", name: "Premium bundle" } ] };
    tracker.trackScreenView("SplashModal", payload);

    trackEvent

    Track an event that has occured

    Parameters
    • category string (Required) The event category
    • action string (Required) The event action
    • eventMetadata EventMetadata (Optional) An object containing event metadata
    • payload HitPayload (Optional) An object containing the hit payload (optional, default null)
    Examples
    tracker.trackEvent("DetailsButton", "Click");
    // Track event with label and value
    tracker.trackEvent("AppVersionButton", "Click", { label: "v1.0.3", value: 22 });
    // Track with a payload (ecommerce in this case):
    const product = {
      id: "P12345",
      name: "Android Warhol T-Shirt",
      category: "Apparel/T-Shirts",
      brand: "Google",
      variant: "Black",
      price: 29.2,
      quantity: 1,
      couponCode: "APPARELSALE"
    };
    const transaction = {
      id: "T12345",
      affiliation: "Google Store - Online",
      revenue: 37.39,
      tax: 2.85,
      shipping: 5.34,
      couponCode: "SUMMER2013"
    };
    const productAction = {
      transaction,
      action: 7 // Purchase action, see ProductActionEnum
    }
    const payload = { products: [ product ], productAction: productAction }
    tracker.trackEvent("FinalizeOrderButton", "Click", null, payload);

    trackTiming

    Track a timing measurement

    Parameters
    • category string (Required) The event category
    • interval number (Required) The timing measurement in milliseconds
    • timingMetadata TimingMetadata (Required) An object containing timing metadata
    • payload HitPayload (Optional) An object containing the hit payload (optional, default null)
    Examples
    tracker.trackTiming("testcategory", 2000, { name: "LoadList" }); // name metadata is required
    // With optional label:
    tracker.trackTiming("testcategory", 2000, { name: "LoadList", label: "v1.0.3" });

    trackException

    Track an exception

    Parameters
    • error string (Required) The description of the error
    • fatal boolean (Optional) A value indiciating if the error was fatal, defaults to false (optional, default false)
    • payload HitPayload (Optional) An object containing the hit payload (optional, default null)
    Examples
    try {
      ...
    } catch(error) {
      tracker.trackException(error.message, false);
    }

    trackSocialInteraction

    Track a social interaction, Facebook, Twitter, etc.

    Parameters
    Examples
    tracker.trackSocialInteraction("Twitter", "Post");

    setUser

    Sets the current userId for tracking.

    Parameters
    • userId string An anonymous identifier that complies with Google Analytic's user ID policy
    Examples
    tracker.setUser("12345678");

    setClient

    Sets the current clientId for tracking.

    Parameters
    • clientId string A anonymous identifier that complies with Google Analytic's client ID policy
    Examples
    tracker.setClient("35009a79-1a05-49d7-b876-2b884d0f825b");

    getClientId

    Get the client id to be used for purpose of logging etc.

    Examples
    tracker.getClientId().then(clientId => console.log("Client id is: ", clientId));

    Returns Promise<string>

    allowIDFA

    Also called advertising identifier collection, and is used for advertising features.

    Important: For iOS you can only use this method if you have done the optional step 6 from the installation guide. Only enable this (and link the appropriate libraries) if you plan to use advertising features in your app, or else your app may get rejected from the AppStore.

    Parameters
    • enabled boolean (Optional) Defaults to true (optional, default true)
    Examples
    tracker.allowIDFA(true);

    setAppName

    Overrides the app name logged in Google Analytics. The Bundle name is used by default. Note: This has to be set each time the App starts.

    Parameters
    Examples
    tracker.setAppName("YourAwesomeApp");

    setAppVersion

    Sets the trackers appVersion

    Parameters
    • appVersion string (Required)
    Examples
    tracker.setAppVersion("1.3.2");

    setAnonymizeIp

    Sets if AnonymizeIp is enabled If enabled the last octet of the IP address will be removed

    Parameters
    Examples
    tracker.setAnonymizeIp(true);

    setSamplingRate

    Sets tracker sampling rate.

    Parameters
    • sampleRatio number (Required) Percentage 0 - 100
    Examples
    tracker.setSamplingRate(50);

    setCurrency

    Sets the currency for tracking.

    Parameters
    • currencyCode string (Required) The currency ISO 4217 code
    Examples
    tracker.setCurrency("EUR");

    setTrackUncaughtExceptions

    Sets if uncaught exceptions should be tracked Important to note: On iOS this option is set on all trackers. On Android it is set per tracker. If you are using multiple trackers on iOS, this will enable & disable on all trackers.

    Parameters

    dispatch

    This function lets you manually dispatch all hits which are queued. Use this function sparingly, as it will normally happen automatically as a batch. This function will also dispatch for all trackers.

    Examples
    tracker.dispatch().then(done => console.log("Dispatch is done: ", done));

    Returns Promise<boolean> Returns when done

    dispatchWithTimeout

    The same as dispatch, but also gives you the ability to time out the Promise in case dispatch takes too long.

    Parameters
    • timeout number The timeout. Default value is 15 sec. (optional, default -1)
    Examples
    tracker
      .dispatchWithTimeout(10000)
      .then(done => console.log("Dispatch is done: ", done));

    Returns Promise<boolean> Returns when done or timed out

    GoogleTagManager

    Can only be used with one container. All functions returns a Promise.

    Examples

    import { GoogleTagManager } from "react-native-google-analytics-bridge";
    GoogleTagManager.openContainerWithId("GT-NZT48")
      .then(() => GoogleTagManager.stringForKey("pack"))
      .then(str => console.log("Pack: ", str));

    openContainerWithId

    Call once to open the container for all subsequent static calls.

    Parameters
    Examples
    GoogleTagManager.openContainerWithId('GT-NZT48').then((..) => ..)

    Returns Promise<boolean>

    refreshContainer

    Refreshes the GTM container. According to Tag Manager documentations for Android can be called once every 15 minutes. No such limitations has been mentioned for iOS containers, though.

    Examples
    GoogleTagManager.refreshContainer().then((..) => ..)

    Returns Promise<boolean>

    boolForKey

    Retrieves a boolean value with the given key from the opened container.

    Parameters
    Examples
    GoogleTagManager.boolForKey("key").then(val => console.log(val));

    Returns Promise<boolean>

    stringForKey

    Retrieves a string with the given key from the opened container.

    Parameters
    Examples
    GoogleTagManager.stringForKey("key").then(val => console.log(val));

    Returns Promise<string>

    doubleForKey

    Retrieves a number with the given key from the opened container.

    Parameters
    Examples
    GoogleTagManager.doubleForKey("key").then(val => console.log(val));

    Returns Promise<number>

    pushDataLayerEvent

    Push a datalayer event for Google Analytics through Google Tag Manager. The event must have at least one key "event" with event name.

    Parameters
    • event DataLayerEvent An Map<String, Object> containing key and value pairs. It must have at least one key "event" with event name
    Examples
    GoogleTagManager.pushDataLayerEvent({
      event: "eventName",
      pageId: "/home"
    }).then(success => console.log(success));

    Returns Promise<boolean>

    registerFunctionCallTagHandler

    Register Function Call tag handler

    Parameters

    setVerboseLoggingEnabled

    Sets logger to verbose, default is warning

    Parameters

    TimingMetadata

    Used when tracking time measurements

    Parameters

    Examples

    const timingMetadata = { name: "LoadList" } // name is a required value when tracking timing
    tracker.trackTiming("testcategory", 13000, timingMetadata);

    EventMetadata

    Used when tracking event

    Parameters

    Examples

    const eventMetadata = { label: "v1.0.3", value: 22 }
    tracker.trackEvent("FinalizeOrderButton", "Click", eventMetadata);

    HitPayload

    The HitPayload object and possible values

    Used by the different tracking methods for adding metadata to the hit.

    Parameters

    Examples

    // If you want to do send a purchase payload with an event:
    const product = {
      id: "P12345",
      name: "Android Warhol T-Shirt",
      category: "Apparel/T-Shirts",
      brand: "Google",
      variant: "Black",
      price: 29.2,
      quantity: 1,
      couponCode: "APPARELSALE"
    };
    const transaction = {
      id: "T12345",
      affiliation: "Google Store - Online",
      revenue: 37.39,
      tax: 2.85,
      shipping: 5.34,
      couponCode: "SUMMER2013"
    };
    const productAction = {
      transaction,
      action: 7 // Purchase action, see ProductActionEnum
    }
    const payload = { products: [ product ], productAction: productAction }
    tracker.trackEvent("FinalizeOrderButton", "Click", null, payload);
    // If you want to send custom dimensions with a screen view:
    const customDimensions = {
      1: "Beta",
      3: "Premium"
    };
    const payload = { customDimensions };
    tracker.trackScreenView("SaleScreen", payload);

    CustomDimensionsByField

    • See: CustomDimensionsFieldIndexMap
    • See: CustomDimensionsByIndex

    A dictionary with custom dimensions values and their (mapped) field name keys. In order to use this and send in custom dimensions by field name, you must have provided a CustomDimensionsFieldIndexMap when constructing the tracker.

    Examples

    const customDimensions = { customerType: "Premium", appType: "Beta", credit: 1200 }
    tracker.trackScreenView("Home", { customDimensions });

    CustomDimensionsByIndex

    • See: CustomDimensionsFieldIndexMap
    • See: CustomDimensionsByField

    A dictionary with custom dimensions values and their index keys.

    Examples

    const customDimensions = { 1: "Premium", 3: "Beta", 5: 1200 }
    tracker.trackScreenView("Home", { customDimensions });

    CustomDimensionsFieldIndexMap

    • See: CustomDimensionsFieldIndexMap
    • See: CustomDimensionsByField

    A dictionary describing mapping of field names to indices for custom dimensions. This is an optional object used by the tracker.

    Examples

    // Create something like:
    const fieldIndexMap = { customerType: 1 };
    // Construct tracker with it:
    const tracker = new GoogleAnalyticsTracker("UA-12345-3", fieldIndexMap);
    // This allows you to send in customDimensions in the`HitPayload by field name instead of index:
    tracker.trackScreenView("Home", { customDimensions: { customerType: "Premium" } });
    // If you do not provide a map, you instead have to send in by index:
    tracker.trackScreenView("Home", { customDimensions: { 1: "Premium" } });

    CustomMetrics

    A dictionary with custom metric values and their index keys.

    Examples

    const customMetrics = { 1: 2389, 4: 15000 }
    tracker.trackScreenView("Home", { customMetrics });

    DataLayerEvent

    The Google Tag Manager DataLayerEvent dictionary.

    Populate this event-object with values to push to the DataLayer. The only required property is event.

    Parameters

    Examples

    const dataLayerEvent = {
      event: "eventName",
      pageId: "/home"
    };
    GoogleTagManager.pushDataLayerEvent(dataLayerEvent);

    ProductActionEnum

    Enhanced Ecommerce ProductActionEnum

    Used by ProductAction when describing the type of product action. The possible values (numbers) are:

    • Detail = 1,
    • Click = 2,
    • Add = 3,
    • Remove = 4,
    • Checkout = 5,
    • CheckoutOption = 6,
    • Purchase = 7,
    • Refund = 8

    Product

    Enhanced Ecommerce Product

    Used by HitPayload when populating product actions or impressions

    Parameters

    Examples

    const product = {
      id: "P12345",
      name: "Android Warhol T-Shirt",
      category: "Apparel/T-Shirts",
      brand: "Google",
      variant: "Black",
      price: 29.2,
      quantity: 1,
      couponCode: "APPARELSALE"
    };

    ProductAction

    Enhanced Ecommerce Product Action

    Used by HitPayload when describing a product action

    Parameters

    Examples

    const productAction = {
      transaction,
      action: 7 // Purchase action, see ProductActionEnum
    }
    const productAction = {
      action: 3 // Add action, see ProductActionEnum
    }

    Transaction

    Enhanced Ecommerce Transaction

    Used by ProductAction when populating describing a purchase/transaction

    Parameters

    Examples

    const transaction = {
      id: "T12345",
      affiliation: "Google Store - Online",
      revenue: 37.39,
      tax: 2.85,
      shipping: 5.34,
      couponCode: "SUMMER2013"
    };

    Install

    npm i react-native-google-analytics-bridge

    DownloadsWeekly Downloads

    738

    Version

    7.1.0

    License

    MIT

    Unpacked Size

    35.8 MB

    Total Files

    66

    Last publish

    Collaborators

    • cbrevik