[react-native-google-analytics-bridge] - Updated the typings for v5.2 (#18833)

* Updated typings for react-native-google-analytics-bridge for v5.2

* react-native-google-analytics-bridge - updated to follow code style

types/react-native-google-analytics-bridge/index.d.ts

@@ -1,15 +1,48 @@
-// Type definitions for react-native-google-analytics-bridge 5.0
+// Type definitions for react-native-google-analytics-bridge 5.2
 // Project: https://github.com/idehub/react-native-google-analytics-bridge
-// Definitions by: Huhuanming <https://github.com/huhuanming>
+// Definitions by: Huhuanming <https://github.com/huhuanming>,
+//                 Nathan Brooker Perry <https://github.com/nbperry>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
+export interface TimeTrackingOptionalValues {
+    name: string;
+    label?: string;
+}
+
+export interface EventOptionalValues {
+    label?: string;
+    value?: number;
+}
+
+export interface EventPurchaseProduct {
+    id: string;
+    name: string;
+    category?: string;
+    brand?: string;
+    variant?: string;
+    price?: number;
+    quantity?: number;
+    couponCode?: string;
+}
+export interface EventPurchaseTransaction {
+    id: string;
+    /**
+     * an entity with which the transaction should be affiliated (e.g. a particular store)
+     */
+    affiliation: string;
+    revenue?: number;
+    tax?: number;
+    shipping?: number;
+    couponCode?: string;
+}
+
 export class GoogleAnalyticsTracker {
     /**
      * Save all tracker related data that is needed to call native methods with proper data.
      * @param trackerId {String}
      * @param customDimensionsFieldsIndexMap {{fieldName: fieldIndex}} Custom dimensions field/index pairs
      */
-    constructor(trackerId: string, customDimensionsFieldsIndexMap?: {})
+    constructor(trackerId: string, customDimensionsFieldsIndexMap?: { [s: string]: number })
 
     /**
      * If Tracker has customDimensionsFieldsIndexMap, it will transform
@@ -24,7 +57,8 @@ export class GoogleAnalyticsTracker {
     transformCustomDimensionsFieldsToIndexes(customDimensions: {}): void;
 
     /**
-     * Track the current screen/view
+     * Track the current screen/view Important: Calling this will also set the "current view" for
+     * other calls. So events tracked will be tagged as having occured on the current view.
      * @param  {String} screenName The name of the current screen
      */
     trackScreenView(screenName: string): void;
@@ -33,9 +67,9 @@ export class GoogleAnalyticsTracker {
      * Track an event that has occured
      * @param  {String} category       The event category
      * @param  {String} action         The event action
-     * @param  {Object} optionalValues An object containing optional label and value
+     * @param  {EventOptionalValues} optionalValues An object containing optional label and value
      */
-    trackEvent(category: string, action: string, optionalValues?: {}): void;
+    trackEvent(category: string, action: string, optionalValues?: EventOptionalValues): void;
 
     /**
      * Track the current screen/view with custom dimension values
@@ -48,13 +82,13 @@ export class GoogleAnalyticsTracker {
      * Track an event that has occured with custom dimension values
      * @param  {String} category       The event category
      * @param  {String} action         The event action
-     * @param  {Object} optionalValues An object containing optional label and value
+     * @param  {EventOptionalValues} optionalValues An object containing optional label and value
      * @param  {Object} customDimensionValues An object containing custom dimension key/value pairs
      */
     trackEventWithCustomDimensionValues(
       category: string,
       action: string,
-      optionalValues: {},
+      optionalValues: EventOptionalValues,
       customDimensionValues: {},
     ): void;
 
@@ -62,49 +96,49 @@ export class GoogleAnalyticsTracker {
      * Track an event that has occured
      * @param  {String} category       The event category
      * @param  {Number} value         	The timing measurement in milliseconds
-     * @param  {Object} optionalValues An object containing optional name and label
+     * @param  {TimeTrackingOptionalValues} optionalValues An object containing optional name and label
      */
-    trackTiming(category: string, value: number, optionalValues: {}): void;
+    trackTiming(category: string, value: number, optionalValues?: TimeTrackingOptionalValues): void;
 
     /**
      * Track a purchase event. This uses the Enhanced Ecommerce GA feature.
-     * @param  {Object} product       An object with product values
-     * @param  {Object} transaction   An object with transaction values
+     * @param  {EventPurchaseProduct} product       An object with product values
+     * @param  {EventPurchaseTransaction} transaction   An object with transaction values
      * @param  {String} eventCategory The event category, defaults to Ecommerce
      * @param  {String} eventAction   The event action, defaults to Purchase
      */
     trackPurchaseEvent(
-      product: {},
-      transaction: {},
+      product: EventPurchaseProduct,
+      transaction: EventPurchaseTransaction,
       eventCategory?: string,
       eventAction?: string,
     ): void;
 
     /**
      * Track a purchase event. This uses the Enhanced Ecommerce GA feature.
-     * @param  {Array} products       An array with products
-     * @param  {Object} transaction   An object with transaction values
+     * @param  {EventPurchaseProduct[]} products       An array with products
+     * @param  {EventPurchaseTransaction} transaction   An object with transaction values
      * @param  {String} eventCategory The event category, defaults to Ecommerce
      * @param  {String} eventAction   The event action, defaults to Purchase
      */
     trackMultiProductsPurchaseEvent(
-      products: Array<{}>,
-      ransaction: {},
+      products: EventPurchaseProduct[],
+      transaction: EventPurchaseTransaction,
       eventCategory?: string,
       eventAction?: string
     ): void;
 
     /**
      * Track a purchase event with custom dimensions. This uses the Enhanced Ecommerce GA feature.
-     * @param  {Array} products       An array with products
-     * @param  {Object} transaction   An object with transaction values
+     * @param  {EventPurchaseProduct[]} products       An array with products
+     * @param  {EventPurchaseTransaction} transaction   An object with transaction values
      * @param  {String} eventCategory The event category, defaults to Ecommerce
      * @param  {String} eventAction   The event action, defaults to Purchase
      * @param  {Object} customDimensionValues An object containing custom dimension key/value pairs
      */
     trackMultiProductsPurchaseEventWithCustomDimensionValues(
-      products: Array<{}>,
-      transaction: {},
+      products: EventPurchaseProduct[],
+      transaction: EventPurchaseTransaction,
       eventCategory?: string,
       eventAction?: string,
       customDimensions?: {},
@@ -118,13 +152,20 @@ export class GoogleAnalyticsTracker {
     trackException(error: string, fatal?: boolean): void;
 
     /**
-     * Sets the current userId for tracking.
-     * @param {String} userId The current userId
+     * Sets the Google Analytics User-ID for the current user for tracking.
+     * The userId should be an anonymous identifier that complies with Google Analytic's User-ID policy.
+     * @param {String} userId The current userId,
      */
     setUser(userId: string): void;
 
     /**
-     * Sets if IDFA (identifier for advertisers) collection should be enabled
+     * Sets if IDFA (identifier for advertisers) collection should be enabled.
+     *
+     * Enabled by default.
+     *
+     * 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.
      * @param  {Boolean} enabled Defaults to true
      */
     allowIDFA(enabled?: boolean): void;
@@ -159,10 +200,17 @@ export class GoogleAnalyticsTracker {
     /**
      * Sets if AnonymizeIp is enabled
      * If enabled the last octet of the IP address will be removed
-     * @param {Boolean} enabled
+     * @param {Boolean} enabled disabled by default
      */
     setAnonymizeIp(enabled: string): void;
 
+    /**
+     * Sets the tracker currency property. See accepted currency codes here
+     * https://developers.google.com/analytics/devguides/platform/features/currencies
+     * @param {string} currencyCode  ISO 4217 currency code
+     */
+    setCurrency(currencyCode: string): void;
+
     /**
      * Sets tracker sampling rate.
      * @param {Float} sampleRatio Percentage 0 - 100
@@ -180,25 +228,25 @@ export class GoogleTagManager {
      * Call once to open the container for all subsequent static calls.
      * @param {String} containerId
      */
-    static openContainerWithId(containerId: string): void;
+    static openContainerWithId(containerId: string): Promise<void>;
 
     /**
      * Retrieves a boolean value with the given key from the opened container.
      * @param {String} key
      */
-    static boolForKey(key: string): boolean;
+    static boolForKey(key: string): Promise<boolean>;
 
     /**
      * Retrieves a string with the given key from the opened container.
      * @param {String} key
      */
-    static stringForKey(key: string): string;
+    static stringForKey(key: string): Promise<string>;
 
     /**
      * Retrieves a number with the given key from the opened container.
      * @param {String} key
      */
-    static doubleForKey(key: string): number;
+    static doubleForKey(key: string): Promise<number>;
 
     /**
      * push a datalayer event for Google Analytics through Google Tag Manager.
@@ -206,13 +254,15 @@ export class GoogleTagManager {
      * it must have at least one key "event" with event name
      *         example: {event: "eventName", pageId: "/home"}
      */
-    static pushDataLayerEvent<E>(dictionary: GAEvent<E>): void;
+    static pushDataLayerEvent<E>(dictionary: GAEvent<E>): Promise<boolean>;
 }
 
 export class GoogleAnalyticsSettings {
     /**
      * Sets if OptOut is active and disables Google Analytics
      * This has to be set each time the App starts
+     *
+     * Disabled by default.
      * @param {Boolean} enabled
      */
     static setOptOut(enabled: boolean): void;
@@ -221,13 +271,22 @@ export class GoogleAnalyticsSettings {
      * Sets the trackers dispatch interval
      * This will influence how often batches of events, screen views, etc
      * are sent to your tracker.
+     *
+     * Events, screen views, etc, are sent in batches to the 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.
+     *
      * @param {Number} intervalInSeconds
      */
     static setDispatchInterval(intervalInSeconds: number): void;
 
     /**
-     * Sets if the tracker should have dry run enabled.
-     * If dry run is enabled, no analytics data will be sent to your tracker.
+     * 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.
+     *
      * @param {Boolean} enabled
      */
     static setDryRun(enabled: boolean): void;

types/react-native-google-analytics-bridge/react-native-google-analytics-bridge-tests.ts

@@ -13,14 +13,106 @@ tracker.setAnonymizeIp('1.1.1.1');
 
 tracker.setAppName('name');
 
+// Used for Google Analytics User-ID
+tracker.setUser('unique_username');
+
+tracker.trackScreenView('Video');
+
+// Tracking pagination of a video list
+tracker.trackEvent('Videos', 'Page2');
+
+// The Video 'Awesome Video Title' has started playing
+tracker.trackEvent('Video', 'play', { label: 'Awesome Video Title'});
+
+// The video 'Awesome Video Title' has stopped playing 1234 ms into the video
+tracker.trackEvent('Video', 'stop', { label: 'Awesome Video Title', value: 1234});
+
+// Tracking the time it took to encode a video
+tracker.trackTiming('Video', 15000, { name: 'VideoEncoded' });
+
+tracker.trackException('Exception Message');
+
+// Tracking an ecommerce purchase event happening for a single product
+tracker.trackPurchaseEvent({
+  id: 'P12345',
+  name: 'Android Warhol T-Shirt',
+  category: 'Apparel/T-Shirts',
+  brand: 'Google',
+  variant: 'Black',
+  price: 29.20,
+  quantity: 1,
+  couponCode: 'APPARELSALE'
+}, {
+  id: 'T12345',
+  affiliation: 'Google Store - Online',
+  revenue: 37.39,
+  tax: 2.85,
+  shipping: 5.34,
+  couponCode: 'SUMMER2013'
+}, 'Ecommerce', 'Purchase');
+
+// Tracking an ecommerce purchase event happening for mutliple products
+tracker.trackMultiProductsPurchaseEvent([{
+  id: 'P12345',
+  name: 'Android Warhol T-Shirt',
+  category: 'Apparel/T-Shirts',
+  brand: 'Google',
+  variant: 'Black',
+  price: 29.20,
+  quantity: 1,
+  couponCode: 'APPARELSALE'
+},
+{
+  id: 'P67890',
+  name: 'iOS Warhol T-Shirt',
+  category: 'Apparel/T-Shirts',
+  brand: 'Apple',
+  variant: 'Black',
+  price: 29.20,
+  quantity: 1,
+  couponCode: 'TECHSALE20'
+}
+], {
+  id: 'T12345',
+  affiliation: 'Google Store - Online',
+  revenue: 37.39,
+  tax: 2.85,
+  shipping: 5.34,
+  couponCode: 'SUMMER2013'
+}, 'Ecommerce', 'Purchase');
+
+// Usage of custom dimensions
+let tracker2 = new GoogleAnalyticsTracker('GA_UA-2', { test: 1, OtherCustomDimension: 2});
+
+tracker2.trackScreenViewWithCustomDimensionValues('Home', { test: 'Beta' });
+
+tracker2.trackEventWithCustomDimensionValues('Video', 'play', {}, { test: 'data', OtherCustomDimension: 'OtherStuff'});
+
+// Google Tag Manager tests
 GoogleTagManager.openContainerWithId('123');
-GoogleTagManager.boolForKey('key');
-GoogleTagManager.stringForKey('key');
-GoogleTagManager.doubleForKey('key');
+
+GoogleTagManager.boolForKey('key').then((value: boolean) => {
+        console.log('Do something with the boolean for the key "key"');
+    });
+
+GoogleTagManager.stringForKey('key').then((value: string) => {
+        console.log('Do something with the string for the key "key"');
+    });
+
+GoogleTagManager.doubleForKey('key').then((value: number) => {
+        console.log('Do something with the number for the key "key"');
+    });
+
 GoogleTagManager.pushDataLayerEvent<string>({
-    event: 'event',
-    payload: 'payload',
-});
+        event: 'event',
+        payload: 'payload',
+    }).then((success: boolean) => {
+        success ?
+            console.log('Successfully got pushed the DataLayerEvent') :
+            console.log('Failed to push the DataLayerEvent');
+    });
+
+// Google Analytic Settings
 
 GoogleAnalyticsSettings.setOptOut(true);
 GoogleAnalyticsSettings.setDispatchInterval(1000);

types/react-native-google-analytics-bridge/tsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "module": "commonjs",
     "lib": [
-      "es6"
+      "es6",
+      "dom"
     ],
     "noImplicitAny": true,
     "noImplicitThis": true,