👉Using the code-based option

📖 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.

⚙️ 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.

Targeting verification

When this option is in use, some elements can be called after the page has initially loaded, or after the visitor carries out a certain action. In this case, the targeting conditions must be verified at regular intervals until they are met.
You can either select the AJAX option: the targeting code will be executed only when your code returns true.
Or, 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 the AJAX mode.

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 enable the AJAX mode.

Need additional information?

Submit your request at [e-mail]

Always happy to help!