How to implement the Transaction tag

AB Tasty lets you save the data related to transactions on your website (e.g., transaction amounts, payment methods, number of purchased items, average cart value, item price, etc.).

This data is available in the reports of each campaign in the form of indicators or filters. Please refer to the article Campaign reportings for further information.

The first thing to know about the transaction tag is that it is not a tag itself (as the generic tag can be) but rather a revenue tracker that must be placed on the order confirmation page (checkout page).

To send transaction data to AB Tasty and display it in the reports, you need to add the transaction tag to your purchase confirmation page after the generic AB Tasty tag.

Please note that transactions will be linked to the campaign(s) the user has seen.

To learn more about transaction metrics, read Metrics based on transactions article.

For other question regarding the Transaction tag, read our dedicated FAQ.

There are 4 ways to implement the transaction tag:

• Option 1 - With the Transaction Tracking via dataLayer which uses your dataLayer (Google Tag Manager, Tealium or CommandersAct to collect data (medium level of complexity)

• Option 2: With the dedicated code (advanced level of complexity - a developer is needed)

• Option 3: Via a Tag Management System (TMS - advanced level of complexity - a developer is needed)

• Option 4: With the Shopify app (one click activation) if you are using Shopify as your CMS.

To access the former method using our Transaction Tag generator, please refer to this specific article.

Once the transaction tag is implemented on your website, you can go ahead and run the QA process. For further information, refer to How to QA the Transaction Tag.

Option 1 - The Transaction Tracking via dataLayer

This new method will replace progressively the Transaction Tag Generator method.

It uses your dataLayer (Google Tag Manager, Tealium or CommandersAct) to collect transactional data.

For more information about how to use it, please refer to the following specific article :How to create a Transaction Tracking via DataLayer.

Option 2: A dedicated code

Advanced Level of Complexity – A Developer is Needed

All the needed information is accessible in our Developer Experience portal

You can create and code your transaction script you will then integrate into your confirmation page’s source code or your Tag Management System (e.g GTM or Tag Commander).

The transaction tag features two parts:

• the first part enables the transmission of information related to the transaction (ID, name, amount, delivery fees, etc.)

• the second part enables the transmission of item or product details related to purchases made by customers visiting your website.

You can use the code template provided below.

Follow the steps below to implement the transaction tag:

1. Copy all of the code below and paste it into your confirmation page.

This is the generic transaction tag. Variables are specific to your website.

// transaction tag
<script>
window.abtasty.send(“transaction”, {
  tid: __TRANSACTION_ID__, // Format: STRING, value example: “OD564"
  ta: __TRANSACTION_NAME__, // Format: STRING, value example: “Purchase”
  tr: __TRANSACTION_REVENUE__, // Format: FLOAT, value example: 15.47
  ts: __TRANSACTION_SHIPPING__, // Format: FLOAT, value example: 3.5
  tt: __TRANSACTION_TAXES__, // Format: FLOAT, value example: 2.60 
  tc: __TRANSACTION_CURRENCY__, // Format: STRING, vLicalue example: “EUR”      
  tcc: __TRANSACTION_COUPON_CODE__, // Format: STRING, value example: “Coupon”
  pm: __TRANSACTION_PAYMENT_METHOD__, // Format: STRING, value example: “Paypal”
  sm: __TRANSACTION_SHIPPING_METHOD__, // Format: STRING, value example: “Fedex”
  icn: __TRANSACTION_ITEM_COUNT_NUMBER__ // Format: INTEGER, value example: 12
});
</script>

// transaction items tag
<script>
window.abtasty.send(“item”, {
  “tid”: __TRANSACTION_ID__, // Format: STRING, value example: “OD564”
  “in”: __TRANSACTION_ITEMS[i].ITEM_NAME__, // Format: STRING, value example: “Shoe”
  “ip”: __TRANSACTION_ITEMS[i].ITEM_PRICE__, // Format: FLOAT, value example: 3.5
  “iq”: __TRANSACTION_ITEMS[i].ITEM_QUANTITY__, // Format: INTEGER, value example: 4
  “ic”: __TRANSACTION_ITEMS[i].ITEM_CODE__, // Format: STRING, value example: “SKU47”
  “iv”: __TRANSACTION_ITEMS[i].ITEM_CATEGORY__ // Format: STRING, value example: “Blue”
});
</script>

1. Replace the __TRANSACTION_[OBJECT]__values with your data, available in your source code or data layer.

2. Apply the appropriate format to your values (string, float, or integer) as described in our developer portal.
3. Create a loop in the code so that it is triggered as many times as there are items in the transaction.

For Transaction Items, the key/value pair is unique to each item of the transaction.

If the transaction includes more than one item, the Transaction Items must be sent as many times as there are items in the transaction.

The Transaction Items must be sent independently for each item.

Recommendations When Implementing in the Source Code

When implementing in the source code, we recommend the following:

• the names of transaction and item parameters must not be modified;

• when replacing the__TRANSACTION_[OBJECT]__ values, do not keep the opening or the closing double underscore `__`;

• there should always be a comma, at the end of each line (except for the last line, for which it is not mandatory).

• never place double “ ” or single ‘ ’ quotes around the value of the in parameter, even if the expected format of the value is a character string;

• implement the transaction tag at the bottom of the page - far from the generic tag. The transaction tag does need to be triggered after the generic tag. However, placing it at the bottom of the page will ensure the generic tag has fired already and that all values the transaction tag relies on have loaded as well.

Option 3: Via a Tag Management System

When implementing via a Tag Management System, we recommend the following:

• always implement the generic tag in the first position at the top of the page, then execute it.

• implement the transaction tag in the second position, i.e after the generic tag. Otherwise, the AB Tasty undefined error message will be displayed.

For more information about how to implement the transaction tag with your Tag management System, please refer to the following article, which is relative to the generic tag and the transaction tag set-up in Google Tag Manager.

Option 4: Via the Shopify app

The AB Tasty Shopify app enables to set-up your generic tag and to send transactional events to AB Tasty such as the transaction tag does it. Please refer to this specific acticle.