# @frontity/google-tag-manager-analytics

Analytics package to use [Google Tag Manager](https://tagmanager.google.com/) with Frontity

## Table of Contents

* [Install](/frontity-packages/features-packages/analytics/google-tag-manager-analytics.md#install)
* [Settings](/frontity-packages/features-packages/analytics/google-tag-manager-analytics.md#settings)
* [Usage](/frontity-packages/features-packages/analytics/google-tag-manager-analytics.md#usage)
  * [`actions.analytics.pageview`](/frontity-packages/features-packages/analytics/google-tag-manager-analytics.md#actions-analytics-pageview)
  * [`actions.analytics.event`](/frontity-packages/features-packages/analytics/google-tag-manager-analytics.md#actions-analytics-event)

## Install

```bash
npm i @frontity/google-tag-manager-analytics
```

## Settings

The [namespace](https://docs.frontity.org/learning-frontity/namespaces) for this package is **`googleTagManagerAnalytics`**

Every Google Tag Manager account has a [Container ID](https://support.google.com/tagmanager/answer/6103696?hl=en).\
To connect the package with a specific account (or accounts) we can set the following properties in the `frontity.settings.js`:

* `state.googleTagManagerAnalytics.containerId`: to specify just one *container ID*
* `state.googleTagManagerAnalytics.containerIds`: to specify a list of *container ID's*

```javascript
export default {
  packages: [
    {
      name: "@frontity/google-tag-manager-analytics",
      state: {
        googleTagManagerAnalytics: {
          containerId: "GTM-BCDFGHJ",
        },
      },
    },
  ],
};
```

```javascript
export default {
  packages: [
    {
      name: "@frontity/google-tag-manager-analytics",
      state: {
        googleTagManagerAnalytics: {
          containerIds: ["GTM-BCDFGHJ", "GTM-HJSFDUF"],
        },
      },
    },
  ],
};
```

## Usage

This `@frontity/google-tag-manager-analytics` package can co-exist with some other `analytics` packages. Once we have properly installed and configured these `analytics` packages, their actions will be centralized by the `analytics` namespace

* `actions.analytics.pageview()` will take into account settings in `state.analytics.pageviews`
* `actions.analytics.event()` will take into account settings in `state.analytics.events`

> Read more [here](/frontity-packages/features-packages/analytics.md#how-to-use) about how to use Analytic packages

### `actions.analytics.pageview`

If `@frontity/google-tag-manager-analytics` is configured and enabled for *pageviews* in `state.analytics.pageviews`, every time a link changes (or every time `action.router.set(link)` is launched) a tracking for that page will be sent to Google Tag Manager.

#### Sending `pageviews` to Google Analytics via Google Tag Manager

In order to send pageviews to Google Analytics through Google Tag Manager in a Frontity project you have to create a Trigger listening to a **custom event named `pageview`**, instead of the *default `pageview`* ([the default Event Type `pageview`, doesn't work properly in Isomorphic Apps](https://github.com/frontity/docs/issues/262#issuecomment-822417769)). This custom event is automatically send by `@frontity/google-tag-manager-analytics package`

**Trigger**

![](https://frontity.org/wp-content/uploads/2021/04/google-tag-manager-custom-event.png)

**Tag**

![](https://frontity.org/wp-content/uploads/2021/04/google-tag-manager-tag.png)

{% hint style="info" %}
In the [Feature Discussion of this package](https://community.frontity.org/t/google-tag-manager-package/1400) you have [the format sent internally](https://community.frontity.org/t/google-tag-manager-package/1400/18) just in case you need it for your [own customizations](https://github.com/frontity/docs/issues/262#issuecomment-822426997)
{% endhint %}

### `actions.analytics.event`

If `@frontity/google-tag-manager-analytics` is configured and enabled for *events* in `state.analytics.events`, every time you call the method `actions.analytics.event()` from any of your React components, the proper tracking info will be sent to Google Tag Manager.

The `actions.analytics.event()` must receive an event object with the following properties.

| Name          | Type   | Required | Description                                                                         |
| ------------- | ------ | -------- | ----------------------------------------------------------------------------------- |
| **`name`**    | string | yes      | The value of this property is mapped to the `event` field of the object sent to GTM |
| **`payload`** | object | yes      | Event payload.                                                                      |

You can add any info you want in the `payload` object.

These values will be transfomed (by this package) into the proper format before sending the data to Google Tag Manager


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://api.frontity.org/frontity-packages/features-packages/analytics/google-tag-manager-analytics.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.