Analytics Integration

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.

Analytics Event Listeners

These events can be tracked using the following Event Listeners.

Utiq Pop-Up Impression

Utilize this method to track when a user views the Utiq Pop-Up.

Parameters:

None (No additional parameters required.)

Returns:

utiq_popup_shown
undefined (only if the Utiq service has not yet been initialized)

Example usage:

JS

window.Utiq = window.Utiq || {};
window.Utiq.config = {
  listeners: {
    onConsentManagerStatusChanged: ({ status }) => {
      // Single callback action
      // status is 'utiq_popup_shown'
    }
  }
};

Utiq Pop-Up Acceptance

Utilize this method to track when a user accepts the Utiq Pop-Up.

Parameters:

None (No additional parameters required.)

Returns:

utiq_popup_accepted
undefined (only if the Utiq service has not yet been initialized)

Example usage:

JS

window.Utiq = window.Utiq || {};
window.Utiq.config = {
  listeners: {
    onConsentManagerStatusChanged: ({ status }) => {
      // Single callback action
      // status is 'utiq_popup_accepted'
    }
  }
};

Utiq Pop-Up Rejection

Utilize this method to track when a user rejects the Utiq Pop-Up.

Parameters:

None (No additional parameters required.)

Returns:

utiq_popup_rejected
undefined (only if the Utiq service has not yet been initialized)

Example usage:

JS

window.Utiq = window.Utiq || {};
window.Utiq.config = {
  listeners: {
    onConsentManagerStatusChanged: ({ status }) => {
      // Single callback action
      // status is 'utiq_popup_rejected'
    }
  }
};

Tag Manager Integrations

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.

Google Tag Manager Integration

For tech stacks leveraging Google Tag Manager, we’ve provided a ready-made script to integrate these Event Listeners seamlessly.

Step 1: Access Google Tag Manager

Go to the Google Tag Manager website.
Sign in to your Google Tag Manager account using your Google credentials.

Step 2: Create a New Tag

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.

Step 3: Configure the 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.

JS

<script>
window.Utiq = window.Utiq || {};
window.Utiq.config = {
  listeners: {
    onConsentManagerStatusChanged: ({ status }) => {
      window.dataLayer.push({
        'event': 'consentStatusChanged',
        'eventAction': status,
        'eventCategory': status,
        'eventLabel': status
      });
    }
  }
};
(function () {
  const s = document.createElement("script")
  s.type = 'text/javascript';
  s.src = "https://utiq.example.com/utiqLoader.js"
  document.head.appendChild(s)
})();
</script>

Step 4: Tag Triggering

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.

Step 5: Save the Tag

After configuring the trigger, click on the Save and go back to the tag setup by clicking the “X” mark.

Step 6: Define Trigger Conditions for Utiq Events

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.

Step 7: Leverage Triggers to Make Calls to Your Analytics Tool

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.

Step 8: Publish the Changes

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.

Step 9: Verify the Implementation

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.

Tealium iQ Integration

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.

Step 1: Access Tealium iQ Dashboard

Log in to your Tealium iQ account.
Select the appropriate profile for your website.

Step 2: Create a New Extension

In the Tealium iQ dashboard, navigate to the Extensions tab.
Click on Add Extension.
Choose JavaScript Code as the extension type.

Step 3: Configure the Extension

Give your extension a descriptive name, such as “Utiq Analytics Integration”.
Paste the Utiq Analytics Integration script found below into the JavaScript Code field. This script contains the necessary code to track Utiq Pop-Up events.

JS

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

Step 4: Save and Publish the Extension

After pasting the script, click Save to save the extension. Next, click Publish to publish your changes.

Step 5: Verify the Implementation

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.

Step 6: Sending Events to Analytics Tool

After capturing Utiq Pop-Up events using the Tealium iQ integration, you need to configure tags to send these events to your analytics tool.

Step 7: Identify Your Analytics Tool

Determine the specific analytics tool you’re using, as the integration methods can vary.

Step 8: Create Tags in Tealium iQ

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.

Step 9: 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 Container” tag or select a pre-built tag template for your analytics tool.

Step 10: 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.

Step 11: Load Rules

In the “Tag Configuration” section of each tag’s configuration, select the desired load rule.

Step 12: Testing and Debugging

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.

Step 13: Publish the Changes

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.

Step 14: Verify the Implementation

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.