> For the complete documentation index, see [llms.txt](https://rangle.gitbook.io/redux-beacon/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rangle.gitbook.io/redux-beacon/index/react-native-google-analytics.md).

# React Native: GoogleAnalytics

* [Setup](/redux-beacon/index/react-native-google-analytics.md#setup)
* [Usage](/redux-beacon/index/react-native-google-analytics.md#usage)
* [Event Definitions](/redux-beacon/index/react-native-google-analytics.md#event-definitions)

## Setup

1. Sign up for Google Analytics and [create a new mobile property](https://support.google.com/analytics/answer/2587086#GA).
2. Install the following npm package: [GoogleAnalyticsBridge](https://www.npmjs.com/package/react-native-google-analytics-bridge).
3. For each mobile platform (Android or iOS), you need to follow its corresponding [manual installation](https://github.com/idehub/react-native-google-analytics-bridge/wiki/Manual-installation).
4. Install the target:

   ```bash
    npm install --save @redux-beacon/react-native-google-analytics
   ```

## Usage

```javascript
import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
import GoogleAnalytics from '@redux-beacon/react-native-google-analytics';

// Create or import an events map.
// See "getting started" pages for instructions.

const trackingId = 'UA-12345678-1' // replace with your own
const ga = GoogleAnalytics(trackingId, GoogleAnalyticsTracker);

const gaMiddleware = createMiddleware(eventsMap, ga);
```

### Additional Settings

You also have access to some [additional settings](https://github.com/idehub/react-native-google-analytics-bridge#googleanalyticssettings-api) from the underlying `react-native-google-analytics-bridge`. These settings can be used to:

* Disable your app from sending events to Google Analytics
* Disable your app from tracking events altogether - this can be used to give your users control over opting in/out from analytics.

These settings can be applied as follows:

```javascript
import { GoogleAnalyticsTracker, GoogleAnalyticsSettings } from 'react-native-google-analytics-bridge';
import GoogleAnalytics from '@redux-beacon/react-native-google-analytics';

const trackingId = 'UA-12345678-1' // replace with your own
const ga = GoogleAnalytics(trackingId, GoogleAnalyticsTracker);

GoogleAnalyticsSettings.setDryRun(true);
GoogleAnalyticsSettings.setOptOut(true);
```

## Event Definitions

* [`screenView`](/redux-beacon/index/react-native-google-analytics.md#screenview)
* [`event`](/redux-beacon/index/react-native-google-analytics.md#event)
* [`purchase`](/redux-beacon/index/react-native-google-analytics.md#purchase)
* [`timing`](/redux-beacon/index/react-native-google-analytics.md#timing)
* [`socialInteraction`](/redux-beacon/index/react-native-google-analytics.md#socialinteraction)
* [`user`](/redux-beacon/index/react-native-google-analytics.md#user)
* [`client`](/redux-beacon/index/react-native-google-analytics.md#client)
* [`exception`](/redux-beacon/index/react-native-google-analytics.md#exception)

Don't see your event listed? Please submit a pull request to the [Redux Beacon repository](https://github.com/rangle/redux-beacon) with the missing event. Use the source of the existing `event-helpers` to guide your work. If you need any support feel free to make the pull request with all you're able to do. We can fill in the gaps from there.

### screenView

#### Docs:

* <https://developers.google.com/analytics/devguides/collection/ios/v3/screens>
* <https://developers.google.com/analytics/devguides/collection/ios/v3/customdimsmets>

```javascript
import { trackScreenView } from '@redux-beacon/react-native-google-analytics';

const screenView = trackScreenView((action, prevState, nextState) => {
  return {
    screenName: /* fill me in */,
    customDimensions: { /* (optional) */
      [/* dimension index */]: /* dimension value */,
    },
  };
});
```

### event

#### Docs:

* <https://developers.google.com/analytics/devguides/collection/ios/v3/events>
* <https://developers.google.com/analytics/devguides/collection/ios/v3/customdimsmets>

```javascript
import { trackEvent } from '@redux-beacon/react-native-google-analytics';

const someEvent = trackEvent((action, prevState, nextState) => {
  return {
    action: /* fill me in */,
    category: /* fill me in */,
    label: /* (optional) */,
    value: /* (optional) */,
    customDimensions: { /* (optional) */
      [/* dimension index */]: /* dimension value */
    },
  };
});
```

### purchase

#### Docs:

* <https://developers.google.com/analytics/devguides/collection/ios/v3/ecommerce>

```javascript
import { trackPurchase } from '@redux-beacon/react-native-google-analytics';

const somePurchaseEvent = trackPurchase((action, prevState, nextState) => {
  return {
    product: { /* fill me in */
      id: /* fill me in */,
      name: /* fill me in */,
      category: /* (optional) */,
      brand: /* (optional) */,
      variant: /* (optional) */,
      price: /* (optional) */,
      quantity: /* (optional) */,
      couponCode: /* (optional) */,
    },
    transaction: { /* fill me in */
      id: /* fill me in */,
      affiliation: /* (optional) */,
      revenue: /* (optional) */,
      tax: /* (optional) */,
      shipping: /* (optional) */,
      couponCode: /* (optional) */,
    },
    action: /* fill me in */,
    category: /* fill me in */,
  };
});
```

### timing

#### Docs:

<https://developers.google.com/analytics/devguides/collection/ios/v3/usertimings>

```javascript
import { trackTiming } from '@redux-beacon/react-native-google-analytics';

const timingEvent = trackTiming((action, prevState, nextState) => {
  return {
    category: /* fill me in */,
    value: /* fill me in */,
    name: /* (optional) */,
    label: /* (optional) (requires name if provided)*/,
  };
});
```

### socialInteraction

#### Docs:

<https://developers.google.com/analytics/devguides/collection/ios/v3/social>

```javascript
import { trackSocialInteraction } from '@redux-beacon/react-native-google-analytics';

const socialInteraction = trackSocialInteraction((action, prevState, nextState) => {
  return {
    network: /* fill me in */,
    action: /* fill me in */,
    target: /* (optional) */,
  };
});
```

### user

#### Docs:

<https://developers.google.com/analytics/devguides/collection/ios/v3/user-id>

```javascript
import { setUser } from '@redux-beacon/react-native-google-analytics';

const user = setUser((action, prevState, nextState) => {
  const userId = /* fill me in */;
  return userId;
});
```

### client

#### Docs:

<https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#clientId>

```javascript
import { setClient } from '@redux-beacon/react-native-google-analytics';

const client = setClient((action, prevState, nextState) => {
  const clientId = /* fill me in */;
  return clientId;
});
```

### exception

#### Docs:

<https://developers.google.com/analytics/devguides/collection/ios/v3/exceptions>

```javascript
import { trackException } from '@redux-beacon/react-native-google-analytics';

const exception = trackException((action, prevState, nextState) => {
  return {
    description: /* fill me in */,
    isFatal: /* (optional) */,
  };
});
```