The DataLayer criterion is a triggering criterion that enables defining a trigger.
To learn how to create a trigger, please refer to this article.
📖 Definition
DataLayers are widely used as live datasets on most websites. It’s always a critical set of data that can be a real goldmine in your experimentation and personalization strategy. That’s why we build dedicated targeting criteria for you to leverage that precious information through ABTasty.
⚙️ DataLayer integration
To start using the dataLayer criterion, you will first need to choose which dataLayer is actively used on your website in the ABTasty integration’ setting page. You will have to choose from a list of four options:
- Google tag manager
- Tag commander
- Tealium
- Custom
The custom option will help you declare the right JS variable that stores your data on your website. Once you choose the right version for your context, you can use any key(s)/variable(s) to create dedicated triggers.
To connect your dataLayer with your AB Tasty account, go to the settings, section Integrations/ dataLayer.
For more information about the dataLayer set-up, please refer to this article.
🔍 Finding your dataLayer on your website
First, inspect your webpage : right click (or Ctrl+Shift+C).
You can use the dataslayer Chrome extension to have a table view of your dataLayer > Inspect the webpage (right click or Ctrl+Shift+C) > dataslayer tab.
You can also find your dataLayer in your console tab:
- Inspect the webpage (right click or Ctrl+Shift+C) > console tab
- write and enter “dataLayer” (without “apostrophes”) for GTM pushed dataLayers
- or “tc_vars” for CommandersAct (TagCommander) pushed dataLayers
- or "utag_data" for Tealium pushed dataLayers
For other dataLayer provider or custom-made, please refer to your internal documentation.
🎯 Retrieving a key or a value from your dataLayer
Identification and selection of the key
We will base our explanation on the example below:
As you can see, a dataLayer, as the name suggests it, has multiple layers of information. Each layer is itself an information to build a path to retrieve precisely a value and build your targeting.
⚙️ Creating a trigger with a dataLayer criteria
This works like the JS variable criterion: the tag will detect the dataLayer through a normal browser facility. In your configuration, you can use the “.” in the key field to detect specific levels in the context of nested objects. If our tag encounters an array, it digs into each object of the array to continue the nest and continues like that for every entry/level.
For example, if you want to target the key ‘brand’ and the value after it, you do not need to precise the array.
You will add the key ecommerce.detail.products.brand (and not 6.ecommerce.detail.products.0.brand) in the dedicated field:
Note : if you want to target an object that is present under multiple arrays, you can do the same key targeting.
Choosing the operator
You can choose a lot of operators according to your needs in the dedicated dropdown of the criterion form.
Selecting the value
To go back to our example and to target a precise value, apostrophes that you can read for the brand “DAILY” are not to be written in the criterion value field, instead write only DAILY as follows:
Keep in mind that for the operators “equals”, “does not equal”, “contains”, “does not contain”, you can add multiple values by writing them and press “Enter” on your keyboard. These values will be checked together as alternative conditions (‘OR’).
DataLayer targeting verification options
As for the JS variable trigger criteria, three options are offered to check your dataLayer trigger at the right moment:
- When the page loads: means our tag will verify your dataLayer at pageload only, so no check of new declared values between two pages visited will be made.
- Every {X} ms until the conditions are met: meaning our tag will verify your dataLayer at pageload AND will operate a regular check to detect any changes on that specific variable.
- According to a custom JS event. The tag will do the verification at its execution but will do a recheck when detecting a specific JS event. You can find everything in our developer documentation about the custom event that allows you to restart the targeting verification.
❓ How to choose between these 3 options ?
In most cases, the dataLayer key/value will populate at each pageload before AB Tasty script execution and targeting verification. Hence, the default option is the verification of the dataLayer trigger "When the page loads" (1st option). By selecting the 1st option, the dataLayer criterion in your targeting will be checked at ABTasty script execution at each pageload. No check will occur between pageloads.
If you noticed that your dataLayer is updated after AB Tasty script execution, please use the 2nd option. Having a regular check until the dataLayer is populated is effective in this case.
If you want your dataLayer to be checked at tag execution AND verified according to a custom JS event implemented on your end, please use the 3rd option and follow this technical documentation.
💡 Use case
Let’s imagine that you develop a specific variable inside your datalayer called “customerType” to store different customer categories based on what they initiate on your website. You want to personalize the journey of your most loyal visitor by pushing them specific offers or shipping facilities. The ABTasty datalayer criteria would allow you to use that datalayer key to build specific targeting on top of it. You would just have to:
- In the key section, enter “customerType”
- Select the operator “equal”
- In the value section, enter “loyal”
As this could be a value that is calculated on each page load, you could stay on the “when the page loads” option.
🚩Important note about Single Page Application Websites
SPA websites change their pages without any pageload. This come with consequences for most of their datalayer management and for our trigger criterion:
- for non-SPA website, the datalayer's push erases and repopulate the actualized information at each pageload
- for a SPA website, without some adaptation, the datalayer is not erased at page change and the different objects are added up from page to page with their latest keys and values...
It is a serious problem for AB Tasty's datalayer trigger for multiple reasons :
- The automatic reload of the framework in AJAX (change of URLs) and other workarounds do great for SPA website.
- But it is not sufficient for our dataLayer trigger criterion for the very reason mentioned above : the dataLayer keys/values are not updated (aka crushed and repopulated at each change of page) but just stacked.
- Our dataLayer criterion works with the AB Tasty tag crawling from top to bottom the dataLayer table to find the corresponding key. In a SPA website stacking its datalayer objects, the tag will find the first corresponding key in the table. But… it will not be the latest…
This results in mis-targeting, for example: being affected to a campaign targeting the homepage whereas we left this page and reached a product page... the tag has just found the first and, alas, former corresponding key and value in your dataLayer.
Need additional information?
Submit your request at product.feedback@abtasty.com
Always happy to help!