> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fingerprint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Tag Manager

[The Fingerprint Google Tag Manager integration](https://github.com/fingerprintjs/gtm-integration) is an open-source [tag template][template-link] you can manually import into [Google Tag Manager](https://support.google.com/tagmanager/answer/6102821). It allows you to add and manage the Fingerprint [JavaScript agent](/reference/v3/javascript-agent) script on your website without changing the website code or redeploying it.

* Supports all standard functionality of the JavaScript agent.
* Pushes data to the [GTM's data layer](https://developers.google.com/tag-platform/tag-manager/web/datalayer) which can be processed by other tags or by JavaScript code on your website.

<Warning>
  **Note: Google Analytics does not allow using browser fingerprints**

  The Google Analytics terms of service contain a [policy against using browser fingerprints](https://support.google.com/analytics/answer/9682282?hl=en\&ref_topic=2919631\&sjid=9027453856798034060-EU):

  *"You must not use device fingerprints or locally shared objects (e.g. Flash cookies, Browser Helper Objects, HTML5 local storage) other than HTTP cookies, or user-resettable device identifiers designed for use in measurement or advertising, in connection with Google Analytics."*

  Breaching the policy can lead to [suspending or terminating your access to Google services](https://policies.google.com/terms?hl=en-US#toc-problems). You can use the visitor ID provided by Fingerprint in other 3rd party tags and tools, but we advise against using it inside Google Analytics.
</Warning>

Assuming you have already [signed up for Fingerprint](https://dashboard.fingerprint.com/signup/) and your website already has Google Tag Manager [installed](https://developers.google.com/tag-platform/tag-manager/web), here is how to add a Fingerprint tag:

## 1. Import the Fingerprint GTM template

You can install the template manually from the integration's [GitHub repository][template-link].

1. [Download the template][template-link] and make sure it is saved as `template.tpl` not `template.tpl.txt`.
2. Open the Google Tag Manager workspace of your website.
3. Go to **Templates** and click **New** to create a new template.
4. To [import](https://developers.google.com/tag-platform/tag-manager/templates#export_and_import) the template, click the **More actions (⋮)** button in the top right corner, select **Import** and pick the downloaded `template.tpl` file.
5. Click **Save**.

## 2. Add a Fingerprint tag to your website

1. Go to **Tags** and click **New** to create a new tag.
2. Click **Choose a tag type** and under **Custom**, pick your imported **Fingerprint** template.
3. Configure the tag:
   1. Choose your **Tag type**.  **Load and Identify** loads the script and identifies the visitor right after the tag is triggered. This is the recommended option if you want to identify visitors on page initialization.
      > Note: If you want to identify visitors after an event (e.g. form submission) with minimum latency, you might want to separate loading the JavaScript agent from the identification request. In that case, you can create two separate Fingerprint tags:
      >
      > * First, with tag type **Load**, which is triggered on page initialization.
      > * Second, with tag type **Identify** which is triggered by another event. You can create your own [custom event trigger](https://support.google.com/tagmanager/answer/7679219?hl=en) and then fire it from a 3rd party tag or from your JavaScript code: `dataLayer.push({'event': 'identifyVisitor'});`
   2. Enter your [`public API key`](/reference/v3/js-agent-load-function#apikey) and [`region`](https://dev.fingerprintjs.com/reference/load-function#region).
   3. In the **Additional fields** section, you can optionally configure the  [`endpoint`](/reference/v3/js-agent-load-function#endpoint), [`scriptUrlPattern`](/reference/v3/js-agent-load-function#scripturlpattern) [`tag`](https://dev.fingerprintjs.com/reference/get-function#tag), [`linkedId`](https://dev.fingerprintjs.com/reference/get-function#linkedid), [extendedResult](https://dev.fingerprintjs.com/reference/get-function#extendedresult). You can change **Result custom name** to change the name of the `result` object in the *dataLayer*.\\
      <img src="https://mintcdn.com/fingerprint/TYcq-XM0A17l1fxD/images/6669a64-image.png?fit=max&auto=format&n=TYcq-XM0A17l1fxD&q=85&s=6f033f4e1864d6ce593b37d41b0244dc" alt="screenshot of tag configuration" width="929" height="523" data-path="images/6669a64-image.png" />
4. In the **Triggering** section, add a new trigger, for example:  **Initialization**.\\
   <img src="https://mintcdn.com/fingerprint/JTUbc3rQcwtp3hbV/images/324154f-Screenshot_2022-04-01_at_13.26.31.png?fit=max&auto=format&n=JTUbc3rQcwtp3hbV&q=85&s=fdca7c32f09b08d80cf222d071ca2034" alt="screenshot of trigger section" width="932" height="187" data-path="images/324154f-Screenshot_2022-04-01_at_13.26.31.png" />
5. Click **Save** to save your tag.
6. Click **Submit** and publish your workspace changes to your website.

If the tag is configured correctly, you will see identification events on your [Fingerprint dashboard](https://dashboard.fingerprint.com/).

## Using the Fingerprint result in custom JavaScript code

Fingerprint data can be accessed through the GTM's [`dataLayer`](https://developers.google.com/tag-platform/tag-manager/web/datalayer) API in your JavaScript code. It's important to check if the result data (specified by *Result custom name*) is already present.

```javascript theme={"theme":"github-dark-dimmed"}
window.dataLayer.push(function () {
  if (this.get("FingerprintJSProResult")) { // Make sure the page has already received result data
    const result = this.get("FingerprintJSProResult");
    console.log(JSON.stringify(result)); // Use Fingerprint result
  }
});
```

## Using the Fingerprint result in a custom variable

You can expose every piece of information provided in the `result` object as a [user-defined variable](https://support.google.com/tagmanager/answer/7683362?hl=en) and use it in the configuration fields of other tags. For example, you can use the [`visitorId`](/reference/v3/js-agent-get-function#visitorid)  in the metadata of 3rd party tag.

> Note: To expose the all the available properties, you need to select *Extended result* in the Fingerprint tag configuration.

1. Inside Google Tag Manager, go to **Variables**, and click **New** to create a new user-defined variable.

2. Select the **Data Layer Variable** type.

3. Name your variable, for example `VisitorID`.

4. Set **Data Layer Variable Name** to `FingerprintJSProResult.visitorId`. The data layer properties format follows the [result format](https://dev.fingerprintjs.com/reference/get-function#extendedresult) provided by the JavaScript agent.

5. Click **Save** to create the variable.

<img src="https://mintcdn.com/fingerprint/TYcq-XM0A17l1fxD/images/7016e89-image.png?fit=max&auto=format&n=TYcq-XM0A17l1fxD&q=85&s=a3ab47d3deadd38a8e7dacc6d38f3665" alt="screenshot of variable configuration" width="932" height="460" data-path="images/7016e89-image.png" />

Now you can use the `{{VisitorID}}` variable in the configuration of 3rd party tags within your container. However, the tags need to wait for the Fingerprint `result` data:

1. Add a new Trigger to the 3rd party tag.
2. In the tag's configuration, add a new *Firing Trigger*, choose *Custom Event*, and enter `FingerprintJSPro.identified`.

<img src="https://mintcdn.com/fingerprint/JTUbc3rQcwtp3hbV/images/25bea14-image.png?fit=max&auto=format&n=JTUbc3rQcwtp3hbV&q=85&s=a36bef66b8c005e9fd90e638795de0fc" alt="screenshot of trigger configuration" width="940" height="316" data-path="images/25bea14-image.png" />

For testing purposes, you can just create a [Custom HTML tag](https://support.google.com/tagmanager/answer/6107167?hl=en#) logging the variable to the console:

```html theme={"theme":"github-dark-dimmed"}
<script>
  console.log({{VisitorID}}) // You can use the variable inside the configuration of any tag
</script>
```

## Code and documentation

You can find the [code and technical documentation](https://github.com/fingerprintjs/gtm-integration) in the official GitHub repository.

## Limitations

Some advanced JavaScript agent properties (`storageKey`) are not currently supported.  If you need to use these features, please contact [support](mailto:support@fingerprintjs.com).

Ad-blocking browser extensions such as AdBlock, uBlock Origin, etc., can block all scripts served by Google Tag Manager, including Fingerprint. If this is a problem for your use case, see Google Tag Manager documentation for [Server-side tagging](https://developers.google.com/tag-platform/tag-manager/server-side) and [Custom domain configuration](https://developers.google.com/tag-platform/tag-manager/server-side/custom-domain).

[template-link]: https://github.com/fingerprintjs/gtm-integration/releases/download/v1.1.0/template.tpl