Transaction tag implementation

AB Tasty is able to collect transactional data thanks to our transaction tracking (transaction tag). This enables multiple possibilities, analyzing your campaigns through ROI, using the Social Proof Widget with transactional data, segment and target yours visitors based on their transactional behavior...

Installing the Transaction Tag

Using the Transaction Tag Generator

This is the recommanded way to install the transaction tracking on your website. You will either need to use the dataLayer mode, if the transactional data is available there. The selector mode, or the expert mode which will require someone to code the tracking following a specific format. More information can be found on our client documentation.

Datalayer Mode

This is the recommanded way. First, you'll need to setup your datalayer in your account settings as explained in this documentation.

After you enter your target URL, you can setup your variables. To enter them, you need to find a path to your variable from the datalayer variable defined previously. For instance, if you're using GTM, your default datalayer variable is dataLayer. This means we need to find a path to your properties from this variable.

For instance let's assume that you have an ecommerce property that holds your other variables like the transaction id, then the path will be ecommerce.transactionId. Notice that we skip the datalayer variable.

For items, the default path is the variable you defined for the items list. For instance ecommerce.products, then, each item property will be name for the name, etc.

Selector Mode

In this mode, you'll need to find specific CSS selectors that will match the data to send. Beware that we still expect you to follow the types for each of these properties as defined in this documentation.

Expert Mode

The expert mode requires someone technical to implement it from the start. The goal is to return an object that will contain all the properties that you want to collect.

If you don't want to send a property, as long as it is not a required property, you can remove it from the object.

Please be aware that adding this code without any modification won't work. Coding is required.

Installing it through a TMS or directly in your source code

Source code

If you desire to plug the transaction tracking in your source code directly, you'll need to make sure AB Tasty is loaded and executed before you trigger the transaction tracking. You can do this by waiting for an event to be dispatched on window or by looking at ABTasty.eventState.analyticsLoaded.status.

Here's an example of code you can reuse:

function removeListeners() {
  window.removeEventListener('abtasty_trackingInitialized', sendTransaction);
  document.removeEventListener('abtasty_resetActionTracking', removeListeners);
}

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

TMS

If you want to install the transaction tracking through a TMS, the idea is similar to installing it into your source code, but you'll need to map the data first to variables that you will be able to reuse in your code. Beware that some TMS will require you to write in ES5 compatible code, this means the code above won't work.

Here's one you can reuse:

function removeListeners() {
  window.removeEventListener('abtasty_trackingInitialized', sendTransaction);
  document.removeEventListener('abtasty_resetActionTracking', removeListeners);
}

function sendTransaction() {
  window.abtasty.send('transaction', {
    tid: VARIABLE_FOR_TRANSACTION_ID, //Transaction ID
    ta: 'Purchase', //Transaction Affiliation - Name of the transaction goal
    tr: VARIABLE_FOR_TRANSACTION_REVENUE, //Transaction Revenue
    icn: VARIABLE_FOR_TRANSACTION_ITEM_COUNT, //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);
}

Debugging

Cannot read properties of undefined (reading 'send')

If you find this error message, it means you didn't wait for the analytics to be ready before firing the transaction tracking. Please refer to an earlier part of this documentation.

Data is not sent in the network tab

Assuming the code should trigger on the correct page and the code does not contain any error:

Either the consent is not given in which case you won't see any ariane hits. Or the data does not to comply to the expected types. You can use the debug mode of the tag to help you debug this.