Configuration Options

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.

`CMP`

If you need not to show Utiq separate pop-up, you will need to add CMP: "none" in Utiq.config. Use cases would be not showing pop-up on Manage Utiq page, on Privacy Policy page and/or if you want to run an A/B testing.

JS

window.Utiq = window.Utiq || {};
window.Utiq.config = {
  CMP: "none",
};

`customizationOptions`

You can configure the following Utiq pop-up customized styling: buttons background color, buttons text colors, buttons corners radius and pop-up text colors.

JS

window.Utiq = window.Utiq || {};
window.Utiq.config = {
  customizationOptions: {
    language: "en" // en, de, es, fr or it - optional
    websiteLogoUrl: "https://www.example.com/images/logo.svg",
    buttons: {
      bodyColor: '#ff0066',
      textColor: '#000000',
      radius: 5,
    },
    hyperlinks: {
      color: '#ebc807', // hex code - optional
      colorOnHover: '#ebc807', // hex code - optional
      isUnderlined: true, // true OR false - optional (default is false)
    },
    contentTextColor: '#000000',
    domainListAnchorMargin: 200 // Optional - use to optimize auto-scroll margin to domain list paragraph, specifically for Manage Utiq page
  },
};

All values are optional and their values default to Utiq’s default styling if not provided. Specifically they are as follows:

language - Change language dynamically, in case you have language selector in your site. If not set, the language will fallback to default.
websiteLogoUrl - Website logo to show on top right corner. This should be a public available URL, with logo in .svg format
buttons.bodyColor - Background color of the buttons. This should be a HEX color code, e.g. #ff0066.
buttons.textColor - Text color of the buttons. This should be a HEX color code, e.g. #000000.
buttons.radius - Corners radius of the buttons. This is a numeric value and represents the radius in pixels.
hyperlinks.color - Bespoke color for hyperlinks, if you face CSS issues. This should be a HEX color code, e.g. #ebc807.
hyperlinks.colorOnHover - Bespoke color for hyperlinks, on mouse-over, if you face CSS issues. This should be a HEX color code, e.g. #ebc807.
hyperlinks.isUnderlined - Bespoke underline for hyperlinks, if you face CSS issues. This should be a true or false, default is false.
contentTextColor - Text color of the pop-up content. This should be a HEX color code, e.g. #000000.
domainListAnchorMargin - Margin when clicking ‘other website(s)’ on pop-up and land on relevant paragraph in Manage Utiq. This should be in pixels, negative or positive.

`customUtiqHost`

The 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:

JS

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.

`consentManagerOrigin`

This 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:

JS

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

`consentManagerDataLayer`

When using the Utiq Consent Manager you can enable event tracking for the pop-up actions by adding a consentManagerDataLayer configuration entry to Utiq.config:

JS

window.Utiq = window.Utiq || {};
window.Utiq.config = {
  ...
  consentManagerDataLayer: true,
  ...
};

The following information is pushed into Utiq’s consentManagerDataLayer, based on performed actions:

When Consent Manager popup window is shown

:

JSON

```
{
  event_name: 'page_view',
  event_action: 'show',
  event_category: 'consent',
  event_label: 'consent_window_show'
}
```

When the “Accept” button is clicked

:

JSON

```
{
  event_name: 'ui_interaction',
  event_action: 'click',
  event_category: 'consent',
  event_label: 'accepted'
}
```

When the “Reject” button is clicked

:

JSON

```
{
  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.

`integrations`

You can configure Utiq SDK for various integration options with other marketing solutions.

JS

window.Utiq = window.Utiq || {};
window.Utiq.config = {
  integrations: {
    disableGoogleSecureSignals: true // If not set, false by default
  }
};

disableGoogleSecureSignals - Utiq SDK automatically sends adtechpass as Google Secure Signal to Google Ad Manager (GAM). If you don’t want Utiq SDK to send adtechpass, set to true