In our Analytics integration guide, we provide methods to track essential Utiq Pop-Up events, including Pop-Up Impressions, Pop-Up Acceptance, and Pop-Up Rejections.
These events can be tracked using the following Event Listeners.
Utilize this method to track when a user views the Utiq Pop-Up.
Parameters:
Returns:
Example usage:
window.Utiq = window.Utiq || {};
window.Utiq.config = {
listeners: {
onConsentManagerStatusChanged: ({ status }) => {
// Single callback action
// status is 'utiq_popup_shown'
}
}
};
Utilize this method to track when a user accepts the Utiq Pop-Up.
Parameters:
Returns:
Example usage:
window.Utiq = window.Utiq || {};
window.Utiq.config = {
listeners: {
onConsentManagerStatusChanged: ({ status }) => {
// Single callback action
// status is 'utiq_popup_accepted'
}
}
};
Utilize this method to track when a user rejects the Utiq Pop-Up.
Parameters:
Returns:
Example usage:
window.Utiq = window.Utiq || {};
window.Utiq.config = {
listeners: {
onConsentManagerStatusChanged: ({ status }) => {
// Single callback action
// status is 'utiq_popup_rejected'
}
}
};
To integrate the above Event Listeners with various Tag Managers, we have implemented ready-made scripts that can be copy-pasted and used in your analytics implementation.
For tech stacks leveraging Google Tag Manager, we’ve provided a ready-made script to integrate these Event Listeners seamlessly.
Go to the Google Tag Manager website.
Sign in to your Google Tag Manager account using your Google credentials.
Once logged in, select the appropriate container for your website if you have multiple containers.
In the container, click on Tags in the left sidebar.
Click the New button to create a new tag.
Give your tag a descriptive name, such as “Utiq Analytics Integration”.
In the Tag Configuration section, select Custom HTML.
Paste the Utiq Integration script found below into the HTML field. This script contains the necessary code to track Utiq Pop-Up events and send data to the dataLayer.
<script>
window.Utiq = window.Utiq || {};
window.Utiq.config = {
listeners: {
onConsentManagerStatusChanged: ({ status }) => {
window.dataLayer.push({
'event': 'consentStatusChanged',
'eventAction': status,
'eventCategory': status,
'eventLabel': status
});
}
}
};
(() => {
const s = document.createElement("script")
s.type = 'text/javascript';
s.src = "https://utiq.example.com/utiqLoader.js"
document.head.appendChild(s)
})();
</script>
In the Triggering section, click to configure the trigger for this tag.
Either create a new Trigger based on your specific Events or from the Choose a Trigger list, select All Pages.
After configuring the trigger, click on the Save and go back to the tag setup by clicking the “X” mark.
In the Triggers section, of the left Menu, click to configure the trigger for the Utiq events.
To create a new trigger, click the New button in the Triggers section.
Give your trigger a descriptive name related to the specific event it’s tracking (e.g., “Utiq Pop-Up Impressions”).
In the trigger configuration, select the event that corresponds to the Utiq event. If you are using the script provided earlier, you should select Custom Event.
In the “This trigger fires on” section, enter the event name as used in your script. For example, if you are tracking Impressions, enter “utiq_popup_shown”.
Click “Save” to create the trigger.
Repeat this process to create triggers for other Utiq events (e.g., “utiq_popup_accepted” and “utiq_popup_rejected”). Each trigger should correspond to a specific event you want to track.
In this step, you’ll use the triggers you’ve set up in Google Tag Manager to send data to your analytics collection tool. The exact process may vary depending on the analytics tool you’re using, so the instructions here are kept generic.
Identify Your Analytics Tool:
Determine the specific analytics collection tool you’re using, as the integration methods can vary.
Create Tags in Google Tag Manager:
To send data to your analytics tool, you’ll need to create tags in Google Tag Manager. These tags are responsible for transmitting information to your analytics tool. Each tag should be associated with a particular Utiq event, such as Impressions, Acceptance, or Rejections.
Configure Tag Types:
Depending on your analytics tool, choose the appropriate tag type that matches the tool’s requirements. For example, you might need to use a “Custom HTML” tag or select a pre-built tag template for your analytics tool.
Tag Configuration:
In the configuration of each tag, specify the necessary parameters and settings required by your analytics tool. This typically includes details like event names, event categories, and any additional metadata specific to the events you’re tracking.
Trigger Assignment:
In the “Triggering” section of each tag’s configuration, select the corresponding trigger you set up in previous steps. Assign each tag to the appropriate trigger. For example, if you have a tag for tracking Impressions, assign it to the “Utiq Pop-Up Impressions” trigger.
Testing and Debugging:
Test your configuration in Google Tag Manager’s preview mode to ensure that the tags are firing correctly based on your triggers. Use this testing phase to verify that the data you want to collect is being sent to your analytics tool.
Be sure to use the event names and labels consistent with your analytics tool’s requirements. The event names used in Google Tag Manager should match the event tracking names in your analytics tool.
Please note that the specific steps for configuring tags and sending data to your analytics collection tool may vary depending on the tool you are using. You may need to consult your analytics tool’s documentation or support resources for detailed integration instructions specific to your tool.
Once you’ve configured the tag and its triggers, click the “Save” button at the top of the page.
After saving, click the “Submit” button to submit your changes for review.
In the “Submit Version” dialog, provide a name and description for your changes, then click “Publish” to make the changes live on your website.
After publishing, ensure that your website is correctly set up with Google Tag Manager. You may need to refresh your website or navigate to a page where the Utiq Pop-Up is expected to appear to trigger the events.
Monitor your Google Tag Manager account to confirm that the tags are firing as expected. You can use the GTM preview mode to check if your tags are working correctly.
That’s it! You’ve successfully implemented the Utiq Analytics Integration script within Google Tag Manager to track Utiq Pop-Up events. Be sure to test and monitor your setup to confirm that data is being collected and sent to your data collection tool as intended.
To integrate the above Event Listeners with Tealium iQ Tag Manager, we’ve provided a ready-made script that can be easily implemented in your analytics setup.
window.Utiq = window.Utiq || {};
window.Utiq.config = {
listeners: {
onConsentManagerStatusChanged: ({ status }) => {
utag.link({
'tealium_event': status
});
}
}
};
(() => {
const s = document.createElement("script")
s.type = 'text/javascript';
s.src = "https://utiq.example.com/utiqLoader.js"
document.head.appendChild(s)
})();
After pasting the script, click Save to save the extension. Next, click Publish to publish your changes.
Ensure that your website is correctly set up with Tealium iQ. You may need to refresh your website or navigate to a page where the Utiq Pop-Up is expected to appear to trigger the events.
Monitor your Tealium iQ account to confirm that the events are being captured. You can use Tealium’s debugging tools to check if your script is working as expected.
After capturing Utiq Pop-Up events using the Tealium iQ integration, you need to configure tags to send these events to your analytics tool.
Determine the specific analytics tool you’re using, as the integration methods can vary.
To send data to your analytics tool, you’ll need to create tags in Tealium iQ. These tags are responsible for transmitting information to your analytics tool. Each tag should be associated with a particular Utiq event, such as Impressions, Acceptance, or Rejections.
Depending on your analytics tool, choose the appropriate tag type that matches the tool’s requirements. For example, you might need to use a “Custom Container” tag or select a pre-built tag template for your analytics tool.
In the configuration of each tag, specify the necessary parameters and settings required by your analytics tool. This typically includes details like event names, event categories, and any additional metadata specific to the events you’re tracking.
In the “Tag Configuration” section of each tag’s configuration, select the desired load rule.
Test your configuration in Tealium iQ’s preview mode to ensure that the tags are firing correctly based on your load rules. Use this testing phase to verify that the data you want to collect is being sent to your analytics tool.
Be sure to use the event names and labels consistent with your analytics tool’s requirements. The event names used in Tealium iQ should match the event tracking names in your analytics tool.
Once you’ve configured the tag and its load rules, click the “Save” button at the top of the page.
After saving, click the “Submit” button to submit your changes for review.
In the “Submit Version” dialog, provide a name and description for your changes, then click “Publish” to make the changes live on your website.
After publishing, ensure that your website is correctly set up with Tealium iQ. You may need to refresh your website or navigate to a page where the Utiq Pop-Up is expected to appear to trigger the events.
Monitor your Tealium iQ account to confirm that the tags are firing as expected. You can use Tealium iQ’s debugging tools to check if your tags are working correctly.
That’s it! You’ve successfully implemented the Utiq Analytics Integration script within Tealium iQ to track Utiq Pop-Up events and configured tags to send these events to your analytics collection tool. Test and monitor your setup to confirm that data is being collected and sent as intended.