Integration with the Utiq service is achieved by including the Utiq loader script (utiqLoader.js).
The loader script is made available at the Utiq subdomain of your website, e.g. if your website’s domain is example.com then the loader script will be hosted at https://utiq.example.com/utiqLoader.js.
The loader script is responsible for:
utiqConsentManager.js).mtid) and adtechpass (atid) tokens in Local Storage.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.
To incorporate the Utiq script into your website, various integration methods are available, ensuring compatibility with diverse setups. Whether utilizing a Tag Manager like GTM, Adobe, or Tealium IQ, or directly embedding the script through custom HTML or a script wrapper function, the following examples illustrate straightforward implementation.
For Tag Manager integration, create a new custom HTML tag and inject the Utiq loader script using a script wrapper function. The example below demonstrates how to achieve this using JavaScript
(() => {
const s = document.createElement("script")
s.type = 'text/javascript';
s.src = "https://utiq.example.com/utiqLoader.js"
document.head.appendChild(s)
})();
<script>
window.Utiq = window.Utiq || {};
(function () {
var s = document.createElement("script");
s.type = 'text/javascript';
s.src = "https://utiq.example.com/utiqLoader.js";
document.head.appendChild(s);
})();
</script>
Alternatively, you can directly embed the Utiq loader script within your HTML code. Add the following line to your HTML file to initiate the integration:
<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 Configuration Options section.
The utiqLoader.js JavaScript should be loaded if and only if there is explicit consent given by the user for all purposes on the website’s main CMP popup, i.e., user clicks the “Accept All” button on the CMP (see the Consent Capture Journey).
This guide provides instructions on integrating Utiq with a Consent Management Platform (CMP) compliant with Transparency and Consent Framework (TCF 2.0 or greater version). The integration ensures that the Utiq script runs seamlessly based on user consent within the specified purposes defined by the TCF framework. To validate if your CMP is compliant with the Transparency and Consent Framework visit the (dedicated IAB page).
Note: In this document, various examples of user CMP permissions are provided. Brand/Publisher is responsible to determine the appropriate condition(s) (purposes, vendors, etc.) to fire Utiq script.
This scenario assumes that your website is utilizing a TCF compliant CMP. The provided code snippets below demonstrates how to integrate the Utiq script to run as soon as the user consents to the first and second purpose of TCF.
__tcfapi("addEventListener", null, function (e) {
var purposes = Object.keys(e.purpose.consents);
if (e.eventStatus != "cmpuishown" && purposes.indexOf("1") > -1 && purposes.indexOf("2") > -1 && ...) { // Select appropriate User Purposes to fire Utiq Script
(() => {
const s = document.createElement("script");
s.type = 'text/javascript';
s.src = "https://utiq.example.com/utiqLoader.js"; // Replace with the corresponding subdomain
document.head.appendChild(s);
})();
}
});
The provided snippets leverage the TCF API to listen for consent changes within the CMP. The script dynamically loads the Utiq script into the web page when the user consents to the defined purposes. These integrations enable a seamless and privacy-compliant execution of Utiq, respecting user preferences and privacy regulations.
For instances where a custom CMP solution is utilized, this integration approach provides a flexible and adaptable method to activate the Utiq script.
(function() {
var isUtiqInitialized = false;
var triggerUtiq = function() {
(() => {
if (!isUtiqInitialized) {
isUtiqInitialized = true;
const s = document.createElement("script");
s.type = "text/javascript";
// Replace with the corresponding subdomain
s.src = "https://utiq.example.com/utiqLoader.js";
document.head.appendChild(s);
}
})();
// Stop checking for the cookie
clearInterval(cookieCheckInterval);
// Remove event listener
btn && btn.removeEventListener("click", triggerUtiq);
};
// Checking if the cookie exists
var cookieCheckInterval = window.setInterval(function() {
// Replace the cookie name "all_cmp_accepted" and the cookie value "true" with the
// corresponding cookie name and value that represent that a user has accepted all cookies
if (document.cookie.indexOf("all_cmp_accepted=true") !== -1) {
triggerUtiq();
}
// You might want to adjust this interval time as needed
}, 100);
// Attaching event to button if it exists
// Replace the Element Selector "_some_element_selector" with the Element Selector representing the "Accept All" call to action (button) of your CMP.
var btn = document.getElementById("_some_element_selector");
if (btn) {
btn.addEventListener("click", triggerUtiq);
}
})();
The provided code snippet offers a customizable script that, when integrated into the CMP workflow, dynamically loads the Utiq script only when the user explicitly accepts all cookies. The script includes functionalities to check for the existence of a relevant consent cookie, ensuring that Utiq fires on all relevant pages once consent is granted. Additionally, it offers the capability to attach an event listener to a designated CMP button, enabling the seamless integration of Utiq into the user consent experience.