The tag can be integrated using a Tag Manager such as GTM, Adobe or Tealium IQ using custom HTML or a script wrapper function that calls for the utiqLoader.js script.
Example of a tag injection using tag manager or a call:
(() => {
const s = document.createElement("script")
s.type = 'text/javascript';
s.src = "https://utiq.example.com/utiqLoader.js"
document.head.appendChild(s)
})();
Example of tag wrapping without a Tag Manager:
<script src="https://utiq.example.com/utiqLoader.js"></script>
Additional configuration options are available via Utiq.config object. Setting the configuration entries and their descriptions are explained in the next section.
The Utiq loader script can be configured using the Utiq.config object. The configuration object is a JavaScript object that can be set up before the Utiq loader script is loaded. The configuration object is available under the Utiq.config namespace.
All the configuration options below are optional and can be omitted if not needed.
customUtiqHostThe Utiq loader configuration automatically detects the currently accessed host for setting up connections and managing data. However, you can use a custom host for staging environments that do not fall under the CNAME setups created for existing Utiq domains. The customUtiqHost configuration entry allows the use of a host different from the one accessed when visiting a specific website.
Example:
window.Utiq = window.Utiq || {};
window.Utiq.config = {
customUtiqHost: "https://specified-utiq-domain",
};
In the setup above, all scripts and functions that would typically call https://accessed-domain will use https://specified-utiq-domain instead. This change requires a CNAME setup pointing to frontend.prod.utiq-aws.net. You can use this configuration for staging or test environments.
consentManagerOriginThis configuration option allows to specify a custom origin (string value) for the Utiq consent manager script. This is useful when the consent manager is hosted on a different domain than the one where the Utiq loader script is loaded from. The value must be a valid origin, e.g. https://subdomain.other-utiq-enabled-source-domain.com.
Example:
window.Utiq = window.Utiq || {};
window.Utiq.config = {
consentManagerOrigin: "https://subdomain.other-utiq-enabled-source-domain.com",
};
(() => {
const s = document.createElement("script")
s.type = 'text/javascript';
s.src = "https://utiq.main-domain.com/utiqLoader.js"
document.head.appendChild(s)
})();
consentManagerDataLayerWhen using the Utiq Consent Manager you can enable event tracking for the pop-up actions by adding a consentManagerDataLayer configuration entry to Utiq.config:
window.Utiq = window.Utiq || {};
window.Utiq.config = {
...
consentManagerDataLayer: true,
...
};
The following information is pushed into Utiq’s consentManagerDataLayer, based on performed actions:
1. When Consent Manager popup window is shown:
```
{
event_name: 'page_view',
event_action: 'show',
event_category: 'consent',
event_label: 'consent_window_show'
}
```
2. When the “Accept” button is clicked:
```
{
event_name: 'ui_interaction',
event_action: 'click',
event_category: 'consent',
event_label: 'accepted'
}
```
3. When the “Reject” button is clicked:
```
{
event_name: 'ui_interaction',
event_action: 'click',
event_category: 'consent',
event_label: 'rejected'
}
```
Please note, this implementation must adhere to the “Partner Privacy Requirements”. Specifically, the partner must ensure that this option is enabled only if the user has provided consent to analytics purposes in the Brand/Publisher’s CMP.