Google Tag Manager

Why use FingerprintJS Pro with Google Tag Manager

Google Tag Manager is a tag management system that allows you to quickly and easily update code fragments collectively known as tags on your website. It is a no-code solution for professionals managing features on their websites. FingerprintJS Pro GTM is an open-source tag that can be imported to the GTM manually.

All standard capabilities provided by the FingerprintJS Pro JavaScript agent can be performed with this tag. The tag pushes data to the GTM's data layer which can be processed by other tags or by custom website JavaScript.

Sample usage

This scenario describes adding the FingerprintJS Pro tag into your GTM container, and its configuration.

1. Import the template from the open-source repository.

2. Configure FingerprintJS Pro tag. Enter your public API key, region, and endpoint.

3. In the Additional fields section, you can optionally configure the tag, linkedId, and the Result custom name for the result object. Result custom name represents the result object in the dataLayer. You can also specify the extended result (the standard result is the default).

4. In the Triggering section add a new Firing Trigger e.g. Initialization.

How to use FingerprintJS Pro result in custom JavaScript code

FingerprintJS Pro's data can be accessed through the GTM's dataLayer API in your custom JavaScript code. It's important to check if the result data (specified by the Result custom name) has been already obtained, first.

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
  }
});

How to use FingerprintJS Pro result in a custom variable

Every piece of information provided in the result object can be exposed as a user-defined variable. Furthermore, it can be used in the configuration fields of other tags. Let's say you want to reuse the firstSeenAt timestamp in the metadata for a 3rd party tag.

Note: In the FingerprintJS Pro tag configuration, there must be selected the Extended result option to expose the firstSeenAt property.

1. In the GTM dashboard, go to the Variables section, and create a new user-defined variable. Select the Data Layer Variable type.

2. Enter FirstSeenAt as a variable name and specify the Data Layer Variable Name like FingerprintJSProResult.firstSeenAt.global. The dataLayer properties format follows the result's properties provided by the JavaScript agent. Save changes.

3. Now you can use the {{FirstSeenAt}} macro in the tag's settings within your container. The tag needs to wait for the result data. Add a new Trigger to the 3rd party tag. In the tag's configuration, add a new Firing Trigger, choose Custom Event, and enter FingerprintJSPro.loaded Event name.

Documentation

You can find the full documentation in the official GitHub repository.

Limitations

Some advanced JavaScript agent properties (tlsEndpoint, disableTls, storageKey, and scriptUrlPattern) are not currently supported. If you require to use these features in the GTM, please contact support.