> 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/google-analytics-gtag.md).

# GoogleAnalyticsGtag

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

## Setup

1. Sign up for Google Analytics and [create a new web property](https://support.google.com/analytics/answer/1008015?hl=en).
2. Add the [`gtag.js` tracking snippet](https://developers.google.com/analytics/devguides/collection/gtagjs/) to your site.
3. Install the target:

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

## Usage

```javascript
import GoogleAnalyticsGtag from '@redux-beacon/google-analytics-gtag';

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

const trackingId = 'REPLACE_WITH_YOUR_TRACKING_ID';
const ga = GoogleAnalyticsGtag(trackingId);

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

## Event Definitions

* [`pageView`](/redux-beacon/index/google-analytics-gtag.md#pageview)
* [`event`](/redux-beacon/index/google-analytics-gtag.md#event)

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.

### pageView

#### Docs:

<https://developers.google.com/analytics/devguides/collection/gtagjs/pages>

```javascript
import { trackPageView } from '@redux-beacon/google-analytics-gtag';

const pageView = trackPageView((action, prevState, nextState) => {
 return {
   title: /* (optional) */,
   location: /* (optional) */,
   path: /* (optional) */,
   fieldsObject: { /* (optional) */
     [ /* dimension | metric */]: /* value */,
   },
 };
}, /* (optional) tracking Id */, /* (optional) tracking Id */, ...);
```

{% hint style="danger" %}
The last line of the tracking snippet `gtag('config', 'GA_TRACKING_ID');` hits Google Analytics with a page view that matches the first loaded route. If you're tracking page views using Redux Beacon, be sure to remove this line so the initial page load isn't recorded twice.
{% endhint %}

### event

#### Docs:

<https://developers.google.com/analytics/devguides/collection/gtagjs/events>

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

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