All About Tags

This guide will help you to set up your AB Tasty account and be able to launch your first campaigns.

 

What Is a Tag?

 

A tag is a very short snippet of JavaScript code that tells the browser to download an external resource. In our case, this snippet will tell the browser to get the AB Tasty engine with all your campaigns from the AB Tasty servers.

The position (head/body) and attributes (async/defer) used when implementing the tag will determine how it will be downloaded and executed on the website. 

 

A tag can be directly implemented in the source code of a website or through third-party software, such as a Tag Management System, whose role is to simplify the management of tags.




Implementing the Generic Tag

 

To use AB Tasty on your website, you need to install our tag on your website. 

To find the AB Tasty generic tag, click All_About_Tags_PictoVert.png > Settings > Tags implementation > Generic tag

 

All_About_Tags_01.png

Differences Between Async and Synchronous Implementation

 

The generic tag comes in two versions: synchronous and asynchronous.

To find the two versions of the tag, open the dashboard in your AB Tasty account, by clicking

All_About_Tags_PictoVert.png > Settings > Tag implementation > Generic tag.

 

All_About_Tags_02.png

 

You will find the synchronous version, as well as the asynchronous version.

 

In synchronous mode, your website’s code scripts will load one after the other. A script can only be loaded if the previous one has finished loading. If a script is blocked, it will stop the script after it from loading.

 

All_About_Tags_03.png

On the other hand, in asynchronous mode, the different calls to the scripts will be made at the same time. All of the scripts will load at the same time. In this case, if a script hangs up, it will not stop the other scripts from loading.

 

All_About_Tags_04.png

The disadvantage of an asynchronous tag is that the screen may seem to flicker if the modifications are applied after the website loads.

 

In most cases, we recommend using the synchronous tag for AB Tasty. If the tag is placed in your website’s </head> tag, you will be sure that your modifications will be applied immediately, before the website loads. This will avoid the flickering effect and will offer an optimal user experience.

 

Standard Implementation

 

Copy the content of the synchronous tag and paste it between the </head> tags of your pages. Once the tag has been installed, you do not have to worry about it anymore since this tag is your account tag, not a testing tag.

 

We recommend that you place the code in the </head> section of your pages so changes are displayed more quickly. Otherwise, a flickering effect may occur: your visitors may see the original page for a fraction of a second before they see the modified page. By calling our tag as high as possible in the source code of your page, our script can apply the changes before the content is displayed.

 

Custom Implementation

 

You can also use any Tag Management System to inject our tag. In this case, make sure that the best practices (synchronous, in the </head>, not delayed) are applied, otherwise, you might experience flickering. Please note that some TMS, like Google Tag Manager, do not allow you to follow these guidelines. As stated in their documentation, it is not recommended to use GTM to inject an A/B Testing tag. 

 

At any moment and for any reason, you can decide not to follow these guidelines. You can place the AB Tasty tag in the </body> tag set it as async, or manually defer it as soon as you accept the flickering effect it could create. Beyond that, you also need to acknowledge the resource-loading mechanism that lies behind your visitors’ browsers. This will enable you to understand when our tag will execute and evaluate your targeting criteria and business rules.

 

Focus On Google Tag Manager

 

There are two AB Tasty tags: the generic tag will allow you to apply the Javascript layer for your page modifications and the transaction tag will send transaction data to your reports (average basket, turnover per visitor, potential profit). These tags can be implemented using Google Tag Manager (GTM).

 

Generic Tag

 

Heads up ⚡

Please note that by inserting the generic tag directly in GTM, you may experience a flickering effect: by default, tags inserted via GTM are in the pages' </body> tags, whereas AB Tasty recommends you inject your tag as high as possible in the page’s HTML code to limit flickering effects.

 

Access your AB Tasty account settings and find your AB Tasty tag.

 

All_About_Tags_05.png

 

Then, access GTM to create a custom tag:

 

All_About_Tags_06.png

To apply the AB Tasty tag on all of your website’s pages, follow the steps to create a rule:

All_About_Tags_07.png

Heads up ⚡

If you use Google Tag Manager to apply the Google Analytics or Universal Analytics tag and link the data of your AB Tasty tests, you must check the Tracker Name option in the Advanced configuration section and leave the corresponding field blank.

 

All_About_Tags_08.png

 

To use Google Tag Manager :

  • if you only have one account: check the box without entering a name ;
  • if you have two or more accounts: check the box and enter a name for each account.

 

When you link Google Analytics or Universal Analytics and AB Tasty, you must set the Tracker Name option for the account to which you want to send data in Third-party Tools.
If you have only one Google Analytics account, you do not need to enter a tracker name.

 

All_About_Tags_09.png

This will force the tracker name to the value t0 for Universal Analytics and an empty character string for Google Analytics, whilst, with no special configuration, GTM automatically generates the tracker name and includes a different timestamp for each page load.

 

Our integration with Universal Analytics/Google Analytics calls on analytics.js library methods (for Universal Analytics) and ga.js (for Google Analytics), without passing the tracker name as a parameter, since we do not know ahead of time if you use GTM.

Without this parameter, the library methods mentioned will only work if the tracker name is t0 or ". Hence the need to modify this setting in your Universal Analytics/Google Analytics tag templates if you want AB Tasty to work with one of these web analytics tools.

 

Transaction Tag

 

There is no risk of flickering for the transaction tag with GTM since this does not make any visual change: the tag is there only to gather transaction data.

 

You can find the transaction tag in your AB Tasty account settings. From here, you can copy it and insert it into GTM. Then, in GTM, you can create a custom HTML tag, and paste it in. Capitalized items are dynamic variables.

 

Good to know 💡

You can put the generic AB Tasty code directly into your page while still using GTM to insert the transaction tag. In this case, make sure you put the generic AB Tasty tag in between your pages' </head> tags.

 

Tracking All Pages

 

The tag must be added to every page. This enables us to measure whether your objectives are attained or not, even if they do not relate to the page being tested. For example, you can test a revised design for your product page, and measure its impact on your conversion rate, which happens later on, on the checkout confirmation page. Furthermore, if the tag is not present on all of the pages, the calculations of some indicators such as the bounce rate or the time may be skewed.



 

jQuery Library

 

By default, the AB Tasty tag loads a static JavaScript file with the jQuery library onto your website.

There are three options for configuring jQuery loading.

 

Follow the steps below to configure jQuery loading:

  1. Click All_About_Tags_PictoVert.png, then select Settings in the menu.
  2. Select Framework from the sidebar
  3. Access the Load jQuery section
  4. Select one of the following options: 
    • Load AB Tasty’s jQuery
    • Do not use jQuery
    • Load my jQuery

All_About_Tags_10.png

 

jQuery Loading Options

 

Load AB Tasty’s jQuery

This option is enabled by default. It enables you to load the AB Tasty jQuery library in addition to any existing library on your website.

 

Do Not Use jQuery

This option disables all jQuery libraries on your website.

 

Load My jQuery

This option enables you to load only your version of jQuery and disable the AB Tasty library.

This decreases the weight of the AB Tasty script by 30 KB.

 

Good to know 💡

In this case, the AB Tasty tag must be placed after your jQuery call in the source code of your pages and you must be using version 1.7.1 of this framework or above.




Automatic Reload

 

By default, our tag will continue looking for the URL of the current page. If the URL is modified, then it will trigger a complete reload of the engine. This is useful for handling Single Page Applications.

If you do not need this feature, you can safely disable it.

 




Panic Button - Empty Framework Option

 

To allow you to see whether AB Tasty causes errors on your website, we have created a feature that allows you to empty the AB Tasty library.

 

It deletes the content of the JavaScript file that is normally called to apply the modifications. In other words, the AB Tasty tag is still present on your website, but the file it calls is empty of any JavaScript instructions. Therefore, it cannot cause any errors on your website.

 

If errors persist on your website after you have emptied the AB Tasty library, you can eliminate AB Tasty from your investigations and look for other sources of errors.

 

Follow the steps below to empty the AB Tasty library:

  1. Click All_About_Tags_PictoVert.png, then select Settings in the menu.
  2. Click Framework from the sidebar or access directly to https://app2.abtasty.com/settings/framework
  3. Click Clear framework.

All_About_Tags_11.png


The entire AB Tasty folder is emptied of its content within two minutes.

 

Heads up ⚡

Emptying the AB Tasty library does not delete the tests from your account; they are just temporarily deactivated. Furthermore, the report data is not deleted either.

 

Once you have debugged your website, you should restore the AB Tasty library so you can continue to run your tests. To do so, click the warning message at the top of the interface. After a few minutes, AB Tasty will be operational again and your tests will start running.

 

All_About_Tags_12.png



Multi-Accounts

 

For each account, you get access to a unique tag linked to a unique database and a unique set of parameters. This uniqueness is identified by a hash: your account identifier.

You can find this identifier in your tag URL. For example, in the following tag URL: https://try.abtasty.com/8f83e47a06be564e44e72092b47cfa53.js the identifier is 8f83e47a06be564e44e72092b47cfa53.

 

You can also find the identifier on your website where your tag is operating by typing the following command in the console:

ABTasty.accountData.accountSettings.identifier

 

Campaigns and collected data are not shared between your different accounts. It is only attached to the account it has been collected for.

 

You can have multiple accounts to separate your domains, your environments, or your regions. However, keep in mind that not only the data will not be shared but you will also not be able to display the same experience to a unique visitor among all the accounts since he will be considered a new visitor.




Specific Implementations

 

Cross-Domain Tracking

 

Cross-domain tracking helps you follow the user in the case when one or more pages are hosted on a different domain name than the original one. Cross-domain tracking is necessary when a website has a page (payment confirmation, for example) that redirects the user to an external domain. 

 

This option is of utmost importance if you want to track the user and take advantage of statistics on this page that is outside of the website.

 

Follow the steps below to set up cross-domain tracking:

 

  1. Click All_About_Tags_PictoVert.png, then select Settings in the menu.
  2. Click Advanced settings from the sidebar.
  3. Access the Cross-domain tracking page.

 

You can add a URL pattern as a setting for pages hosted on other domains. Then, click Add and validate your modification.

 

Here is an example of cross-domain tracking:

 

All_About_Tags_13.png

Server-Side Rendering

 

If you are using server-side rendering (SSR) on your website, you might need to add a specific implementation for your tag.

 

In some situations, you might need to ask our tag to wait before applying its modifications. Indeed, with some SSR frameworks, modifying the DOM before the reconciliation has occurred might cause performance or render issues.

 

You can force our tag to lock its execution until you unleash the tag. To achieve that, you need to declare a variable before injecting our tag:

window.lockABTastyTag = true;

 

Once you consider your page to be ready for front-end modifications, you can call the following method to unleash our tag:

window.unlockABTasty();

 

For more information, please refer to the complete technical documentation about global methods and variables or our troubleshooting article on cross-domain tracking limitations.

 




Interact With the Tag

 

When our tag is running on a website, it offers a set of variables, constants, functions, and methods you can use to interact with it.

 

Everything is hosted under the window.ABTasty object. Here are the most convenient ones you might need:

 

ABTasty.accountData.tests

In this object, you will find all the tests that are currently active on your accounts. It displays more information than you would usually need for standard usage but this is convenient to have if you need to dig into your tests.

 

ABTasty.results

This object is a simplified version of the ABTasty.accountData.tests object. It will display your active tests with a focus on their current status. Are they running? If not, why have they been rejected? This is the most common object you might use to debug and QA your tests.

 

ABTasty.getTestsOnPage()

This object will display tests that are currently running on the page.

 

ABTasty.visitor.id

This object will return the visitor ID for the current visitor.

 

ABTasty.getCampaignHistory()

This object will return the campaign history for the current visitor. The campaign history is all the campaignID/variationID pairs that the visitor is currently assigned to.

 

ABTasty.accountData.accountSettings

This object will contain all the settings of the account running on the website. It is convenient to get the identifier, the account name, or various settings, such as framework version or storage mode.

 

Please find more in these two articles from our developers portal

- Tag window AB tasty

- Tag window

 




Trackings

 

General Tracking

 

Technical details about tracking can be found in the developer portal

 

By default and simply by implementing it on your website, our tag is designed to collect browsing data about your visitors. There are four main categories of automated hits:

  • Campaign
  • Pageview
  • Datalayer
  • Batch

 

Campaign

 

Each time a campaign is seen by the visitor, a campaign hit is sent with the corresponding campaign ID/variation ID pair. One hit is sent per campaign.

 

Each time a campaign hit is sent, the analytics integration settings are triggered.

 

Each time a campaign hit is sent, a corresponding event is sent. You can listen to this event for advanced integration.

 

Pageview

 

Every time the visitor visits a page, this hit is sent with all the details about the visited page.

 

Datalayer

 

If you have configured a data layer integration, then a hit will be sent once per session with all the available data layer keys.

 

Batch

 

To reduce its global footprint and increase performance, our tag sends the information in batches when they are triggered close to each other. When a batch hit is sent, you can find the usual details about each type of hit directly into the h parameter of the payload.

 

With a standard usage of AB Tasty, you should not be needed to implement any of these hits by yourself.

 

Events

 

You can send any event to the collection pipeline. This EVENT type of hit is built according to the following pattern: category/action/label/value.

 

Category

 

You are free to set the value of your choice in the event category. However, if you want the event to be used in the reporting as a goal or a filter, it must be set as Action Tracking.

 

Action

 

The action is the name of your event as it will be displayed in the goals section, the reporting, or the filters.

 

Label

 

A label enables adding text to the hit.

 

Value

 

A value enables adding value to the hit.

 

An EVENT hit must be sent using the following format:

 

window.abtasty.send("event", {

 ec: "Action Tracking",

 ea: "Click on CTA",

 el: "CTA on product page",

 ev: 1

});

 

For further information, please refer to: https://developers.abtasty.com/docs/data/uc-hits#event

 

Shortcut

 

You can also use the following method if you only need to send the action (name of a goal).

ABTastyClickTracking({{action}}, null);

 

Transaction Tag

 

AB Tasty lets you save the data related to transactions made on your website (e.g. transaction amounts, payment methods, number of purchased items, etc.), along with information related to the 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. For more information, refer to our guides on metrics.

 

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. This tag should be added after the generic AB Tasty tag. 

You can implement the transaction tag in three different ways.

 

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

 

Accessing the Transaction Tag

 

Follow the steps below to access the transaction tag:

 

  1. Access the AB Tasty dashboard.
  2. Click All_About_Tags_PictoGris.png, then click Settings > Tags implementation > Transaction tag.
  3. Click Copy to clipboard and paste the code into the purchase confirmation page.
  4. Change the settings based on your data.

 

Tag Composition

 

The transaction tag features two parts: the first part enables the transmission of information related to the transaction (ID, name, amount, delivery fees, etc.) and the second part enables the transmission of the item or product details related to purchases made by customers visiting your website.

 

Transaction Settings

 

The transaction settings correspond to the general information related to a purchase. If necessary, this information can be enriched with settings related to items.

 

Heads up ⚡

tid, ta, tr, and icn settings must be declared during transaction tag implementation. The other settings are optional. However, we recommend configuring them as well so that you can apply the matching filters to the reports later on.

 

Parameter name

Meaning

Definition

Example

tid

Transaction ID

Transaction ID

tid: "OD564"

ta

Transaction affiliation

Name assigned to the transaction as it will appear in the list of goals to be configured

ta: "Purchase"

tr

Transaction revenue

Transaction amount. Includes taxes and delivery fees.

tr: 15.47

ts

Transaction shipping

Delivery fees to be paid.

ts: 3.5

tt

Transaction tax

Transaction fees to be paid

tt: 2.60  

tc

Transaction currency

Currency used for the transaction

tc: "EUR"

tcc

Transaction coupon code

Discount coupon used for the transaction

tcc: "Coupon"

pm

Payment method

Payment method used for the transaction

pm: "Paypal"

sm

Shipping method

Shipping method

sm: "Fedex"

icn

Item count number

Total number of items purchased during the transaction

icn: 12

 

Good to know 💡

Information relating to the transaction amount and currency is collected, but no currency conversion is performed. The values are displayed in the report just as they are collected on the websites. 

 

For further information on the JavaScript implementation of transaction settings, refer to our developer documentation.

 

Item-Specific Settings

 

Information related to the purchased items can be linked to each transaction. To do this, you need to configure the item section of the transaction tag using the settings below in addition to those related to the transaction.

 

Heads up ⚡

tid and in settings must be declared. In particular, tid setting must match the one declared for the main transaction.

 

Parameter name

Meaning

Definition

Example

tid

Transaction ID

Transaction ID

tid: "OD564"

in

Item name

Item name

in: "Shoe"

ip

Item price

Item price

ip: 3.5

iq

Item quantity

Number of times an item was purchased during the transaction

iq: 4

ic

Item code

Item’s CKU (stock-keeping unit), i.e. the item’s reference code used for stock management

ic: "SKU47"

iv

Item category

Category the item belongs to

iv: "Blue"

 

For further information on the JavaScript implementation of settings related to items, refer to our developer documentation.

 

Three Ways of Implementing the transaction Tag

 

The transaction tag can be implemented in three different ways:

 

  • We recommend implementing the transaction tag in the source code of your website’s purchase confirmation page, as detailed above
  • You can also implement the tag via a Tag Management System (TMS), which enables you to declare the transaction settings as well as settings related to items. For further information, refer to Recommendations when implementing via a Tag Management System.
  • Finally, you may use the AB Tasty tag to automatically inject JavaScript instructions into your purchase confirmation page. In this case, you will use the Global Code feature so you will not need to modify your pages’ source code. For further information, refer to the Global Code option.

 

Example of code implementation

 

The most effective way to implement the transaction tag is within the source code of your website’s purchase confirmation page. 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.

 

Heads up ⚡

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.

 

Recommendations When Implementing 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.

 

QA the Transaction Tag

 

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 need to add the transaction tag to your purchase confirmation page, after the generic AB Tasty tag.

This data is available in the reports of each campaign in the form of indicators. 

 

Once the transaction tag is implemented on your website, you need to run it through the QA process. This will ensure that for each purchase, the information is correctly collected by the AB Tasty tag and that the transaction goal is visible on the goal configuration page.

 

Verifying That Transaction Data Is Collected Properly

 

There are three different ways to verify the transaction data collection: 

  • with the QA Assistant,
  • with the console’s Network tab,
  • with the Application/Local Storage tab of the console

 

The first part of the transaction tag generates a type=TRANSACTIONquery and the second part generates a type=ITEM query. Use the Chrome browser console to make sure the transaction tag hits are collected properly. Do this via your browser’s Network tab, in the Local Storage section.

 

With the QA Assistant

The QA Assistant allows you to QA both tracking and transactions. Transaction data can be found in the dedicated tab:

All_About_Tags_14.png

 

You can place a fake order on your website and access the confirmation page. If the transaction tag is correctly installed, you should see the transaction data accordingly. If nothing is sent to the QA Assistant, it means that data is not collected and that the transaction tag has not been implemented correctly. If that is the case, refer to How to implement the transaction tag? or to the Transaction tag FAQ.

 

With the Console’s Network Tab

 

Depending on the settings configured when implementing the transaction tag, these will also be listed with the transaction hit. 

 

Follow the steps below to make sure the transaction tag is sending hits properly:

  1. Access your website.
  2. Open your Chrome browser console.
  3. Open the Network tab.
  4. On the web page, add products to your cart and confirm your purchase.
  5. In the console, select the ariane.abtasty.com transaction hit.
  6. Click the Headers tab and make sure the TRANSACTION and ITEM settings are there.

All_About_Tags_15.png
All_About_Tags_16.png

Good to know 💡

The transaction name (ta) appears just as you configured it when implementing the transaction tag. The AB Tasty tag automatically fills in the generic settings such as vid, vp, ul, sn, sen, sd, etc. to qualify the hit.

 

With the Application/Local Storage Tab of the Console

 

You must also make sure the transaction and item type data has been collected and is present in your browser’s local storage.

 

Follow the steps below to make sure the transaction and item type data has been collected and is present in your browser’s local storage:

 

  1. Open the Application tab of the console.
  2. In the left-hand column, unfold the Local Storage entry.
  3. Select the ABTastyData key: All transaction and item type information is displayed.

All_About_Tags_17.png

Goal Configuration Page

 

Once the transaction hit has been collected and the usual processing time is up (between 45 minutes and 4 hours), you can add the transaction goal to your campaigns.
For further information, refer to the Configuring Goals guide.

All_About_Tags_18.png

 

Follow the steps below to add the transaction goal to your campaigns:

  1. Create a new campaign in QA mode.
  2. Access the Goals step of your campaign.
  3. Click the Transaction goal.
  4. Select your transaction goal to add it as a main or secondary goal.

 

Good to know 💡
The goal name matches the value assigned to the ta setting during transaction tag implementation.

 

Clicks Trackings With the Tag

 

The tag collects all the trackers you will set up in your campaign.
For further information on how to set up click tracking, refer to our dedicated content. 

Was this article helpful?

/