Event Listeners

Event listeners are a callbacks that can be added to the configuration 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 || {};
window.Utiq.config = {
  listeners: {
    eventName1: ({ params }) => {
      // Single callback action
    },
    eventName2: [
      ({ params }) => {
        // First callback action
      },
      ({ params }) => {
        // Second callback action
      }
    ]
  }
};

They can be also added dynamically to the Utiq.listeners namespace. Using this method, one need to redefine the Utiq from the root to the event name and push the callback to it:

JS

window.Utiq = window.Utiq || {};
window.Utiq.listeners = window.Utiq.listeners || {};
window.Utiq.listeners.eventName = window.Utiq.listeners.eventName || [];

window.Utiq.listeners.eventName.push(({ params }) => {
  // Callback action
});

⚠️You should always use the configuration approach and leave dynamic listeners assignment for situations where there is no other option

Events documentation is available below.

`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 || {};
window.Utiq.config = {
  listeners: {
    onEligibilityChecked: ({ isEligible }) => {
      // Single callback action
    }
  }
};

OR

JS

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

Usage with dynamic assignment:

JS

window.Utiq = window.Utiq || {};
window.Utiq.listeners = window.Utiq.listeners || {};
window.Utiq.listeners.onEligibilityChecked = window.Utiq.listeners.onEligibilityChecked || [];

window.Utiq.listeners.onEligibilityChecked.push(({ isEligible }) => {
  // Callback action
});

`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 || {};
window.Utiq.config = {
  listeners: {
    onInitialised: () => {
      // Single callback action
    }
  }
};

OR

JS

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

Usage with dynamic assignment:

JS

window.Utiq = window.Utiq || {};
window.Utiq.listeners = window.Utiq.listeners || {};
window.Utiq.listeners.onInitialised = window.Utiq.listeners.onInitialised || [];

window.Utiq.listeners.onInitialised.push(() => {
  // Callback action
});

`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 || {};
window.Utiq.config = {
  listeners: {
    onConsentChanging: ({ isConsentGranted }) => {
      // Single callback action
    }
  }
};

OR

JS

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

Usage with dynamic assignment:

JS

window.Utiq = window.Utiq || {};
window.Utiq.listeners = window.Utiq.listeners || {};
window.Utiq.listeners.onConsentChanging = window.Utiq.listeners.onConsentChanging || [];

window.Utiq.listeners.onConsentChanging.push(({ isConsentGranted }) => {
  // Callback action
});

`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 || {};
window.Utiq.config = {
  listeners: {
    onConsentUpdateFinished: ({ isConsentGranted }) => {
      // Single callback action
    }
  }
};

OR

JS

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

Usage with dynamic assignment:

JS

window.Utiq = window.Utiq || {};
window.Utiq.listeners = window.Utiq.listeners || {};
window.Utiq.listeners.onConsentUpdateFinished =
    window.Utiq.listeners.onConsentUpdateFinished || [];

window.Utiq.listeners.onConsentUpdateFinished.push(({ isConsentGranted }) => {
  // Callback action
});

`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 || {};
window.Utiq.config = {
  listeners: {
    onIdsAvailable: ({ mtid, atid, attrid, category }) => {
      // Single callback action
    }
  }
};

OR

JS

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

Usage with dynamic assignment:

JS

window.Utiq = window.Utiq || {};
window.Utiq.listeners = window.Utiq.listeners || {};
window.Utiq.listeners.onIdsAvailable = window.Utiq.listeners.onIdsAvailable || [];

window.Utiq.listeners.onIdsAvailable.push(({ mtid, atid, attrid, category }) => {
  // Callback action
});

`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 || {};
window.Utiq.config = {
  listeners: {
      onConsentManagerStatusChanged: ({ status }) => {
      // Single callback action
    }
  }
};

OR

JS

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

Usage with dynamic assignment:

JS

window.Utiq = window.Utiq || {};
window.Utiq.listeners = window.Utiq.listeners || {};
window.Utiq.listeners.onConsentManagerStatusChanged = window.Utiq.listeners.onConsentManagerStatusChanged || [];

window.Utiq.listeners.onConsentManagerStatusChanged.push(({ status }) => {
  // Callback action
});

`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 || {};
window.Utiq.config = {
  listeners: {
    onFlowCompleted: () => {
      // Single callback action
    }
  }
};

OR

JS

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

Usage with dynamic assignment:

JS

window.Utiq = window.Utiq || {};
window.Utiq.listeners = window.Utiq.listeners || {};
window.Utiq.listeners.window.Utiq = window.Utiq || {};
window.Utiq.listeners = window.Utiq.listeners || {};
window.Utiq.listeners.onFlowCompleted = window.Utiq.listeners.onFlowCompleted || [];

window.Utiq.listeners.onFlowCompleted.push(() => {
  // Callback action
});