All About Tags

This article 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.

Finding your 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 > Implementation > Tag implementation > Generic tag. 

Differences Between Async and Synchronous Implementation

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

You will find the synchronous version, as well as the asynchronous version in the Generic Tag page.

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.

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.

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.

Compatibility matrix

Where to install the generic tag

The tag must be added to every page, checkout included. 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.

The option jQuery Library

By activating this option, the jQuery library will be loaded with the tag.

Note that it's not mandatory to install the library jQuery to make AB Tasty work on your website.

There are three options for configuring jQuery loading in the framework page. 

• Load AB Tasty’s jQuery
• Do not use jQuery
• Load my jQuery
  

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 3.7.1 of this framework or above.

Automatic Reload option

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 in the framework page. 

Disabling the tag: clear Script functionality

To allow you to see whether AB Tasty causes errors on your website, you can deactivate the tag and empty the script in the framework page. 

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 script, you can eliminate AB Tasty from your investigations and look for other sources of errors.

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

Heads up ⚡

Emptying the AB Tasty script 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 script 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.

Multi-Accounts tags

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/xxxxe47a06be564e44e72092b47cxxxx.js the identifier is xxxxe47a06be564e44e72092b47cxxxx.

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. To set-up a cross-domain tracking, go on this page on the settings. 

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

Heads up ⚡

Since cross-domain tracking is relying on third-party cookies to operate, the feature will no longer work on browsers or environment that don't support these cookies anymore. It can be the browser type (Safari or Firefox), specific settings, the use of extensions or any other external element that might block third-party cookies. This feature is still supported by Google Chrome for the moment. All visitors that are not using a browser or environment compatible with third-party cookies won't be tracked over domains, even when the feature is properly set up.

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.

How to 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

What the tag tracks

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.

Format

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 this article.  

Shortcut

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

ABTastyClickTracking({{action}}, null);

How to follow your tag performance

You will find a performance center inside the AB Tasty platform: it's useful to understand your tag's weigh and find ways to improve it (custom recommendations regarding your specific activities). 

For more information about performance center and guidelines, please refer to the following articles: 

• Perfomance center
• List of performance guidelines

Joining the AB Tasty "Next tag program"

The Next tag is our Early Adopter program for the AB Tasty tag. It is a specific and early branch, where we put our latest optimizations and features that have been internally tested and validated but that are awaiting a more global validation (early adopter feedback) before being deployed to all users.

By joining the program, you will be able to test our latest improvements and new features instantly.

How to join the program?

In the Framework section of your AB Tasty account, you can see which branch of the tag you are on. We currently have 3 branches running:

• Latest: the public and most used branch, referred to as the “default” branch;
• Next: the early and advanced branch you are able to test;
• Unstable: an experimental and internal branch. On a normal use, you will never see this branch.

If your tag is set on Latest, you are free to join the Next program by clicking Learn more and Join now from the popin. However, you can’t join the program on your own if you are on the Deprecated or Unstable branch.

After joining the Next program, you must refresh your tag to push the modifications live. Otherwise, the changes will be pending.

How to leave the program?

From the Framework section, if you are already on the Next tag, you can choose to instantly leave the program by clicking Leave program. You will be able to rejoin the program anytime.

After leaving the program, you must also refresh your tag to push the modifications live. Otherwise, the change will be pending and you will still be operating on Next.

Note that since this version of Next is impacting the cache mechanism, switching back to Latest might cause an additional delay in your ability to push new modifications to your website. This delay can go up to 24 hours. 

What improvements are included in the Next tag?

In the third iteration of Next, launched in Autumn 2023, there is only one major improvement.

Enhanced cache mechanism

The tag is now massively using the browser cache to drastically reduce the amount of data being downloaded from our CDN, reducing the latency and thus increasing page speed and improving our impact on your performance metrics but also decreasing the power consumption of our tag.

All files are now cached, for up to 12 months, and regular update checks are made in the background without being render-blocking. If a change in your campaigns or account configuration is detected, it will be downloaded at a low priority in an asynchronous mode.

This means that after the first page, which is the only moment when a new visitor has to download the full bundle, the AB Tasty tag is read directly from memory instead of doing regular polls to the network, reducing its loading time to a few milliseconds.

Are there any limitations?

The first page is not impacted by the improvement as the full bundle still needs to be downloaded if there are no cached files. The impact is only visible on the 2+ pages. If you run a performance audit, it is most likely that you will run it without any cache and the improvement won't be noticeable.

Also, as the updates are made in the background, it is most likely that you will experience an additional delay when pushing new modifications in your AB Tasty account. This delay is limited to the new page refresh only.

Is it changing the way AB Tasty works?

No. Your dashboard will remain the same and you will keep using AB Tasty in exactly the same way.

You might notice minor changes in the way of QAing your campaigns or investigating the tag on your website. However, if you aren’t a tech-aware user, you shouldn’t spot any differences.

Is it safe?

It is safe. However, keep in mind that it is an early version for a reason. It has been tested internally, as well as with several customers that have already joined the Next program. We can’t assume we have been running this tag on 100% of the possible configurations and environments. This means you might fall under a configuration that breaks our tag, even though it shouldn’t happen. The worst-case scenario is that your campaigns and data collection will no longer work. By joining the Next program, you accept the tiny possibility that something may go wrong.

In any case, you can switch back to the Latest tag at any time without notifying us (but we expect your feedback!). Just remember to always refresh your tag after you make a change. Due to the nature of the change in Next 3, you should be aware that an additional delay will apply before being able to push new changes in production when switching back to Latest. This delay can go up to 24 hours.

Will there be a new iteration of the Next branch?

Yes, and it is already planned for the future. This version is already the third iteration of our Next program. It is most likely that a fourth iteration will come after we decide to close this one.

When closing the second iteration, we decided to automatically migrate back all Next users to Latest. We will keep you posted about the end of the current iteration.

Transaction Tag

AB Tasty lets you collect 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

In the page Transaction tag, you'll find the code to paste into the purchase confirmation page.

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.

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.

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>

• Replace the __TRANSACTION_[OBJECT]__values with your data, available in your source code or data layer.
• Apply the appropriate format to your values (string, float, or integer) as described in our developer portal. 
• 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.

How to 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:

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.
   

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.

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.

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.