Code-based criterion

📖 Definition

The code-based option enables you to insert JavaScript code to trigger a campaign depending on the presence of a specific JS instruction.
This option is compatible with other options of the section, except for the Target all URLs option.

Code-based criterion is a triggering criterion that enables defining a trigger. 

To learn how to create a trigger, please refer to this article. 

🔎 How does it work?

The code you create is on our side encapsulated in a function that must return either “true” or “false” (as we previously mentioned, this is why as well you do not need to declare the function type of convention). This function is run by the tag to be executed and serve its targeting purposes. 

⚙️ Configuration

This option can be used in the Where section as an option as well as in the How section as a triggering criterion.
When using this option, you must comply with the following rules:

• Do not use a function(){ at the beginning of your code.
• The function/condition you code must return a true or false value.
• If you plan to use jQuery, you must enable the use of jQuery via the Settings. In this case, go to Account management > Framework and select Load AB Tasty’s jQuery.

If you use this option, keep in mind that some elements can be called after the page has been initially loaded, or after the visitor carries out certain actions on your website. In this case, the targeting conditions must be verified at regular intervals until they are met.

As for the “JS variable” triggering criterion, you can use our specific targeting verification event. Or, you can use promises with the abResolve keyword, which is better for performance purposes.

💡 Use case

This option can be useful in the following cases:

• To target visitors who have a specific cart amount.
• To target visitors who have a specific number of items in their cart.
• To trigger a campaign after a visitor has spent a specific amount time on the website.
• To trigger a campaign after a visitor has clicked a button with a specific class.

Let’s say you want to display a banner on your cart page for visitors who have a minimum amount of €50 in their cart.
As this targeting criterion does not exist, you need to use JavaScript code to get the total cart amount directly in the page, using querySelector or a dataLayer. Then, it will be able to automatically check if the amount is greater (the function returns true and the campaign can be displayed) or lower (the function returns false and the campaign is not displayed) than €50.
To do so:

1. Click the code option from the Where section.
2. Enter the following code (for example):
   

   if (document.querySelector('.cart_total') && parseFloat(document.querySelector('.cart_total').textContent) >= 50) {
   return true
   }

3. Enable a targeting verification to detect this code variation.

Let’s say you want to trigger your campaign when a visitor clicks a button whose class is btn. As this targeting criterion does not exist, you need to use JavaScript code to automatically check if the visitor has clicked (the function returns true and the campaign can be displayed) or hasn’t clicked (the function returns false and the campaign is not displayed) a button with the btn class.
To do so:

1. Click the code option from the Where section.
2. Enter the following code (for example):
   

   window.addEventListener("DOMContentLoaded", () => {
   Array.from(document.getElementsByClassName("btn")).map(
     e => e.addEventListener("click", (event) => {
      console.log("Hello World " + JSON.stringify(event))
      abResolve(true)
    }))
   });

This code includes the use of a promise (with the abResolve keyword) which means you don’t need to go through the targeting verification custom events.

Need additional information?

Submit your request at product.feedback@abtasty.com

Always happy to help!