All About Tags
Last updated
Was this helpful?
Last updated
Was this helpful?
This article will help you to set up your AB Tasty account and be able to launch your first campaigns.
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.
AB Tasty provides two types of tag:
that you need to install to use AB Tasty on your website
that you can install to collect further insights on the transaction made on your website
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.
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.
AB Tasty module
Compatibility
Dashboard
WYSIWYG editor
Reporting
The two latest major versions of Chrome and Firefox
Safari, Internet Explorer, Microsoft Edge, and Opera are not supported.
JavaScript tag
Built for browsers that represent more than 0.5% of the current market share and that are not IE 11 or Opera Mini.
Not compatible with any versions of Internet Explorer
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.
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.
Load AB Tasty’s jQuery
Do not use jQuery
Load my 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.
This option disables all jQuery libraries on your website.
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.
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.
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.
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:
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.
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.
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:
Once you consider your page to be ready for front-end modifications, you can call the following method to unleash our 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:
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.
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.
This object will display tests that are currently running on the page.
This object will return the visitor ID for the current visitor.
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.
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:
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
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.
Every time the visitor visits a page, this hit is sent with all the details about the visited page.
If you have configured a data layer integration, then a hit will be sent once per session with all the available data layer keys.
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.
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.
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.
The action is the name of your event as it will be displayed in the goals section, the reporting, or the filters.
A label enables adding text to the hit.
A value enables adding value to the hit.
An EVENT hit must be sent using the following format:
You can also use the following method if you only need to send the action (name of a goal).
For more information about performance center and guidelines, please refer to the following articles:
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.
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.
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.
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.
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.
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.
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.
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"
The transaction tag can be implemented in four different ways:
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:
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.
Replace the __TRANSACTION_[OBJECT]__values with your data, available in your source code or data layer.
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.
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.
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.
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.
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.
The QA Assistant allows you to QA both tracking and transactions. Transaction data can be found in the dedicated 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:
Access your website.
Open your Chrome browser console.
Open the Network tab.
On the web page, add products to your cart and confirm your purchase.
In the console, select the ariane.abtasty.com transaction hit.
Click the Headers tab and make sure the TRANSACTION and ITEM settings are there.
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:
Open the Application tab of the console.
In the left-hand column, unfold the Local Storage entry.
Select the ABTastyData key: All transaction and item type information is displayed.
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:
Create a new campaign in QA mode.
Access the Goals step of your campaign.
Click the Transaction goal.
Select your transaction goal to add it as a main or secondary goal.
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.
Babel rule:
There are three options for configuring jQuery loading in the .
If you do not need this feature, you can safely disable it in the .
To allow you to see whether AB Tasty causes errors on your website, you can deactivate the tag and empty the script in the .
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 on the settings.
For more information, please refer to the about global methods and variables or our on cross-domain tracking limitations.
can be found in the developer portal.
Each time a campaign hit is sent, a corresponding event is sent. You can for advanced integration.
For further information, please refer to this .
You will find : it's useful to understand your tag's weigh and find ways to improve it (custom recommendations regarding your specific activities).
In the section of your AB Tasty account, you can see which branch of the tag you are on. We currently have 3 branches running:
In the page , you'll find the code to paste into the purchase confirmation page.
For further information on the JavaScript implementation of transaction settings, refer to our .
For further information on the JavaScript implementation of settings related to items, refer to our .
Option 1 - which uses your dataLayer (Google Tag Manager, Tealium or CommandersAct to collect data (medium level of complexity)
Option 2: (advanced level of complexity - a developer is needed)
Option 3: (TMS - advanced level of complexity - a developer is needed)
Option 4: (one click activation) if you are using Shopify as your CMS.
Apply the appropriate format to your values (string, float, or integer) as described in our .
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 or to the .