Google Tag Manager

The Fingerprint Pro Google Tag Manager integration is an open-source tag template you can manually import into Google Tag Manager. It allows you to add and manage the Fingerprint Pro JS Agent script on your website without changing the website code or redeploying it.

• Supports all standard functionality of the JS agent.
• Pushes data to the GTM's data layer which can be processed by other tags or by JavaScript code on your website.

Assuming you have already signed up for Fingerprint Pro and your website already has Google Tag Manager installed, here is how to add a Fingerprint Pro tag:

1. Import the Fingerprint Pro GTM template

You can install the template manually from the integration's GitHub repository.

1. Download the template 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 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 Pro 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 Pro 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 JS agent from the identification request. In that case, you can create two separate Fingperprint Pro 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 and then fire it from a 3rd party tag or from your JavaScript code: dataLayer.push({'event': 'identifyVisitor'});

   2. Enter your public API key and region.
   3. In the Additional fields section, you can optionally configure the endpoint, scriptUrlPattern tag, linkedId, extendedResult. You can change Result custom name to change the name of the result object in the dataLayer.
      
4. In the Triggering section, add a new trigger, for example: Initialization.
   
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 Pro dashboard.

Using the Fingerprint Pro result in custom JavaScript code

Fingerprint Pro's data can be accessed through the GTM's dataLayer API in your JavaScript code. It's important to check if the result data (specified by Result custom name) is already present.

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 FingerprintJS Pro result
  }
});

Using the Fingerprint Pro result in a custom variable

You can expose every piece of information provided in the result object as a user-defined variable and use it in the configuration fields of other tags. For example, you can use the 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 Pro 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 provided by the JavaScript agent.

5. Click Save to create the variable.

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 Pro 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.

For testing purposes, you can just create a Custom HTML tag logging the variable to the console:

<script>
  console.log({{visitorId}}) // You can use the variable inside the configuration of any tag
<script>

Using the Fingerprint Pro result in Google Analytics

Assuming you have the Google Analytics tag installed and the custom variable defined, you can pass the visitorId or other result data to Google Analytics and use them as dimensions.

1. In your Google Analytics tag configuration, add visitorId as a user property based on the {{visitorId}} custom variable.
   
2. Inside Google Analytics, go to Admin > Custom definitions > Create custom dimension
3. Name your custom dimension, for example visitorId.
4. Set Scope to User.
5. Set User property to the one you defined in Step 1, for example visitorId.
6. Click Save.

You can now usevisitorId as a dimension in your Google Analytics reports.

Code and documentation

You can find the code and technical documentation in the official GitHub repository.

Limitations

Some advanced JavaScript agent properties (tlsEndpoint, disableTls, storageKey) are not currently supported. If you need to use these features, please contact support.

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 and Custom domain configuration.