Event Listeners

Event listeners are a callbacks that can be added to the configuration in order to subscribe to the events that are called on specific actions. Currently, there are 5 types of events that can be subscribed to:

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:

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:

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:

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

OR

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

Usage with dynamic assignment:

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:

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

OR

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

Usage with dynamic assignment:

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:

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

OR

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

Usage with dynamic assignment:

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:

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

OR

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

Usage with dynamic assignment:

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

Usage with config:

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

OR

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

Usage with dynamic assignment:

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 }) => {
  // 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_accept
  • 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:

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

OR

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

Usage with dynamic assignment:

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