# Google Tag Manager

> Load Nvivio and send custom events from Google Tag Manager with the Nvivio template, with the triggers, Consent Mode and how to check it works.

Already use Google Tag Manager? The Nvivio template loads Nvivio without pasting code, and sends custom events from the triggers you already have. It loads the same script as the line from [Install the script](https://nvivio.com/docs/install): your site's own build from nviv.io, smaller than 1 kB.

## What the template does

- **Load Nvivio** adds your site's script, `https://nviv.io/js/NV-XXXXXXX.js`, to the page. From then on the script does what it always does: pageviews, navigation in single-page apps, outbound links and downloads, time on page and scroll depth ([What the script does on its own](https://nvivio.com/docs/script#what-the-script-does-on-its-own)).
- **Custom event** sends one event with `nvivio.track()` when its trigger fires: a form sent, a purchase, a click on a button.
- **Permissions.** The template asks Tag Manager for as little as it needs: to load scripts from `https://nviv.io/js/` only, to use `window.nvivio`, and to read the consent state `analytics_storage`. It sends nothing itself and reads no data layer, cookies or page content.

## Add the template to your container

The template is not in Tag Manager's Community Template Gallery yet. Until it is, import it as a file:

1. Download [the Nvivio template](https://nvivio.com/downloads/nvivio-gtm-template.tpl) (`nvivio-gtm-template.tpl`).
2. In Tag Manager, open your container and go to **Templates**. Under **Tag Templates**, choose **New**.
3. In the template editor, open the menu (⋮) at the top right, choose **Import** and pick the file.
4. Choose **Save** and close the editor. The template is now in your workspace as **Nvivio**.

Once it is listed, **Templates › Tag Templates › Search Gallery** finds it under the name Nvivio.

## Load Nvivio on every page

1. Go to **Tags › New › Tag Configuration** and choose **Nvivio** under Custom.
2. **Tag type:** Load Nvivio.
3. **Site code:** your site's code, such as `NV-9Y5FVJQ`. It is in the line of code in **Settings › Installation**.
4. **Triggering:** All Pages.
5. Save the tag, and choose **Submit** to publish the container.

Had Nvivio in a Custom HTML tag or in your theme before? Remove it. If both stay, the first copy counts and the other stops, so no pageview counts twice ([Installed twice?](https://nvivio.com/docs/install#installed-twice)).

### Single-page apps

Do not add a History Change trigger. The script counts navigation through `history.pushState`, back and forward by itself, in React, Vue, Svelte and other single-page apps ([Single-page apps and hash routes](https://nvivio.com/docs/script#single-page-apps-and-hash-routes)). If the tag fires again anyway, it loads the script once and counts each page once.

## The fields

| Field | What it does |
|---|---|
| Tag type | **Load Nvivio** loads the script; use it once, on All Pages. **Custom event** sends one event when its trigger fires. |
| Site code | Your site's code, `NV-` and seven characters. Lowercase, and O for 0 or I and L for 1, work too. Only for Load Nvivio. |
| Cookie | When the script sets its cookie, for sites in cookie mode only. See [Consent](#consent). |
| Event name | The name of a custom event, such as `signup`: letters, digits, spaces, dot, colon, hyphen or underscore, up to 64 characters. |
| Properties | Up to 20 per event, each a name and a value. Names: letters, digits, dot, hyphen or underscore, up to 40 characters. Values: text up to 200 characters, a number, or true or false. |

The site code, the event name and the property values also take Tag Manager variables, for example a Data Layer Variable with the order value.

## Consent

**Without cookies**, the default, Nvivio sets no cookie and needs no consent and no cookie banner ([Privacy and GDPR](https://nvivio.com/docs/privacy#without-cookies-the-default)). So do not make the Nvivio tag wait for consent in its **Advanced Settings › Consent Settings**: a tag that waits for `analytics_storage` misses every visitor who declines or ignores your banner, while Nvivio would count them without a cookie. The **Cookie** field does nothing in this mode.

**In cookie mode** ([With one cookie](https://nvivio.com/docs/privacy#with-one-cookie-optional)), the script sets one cookie, `_nvivio_sid`, after consent. Until then it counts the visitor without the cookie, so no visit is lost. The **Cookie** field decides when consent is given:

| Cookie | What happens |
|---|---|
| Only when the page calls `nvivio.consent()` | The default, and what the script line does: your cookie banner calls `nvivio.consent()` itself. |
| When Consent Mode grants `analytics_storage` | Granted when the tag fires: the first pageview already carries the cookie. Not yet granted: the visitor is counted without it, and the cookie is set the moment your banner updates `analytics_storage` to granted. |
| Right away, without consent | Sets the cookie at once, like `data-consent="none"`. Only where you do not need consent. |

Tag Manager treats `analytics_storage` as granted while your page sets no consent state at all. Choose the Consent Mode option only when your cookie banner sets Consent Mode defaults, denied until the visitor chooses.

A visitor who [objected](https://nvivio.com/docs/privacy#visitors-can-object), or whose browser sends Global Privacy Control, is not counted, whatever the tag says.

## Custom events

1. Go to **Tags › New**, choose **Nvivio**, and set **Tag type** to Custom event.
2. **Event name:** for example `signup` or `purchase`.
3. **Properties:** add a row per property. A value can be a variable, such as the built-in Click Text or a Data Layer Variable with the order value.
4. **Triggering:** the moment to count, for example a Form Submission trigger, a Click trigger on your button, or a Custom Event trigger on a data layer event such as `purchase`.

Load Nvivio must be on the same page. An event that fires before the script has loaded waits, and is sent right after the first pageview, so a `purchase` pushed to the data layer as the page opens is not lost.

Events appear in **Reports › Events**, in the route of each visit and on [Live](https://nvivio.com/docs/live); make one a [goal](https://nvivio.com/docs/goals-and-funnels) with one click. Never send personal data, such as an email address or a name, in an event or its properties. See [Events, links and downloads](https://nvivio.com/docs/events) for events without Tag Manager.

## Check that it works

1. In Tag Manager, choose **Preview** and enter your site's address. Tag Assistant opens your site.
2. In Tag Assistant, the Nvivio tag is under **Tags Fired**. If it is under **Tags Not Fired**, check its trigger. If it **failed**, the script did not load: check the site code, and look in the browser console, where the template says why.
3. In Nvivio, open [Live](https://nvivio.com/docs/live) for the site: your visit appears within seconds, with the custom events you trigger. The installation page also switches to **It works** ([Check that it works](https://nvivio.com/docs/install#check-that-it-works)).
4. Choose **Submit** and **Publish** in Tag Manager. Until you publish, only your preview loads Nvivio.

Nvivio only accepts events from your [site's domains](https://nvivio.com/docs/settings#domains), so test on the real site, not on localhost.

## Good to know

- **Content-Security-Policy.** As with the script line, allow `https://nviv.io` in `script-src` and `connect-src`.
- **Your own endpoint.** The template cannot add attributes to the script tag, so `data-api` (events through a proxy on your own domain) is not available. Put the [script line](https://nvivio.com/docs/script#attributes) with `data-api` in a Custom HTML tag instead.
- **What the script measures**, such as outbound links, downloads and hash routes, is set in **Settings › What the script measures**, not in the tag. Changes reach your visitors within ten minutes, without publishing the container again.