JS events

AB Tasty's tag is dispatching some JavaScript events to the window or the document to give information to other scripts. These events can be used by anyone who wants to know what is happening on the tag.

Dispatching events

Tag reloading

:::caution Not available in window.ABTasty.eventState :::

If the option "Automatic reload of the framework" is activated in your account settings, the tag is dispatching the following at each start and reload.

Event name: resetActionTracking Event prefix: abtasty Main goal: The main goal of the event is to remove all the previous action tracking listeners used by the tag. Target element: document

Listen the event:

document.addEventListener('abtasty_resetActionTracking', () => {
  // do something...
});

Event name: consentValid Event prefix: abtasty Target element: window

Listen the event:

window.addEventListener('abtasty_consentValid', (event) => {
  console.log(event.detail);
  // do something...
});

Type event.detail:

Key

Type

Description

mode

string

The mode used by the tag to determine if the visitor gave his consent. Should be equal to window.ABTasty.accountData.accountSettings.waitForConsent.mode.

consentFor

array

List of rights accorded to our tag during the consent validation.

Mode possible values:

any_cookie: Tag waits until any cookie is added to website.
custom_js: Tag waits until the JavaScript set in the interface by the user returns true or has been resolved.
didomi: Tag waits until the Didomi SDK has registered the consent of the visitor.
specific_cookie: Tag waits until the specified cookie set in the interface by the user is added to the website with the corresponding value.
user_action: Tag waits until the user makes an action on the page. (scroll, click, ...).

ConsentFor possible value:

start: Our tag has the rights to start.
test: Our tag has the rights to start tests (A/B - multipages - multivariate).
perso: Our tag has the rights to start personalizations.
aa: Our tag has the rights to start A/A Tests.
patch: Our tag has the rights to start patches.
redirection: Our tag has the rights to start redirection campaigns.
storage: Our tag has the rights to store data in the cookies/localStorage/sessionStorage.
collect: Our tag has the rights to send collected information to AB The tasty collect named ariane.abtasty.com.
dmp: Our tag has the rights to use DMP information based the visitor Id.
geoloc: Our tag has the rights to fetch the complete geolocation of the visitor.

Executed Campaign

Every time a campaign is successfully executed, an event is sent with some useful information about the campaign.

Event name: executedCampaign Event prefix: abtasty Target element: window

Listen the event:

window.addEventListener('abtasty_executedCampaign', (event) => {
  console.log(event.detail);
  // do something...
});

Type event.detail:

Key

Type

Description

campaignId

integer

The ID of the executed campaign.

variationId

integer

The ID of the executed variation.

status

string

The status of the campaign. Possible values: accepted or accepted_by_redirection.

type

string

The type of the campaign. Possible values: ab, mpt, mvt, sp, mpp or mep.

Type details:

ab: Campaign is an A/B Test
mpt: Campaign is a Multipage test child
mvt: Campaign is a Multivariate test child
sp: Campaign is a Simple personalization child
mpp: Campaign is a Multipage personalization child
mep: Campaign is a Multiexperience personalization child
subsegment: Campaign is a personalization child

Tag executed

When the tag finishes executing all the features at least once, an event is dispatched. In case the tag is using an interval the event is dispatched after the first iteration of the interval. For criteria that are verified multiple times the event is dispatched once the tag verified them at least once.

Event name: tagContentExecuted Event prefix: abtasty Main goal: The main goal of the event is to say that the tag has been fully executed (at least once). Target element: window

Listen the event:

window.addEventListener('abtasty_tagContentExecuted', () => {
  // do something...
});

Tracking initialized

As soon as the tag defined the tracking method in the window, it will dispatch this event to let you know that you can use them. The global methods are:

Event name: trackingInitialized Event prefix: abtasty Main goal: This event is to alert you when the tracking methods are available to help you send a transaction hit or anything else. Target element: window

Listen the event:

window.addEventListener('abtasty_trackingInitialized', () => {
  // do something with window.abtasty.send() ...
});

Event state

For every JavaScript event dispatched by the tag you can find a status in window.ABTasty.eventState.

`eventState`

Type: Object

All the information about the dispatched or soon-to-be dispatched events.

window.ABTasty.eventState

An object with the name of the event (without the prefix) as key and eventState as value.

Type: eventState

Key

Type

Description

status

string

Status of the event. loading means that event has not been dispatched. complete means that event has been dispatched.

detail

array

The details linked to the event. Could contain multiple objects as some events are dispatched multiple times.

detail[]

object

The details of one event.

Example of code to listen event

Wait to send transaction

const removeListeners = () => {
  window.removeEventListener('abtasty_trackingInitialized', sendTransaction);
  document.removeEventListener('abtasty_resetActionTracking', removeListeners);
};

const sendTransaction = () => {
  window.abtasty.send('transaction', {
    tid: 'OD564', //Transaction ID
    ta: 'Purchase', //Transaction Affiliation - Name of the transaction goal
    tr: 15.47, //Transaction Revenue
    icn: 12, //Number of items
    // You can add all the data related to your transaction...
  });

  // Remove listener for SPA websites
  removeListeners();
};

if (
  typeof window.ABTasty !== 'undefined' &&
  typeof window.ABTasty.eventState !== 'undefined' &&
  !!window.ABTasty.eventState['trackingInitialized'] &&
  window.ABTasty.eventState['trackingInitialized'].status === 'complete'
  // You might also check if the user is on the purchase confirmation page
) {
  sendTransaction();
} else {
  window.addEventListener('abtasty_trackingInitialized', sendTransaction);

  // Remove listener for SPA websites
  document.addEventListener('abtasty_resetActionTracking', removeListeners);
}

Wait for specific campaign execution

const specificCampaignId = 123456;

const campaignExecuted = (detail) => {
  const campaignId = detail.campaignId;
  const campaignVariation = detail.variationId;
  console.log(`Campaign ${campaignId} has been executed with variation ${variationId}`);
}

if (
  typeof window.ABTasty !== 'undefined' &&
  typeof window.ABTasty.eventState !== 'undefined' &&
  !!window.ABTasty.eventState['executedCampaign'] &&
  window.ABTasty.eventState['executedCampaign'].status === 'complete'
) {
  window.ABTasty.eventState['executedCampaign'].detail.forEach((campaignDetail) => {
    if (campaignDetail.campaignId === specificCampaignId) campaignExecuted(campaignDetail);
  });
} else {
  window.addEventListener('abtasty_executedCampaign', (e) => {
    if (e.detail.campaignId === specificCampaignId) campaignExecuted(e.detail);
  });
}

Actionning events

Those events are another type of event that help you interacting with the Tag and request a specific action.

Targeting check or recheck

This CustomEvent allow you to start (or restart if yet done by the Tag) checking the targeting conditions or part of it for a specified campaign.

Event name: checkTargeting Event prefix: abtasty Main goal: Allowing external/custom scripts to start or restart the targeting check. Listen element: window

Actionning the event:

const detail = { campaignId: 123456, withUrl: false, shouldCheckAll: false };
const event = new CustomEvent('abtasty_checkTargeting', { detail: detail });
window.dispatchEvent(event);

Type event.detail:

Key

Type

Description

campaignId

integer

The ID of the campaign whose targeting will be checked.

withUrl

boolean

Defined if the Tag needs to check the URL targeting or not.

shouldCheckAll

boolean

Defined if the Tag should check all the targeting or only the one that could have changed since last check_*_.

* We split criteria that shouldn't change during the execution (URL, user-agent, geolocation, screen size...) from the one that may change (element, datalayer, events...).

The event can only be applied if specified campaign as one of the following status:

currently_checking
pending
target_by_event_pending
qa_parameters_rejected
target_pages_rejected
trigger_rejected
segment_rejected

:::caution You don't need to use this event after a URL change as the tag already reloads its targeting if the "automatic reload of the framework" (See settings) option is checked (default). :::

DataLayer last entry event

Event name: DLLastEntry Event prefix: abtasty Main goal: Activate data layer trigger to check last entry of data layer array. Listen element: window

This event is meant to be used when the standard trigger builder options (loading, periodical and custom event) are not possible to use. In some situations, DataLayer entries are added under specific conditions and it is not possible to catch and verify the last one that has been added (for example: DataLayer stacking up on each page with a single-page app).

To catch the last added entry, the abtasty_DLLastEntry event needs to be dispatched after the code responsible for updating the DataLayer.

:::caution make sure you fire the event after the tag has been executed (see topic above). :::

// the event should be dispatched immediately after DL has been updated
window.dispatchEvent(new Event('abtasty_DLLastEntry'));

This CustomEvent allows you to tell the tag that the visitor has granted consent for being tracked and exposed to campaigns by/from AB Tasty (depending on your account settings).

Event name: grantConsent Event prefix: abtasty Main goal: Granting consent to the tag. Listen element: window

Actionning the event:

const event = new CustomEvent('abtasty_grantConsent', {});
window.dispatchEvent(event);

Additional consent variable

Additionaly to these CustomEvents, you can also set the variable window.abtastyGrantConsent to true to grant consent at the initialization of the tag.

For example, if you are not sure if the AB Tasty tag is executed before or after the script granting consent, you could do:

const grantAbtConsent = () => {
  const event = new CustomEvent('abtasty_grantConsent', {});
  window.dispatchEvent(event);
};

// Check if tag has been executed
if (
  typeof window.ABTasty !== 'undefined' &&
  typeof window.ABTasty.eventState !== 'undefined' &&
  !!window.ABTasty.eventState['tagContentExecuted'] &&
  window.ABTasty.eventState['tagContentExecuted'].status === 'complete'
) {
  grantAbtConsent();
} else {
  // Wait for tag execution
  window.addEventListener('abtasty_tagContentExecuted', grantAbtConsent);
}

Or using a variable:

const event = new CustomEvent('abtasty_grantConsent', {});
window.dispatchEvent(event);
window.abtastyGrantConsent = true;

:::caution Be careful, the tag is checking the value of the variable only once, there is no loop on it so changing the value to false after tag execution is not going to revoke the consent. :::

This CustomEvent allows you to tell the tag that the visitor has revoked his consent and doesn't want to be tracked anymore by AB Tasty (depending on your account settings).

Event name: revokeConsent Event prefix: abtasty Main goal: Revoking consent of the tag. Listen element: window

Actionning the event:

const event = new CustomEvent('abtasty_revokeConsent', {});
window.dispatchEvent(event);

Bring Your Own ID check

This CustomEvent allows you to ask the tag to recheck if BYOID condition is correct. And if yes, continue to be executed.

Event name: checkByoid Event prefix: abtasty Main goal: Get the custom visitor ID and use it according to BYOID configuration. Listen element: window

Actionning the event:

const event = new CustomEvent('abtasty_checkByoid', {});
window.dispatchEvent(event);

PreviousTag API NextDebug Module

Last updated 1 month ago

Was this helpful?

Dispatching events

Tag reloading

Consent validation

Executed Campaign

Tag executed

Tracking initialized

Event state

eventState

Example of code to listen event

Wait to send transaction

Wait for specific campaign execution

Actionning events

Targeting check or recheck

DataLayer last entry event

Granting consent

Revoking consent

Bring Your Own ID check

`eventState`