Event Listeners

Event listeners are callbacks that can be added to the configuration, or use the command queue to register calls to Utiq (if you are third party), in order to subscribe to events triggered based on specific actions, see below:

These can be set up together with the Utiq configuration using the listeners object including events’ names and their callback (or array of callbacks) with parameters.

Example setup:

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    eventName1: ({ params }) => {
      // Single callback action
    },
    eventName2: [
      ({ params }) => {
        // First callback action
      },
      ({ params }) => {
        // Second callback action
      }
    ]
  }
};

They can be also registered using the command queue in the Utiq.queue namespace.

JS

window.Utiq ||= {};
window.Utiq.queue ||= [];

// Store event handlers as variables
const eventHandler1 = ({ params } /*IF NEEDED*/) => {
    // Callback action for eventName1
};
const eventHandler2 = ({ params } /*IF NEEDED*/) => {
    // Callback action for eventName2
};

window.Utiq.queue.push(() => {
    // Add event listeners
    window.Utiq.API.addEventListener('eventName1', eventHandler1);
    window.Utiq.API.addEventListener('eventName2', eventHandler2);
});

You can remove events from command queue using the below approach.

CODE

window.Utiq.queue.push(() => {
    // Remove event listener eventName2
    window.Utiq.API.removeEventListener('eventName2', eventHandler2);
});

If you are the one invoking utiqLoader.js it would make sense to use the configuration approach. If you are a third party, it would make sense to use the command queue approach, ensuring you can interact with Utiq SDK, regardless of which script gets loaded first, avoiding race conditioning issues.

Events documentation is available below.

`onInitialised`

This event is dispatched when the Utiq is fully initialized on every page load or navigation.

Callback parameters:

none

Usage with config:

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onInitialised: () => {
      // Single callback action
    }
  }
};

OR

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onInitialised: [
      () => {
        // First callback action
      },
      () => {
        // Second callback action
      }
    ]
  }
};

Usage with command queue:

JS

window.Utiq ||= {};
window.Utiq.queue ||= [];

const handleInitialization = () => {
    // Callback action for onInitialised
};

window.Utiq.queue.push(() => {
    window.Utiq.API.addEventListener('onInitialised', handleInitialization);
});

`onEligibilityChecked`

This event is dispatched when user eligibility check information is performed for the current client sending it with the parameter. The check occurs on initial page load, when the eligibility is validated before the Utiq loads, and on the consent acceptance.

Callback parameters:

isEligible : boolean

Usage with config:

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onEligibilityChecked: ({ isEligible }) => {
      // Single callback action
    }
  }
};

OR

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onEligibilityChecked: [
      ({ isEligible }) => {
        // First callback action
      },
      ({ isEligible }) => {
        // Second callback action
      }
    ]
  }
};

Usage with command queue:

JS

window.Utiq ||= {};
window.Utiq.queue ||= [];

const handleEligibilityCheck = ({ isEligible }) => {
    // Callback action for onEligibilityChecked
};

window.Utiq.queue.push(() => {
    window.Utiq.API.addEventListener('onEligibilityChecked', handleEligibilityCheck);
});

`onConsentChanging`

This event is dispatched when the Utiq gets signal from the browser (or client) to change the consent status to the one held with the parameter. The fact that the event is dispatched does not mean the consent will be changed - only that the signal has been sent. Further flow execution can be stopped by e.g. feedback that the consent already has the specified value.

Callback parameters:

isConsentGranted : boolean

Usage with config:

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onConsentChanging: ({ isConsentGranted }) => {
      // Single callback action
    }
  }
};

OR

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onConsentChanging: [
      ({ isConsentGranted }) => {
        // First callback action
      },
      ({ isConsentGranted }) => {
        // Second callback action
      }
    ]
  }
};

Usage with command queue:

JS

window.Utiq ||= {};
window.Utiq.queue ||= [];

const handleConsentChange = ({ isConsentGranted }) => {
    // Callback action for onConsentChanging
};

window.Utiq.queue.push(() => {
    window.Utiq.API.addEventListener('onConsentChanging', handleConsentChange);
});

`onConsentUpdateFinished`

This event is dispatched when Utiq consent status update has finished to the one held with the parameter.

Callback parameters:

isConsentGranted : boolean

Usage with config:

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onConsentUpdateFinished: ({ isConsentGranted }) => {
      // Single callback action
    }
  }
};

OR

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onConsentUpdateFinished: [
      ({ isConsentGranted }) => {
        // First callback action
      },
      ({ isConsentGranted }) => {
        // Second callback action
      }
    ]
  }
};

Usage with command queue:

JS

window.Utiq ||= {};
window.Utiq.queue ||= [];

const handleConsentUpdateFinished = ({ isConsentGranted }) => {
    // Callback action for onConsentUpdateFinished
};

window.Utiq.queue.push(() => {
    window.Utiq.API.addEventListener('onConsentUpdateFinished', handleConsentUpdateFinished);
});

`onConsentManagerStatusChanged`

The event is dispatched each time the status of consent is changed. The possible values can be:

utiq_popup_shown
utiq_popup_accepted
utiq_popup_rejected

The event is dispatched on the following situations:

when consent manager popup is shown to the user (utiq_popup_shown).
when consent manager popup is accepted (utiq_popup_accepted).
when consent manager popup is rejected (utiq_popup_rejected).

Callback parameter:

status : string

Usage with config:

JS

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

OR

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onConsentManagerStatusChanged: [
      ({ status }) => {
        // First callback action
      },
      ({ status }) => {
        // Second callback action
      }
    ]
  }
};

Usage with command queue:

JS

window.Utiq ||= {};
window.Utiq.queue ||= [];

const handleConsentManagerStatusChange = ({ status }) => {
    // Callback action for onConsentManagerStatusChanged
};

window.Utiq.queue.push(() => {
    window.Utiq.API.addEventListener('onConsentManagerStatusChanged', handleConsentManagerStatusChange);
});

`onIdsAvailable`

This event is dispatched when Utiq’s mtid and atid are available for use and provides them via its parameters. It happens when the full Utiq flow is executed successfully and on the subsequent page loads when the IDs are already set up.

Callback parameters:

mtid : string
atid : string
attrid : string
category : string

category will return ‘mobile’ or ‘fixed’, to differentiate if Utiq IDs are generated based the mobile connection, or the fixed (household) connection.

Usage with config:

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onIdsAvailable: ({ mtid, atid, attrid, category }) => {
      // Single callback action
    }
  }
};

OR

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onIdsAvailable: [
      ({ mtid, atid, attrid, category }) => {
        // First callback action
      },
      ({ mtid, atid, attrid, category }) => {
        // Second callback action
      }
    ]
  }
};

Usage with command queue:

JS

window.Utiq ||= {};
window.Utiq.queue ||= [];

const handleIdsAvailable = ({ mtid, atid, attrid, category }) => {
    // Callback action for onIdsAvailable
};

window.Utiq.queue.push(() => {
    window.Utiq.API.addEventListener('onIdsAvailable', handleIdsAvailable);
});

`onFlowCompleted`

This event is dispatched when Utiq has completed its flow, either user was eligible and accepted/rejected, user had accepted/rejected on previous session, or user was not eligible.

Use case would be to use this event listener if you want to call other solutions as soon as Utiq flow ends, e.g. not calling Prebid after CMP but wait to call it when this event listener fires.

Callback parameters:

none

Usage with config:

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onFlowCompleted: () => {
      // Single callback action
    }
  }
};

OR

JS

window.Utiq ||= {};
window.Utiq.config = {
  listeners: {
    onFlowCompleted: [
      () => {
        // First callback action
      },
      () => {
        // Second callback action
      }
    ]
  }
};

Usage with command queue:

JS

window.Utiq ||= {};
window.Utiq.queue ||= [];

const handleFlowCompleted = () => {
    // Callback action for onFlowCompleted
};

window.Utiq.queue.push(() => {
    window.Utiq.API.addEventListener('onFlowCompleted', handleFlowCompleted);
});