👉 Implementing the Transaction tag in the Settings

AB Tasty lets you save the data related to transactions made on your website (e.g. transaction amounts, payment methods, number of items purchased, etc.), along with information related to the purchased items (average cart value, item price, etc.). 
To send transaction data to AB Tasty and display it in the reports, you must implement your transaction tag.
This page enables you to easily implement your transaction tag: simply indicate where to find the transaction data. The transaction tag will be automatically embedded in the generic tag. However, you still have the option to implement your transaction tag directly into the source code of your confirmation page.
For more information on the transaction tag, refer to Installing the transaction tag.

⭐ Good to know

When implementing the Transaction tag directly in the Settings, you don't need to implement it again into your source code.

 

📋 Prerequisites

To configure the transaction tag according to your environment and perform quality control, you must be able to complete the purchase path to the order confirmation page, in order to access the variables that contain the information associated with the transaction.
It is often possible in a preprod environment, or with the selection of a subsequent payment method (eg: check), or with a payment card dedicated to QA, ... etc.
You have the possibility to delegate this setup to AB Tasty, please contact your CSM with at least, one of these informations:

• Payment method (real or not) and procedure to cancel the order if necessary.
• Copy of the HTML of an order confirmation page (arrival url just after an order) which contains the variables associated with the transaction (article number, reference, price, etc.).

⚙️ Configuration

You can implement your transaction tag using one of the three following methods:

• Datalayer mode: by declaring the variables from your Datalayer containing the transaction related information.
• Selector mode: by declaring the CSS selectors containing the transaction related information.
• Expert mode: by completing the code snippet.

⭐ Good to know

To use the Datalayer mode, you first need to integrate your Data Layer into your AB Tasty account settings. The following Datalayers are supported: Google Tag Manager, TagCommander and Tealium. 

Depending on the specified settings, a JavaScript code is created and will be automatically included in the AB Tasty tag. This code is updated each time the configuration is modified.
First, you need to create an affiliation, which coincides with the name you assigned to your transaction tag. The affiliation, referred to as ta, will appear in the list of goals to be configured in the campaign creation flow, to be visible in your campaign report.

For each affiliation, you can specify the URL(s) of your website on which the transaction information is available, such as the confirmation page. If you don’t specify any URLs, all URLs will be targeted.

You can create as many affiliations as you want and edit and delete them. Then, you need to select the method with which you want to implement your transaction tag: 

 

Datalayer mode

This method enables you to implement your transaction tag based on the variables defined/configured in your Datalayer.
For each mandatory field, you need to enter the name of the key that will be extracted from the corresponding variable. These keys can be found in your Datalayer. 
For example, to fill in the transaction ID, you need to enter the key that matches to the transaction ID configured in your Datalayer. For example, in your Datalayer, if the transaction is available in the "order_id" key with a matching value of "OD564", this means that you need to enter “order_id” in the transaction ID field.

For more information on the Datalayer, refer to Integrating your Data layer into your AB Tasty account. 

 

Selector mode

This method is useful if the transaction data is available directly on the code of your confirmation page. In this case, you need to fill in each field with the matching CSS selector that can be used in the document.querySelector function.

⭐ Good to know

The item count number (icn) coincides with the total number of items purchased during the transaction. It can be calculated using three different methods:

• If your key (Datalayer mode) or selector (Selector mode) contains the total number of purchased items, select Default.
• If your key or selector contains unitary purchased items, select Count.
• If your key or selector contains the quantity of each purchased item, select Sum.

 

Expert mode

The Expert mode enables you to implement your transaction tag via a JavaScript code.
By default, there is a code example that you can edit and replace with your own data, available in your source code or Datalayer. You also need to apply the appropriate format to your values (string, float or integer) as described in our developer portal. 

🚩 Heads up

The transaction affiliation/name (ta), transaction id (tid), transaction revenue (tr) and item count number (icn) must be declared during transaction tag implementation. The other settings are optional, however we recommend configuring them also in order to enable the application of matching filters in the reports later on. 

 

Adding purchased items data

Information related to the purchased items can be linked to each transaction in order to apply matching filters in the campaign reports or to use purchase related targeting criteria. 
Purchased items data can be collected via the 3 available methods: Datalayer, Selector or Expert. 

Datalayer and Selector modes

1. First, select Array of items as optional value and enter the key or selector corresponding to the array of objects of all items purchased during the transaction.
   
   

   In the above example, all items related data are stored in the “transactionProducts” array of the datalayer, in the purchase confirmation page.
   
   

2. Click Add optional value:
   All the data corresponding to items characteristics appear as additional fields where you can insert the datalayer key or selector corresponding to item name, price, quantity, id and category:
   
   

   In this example, on the data layer, the item name can be found in the “name” key, the id in the “sku” key, and so on.
   
   
   

Expert mode

To add the purchased items data in the Expert mode, apply the following steps: 

1. Complete the variable corresponding to “__TRANSACTION _ITEMS_ARRAY__”.
2. Complete all the items characteristics with their corresponding variables in tid, in, ip, iq, ic and iv. 
   
   

Preview

The Preview enables you to verify that your affiliation/transaction tag has been correctly configured by showing the latest transactions registered on your website.
The Transaction Tag Generator uses Universal collect data, which is why, after you have implemented your transaction tag, it may take a few hours for the first transactions to be visible in the Preview.
For each transaction, the values matching the keys specified in your transaction tag are displayed:

Debug

You can enable the “Display console logs” option in order to debug and verify that a transaction event is sent correctly to the data collect. 

Once activated, the validation information will be visible on your browser console.

Need additional information?

Submit your request at [e-mail]

Always happy to help!