Evaluators

Created: 05.12.22

Updated: 15.12.22

Author: Polina A.

Evaluator - is a custom JavaScript code. This code works on the page and returns a certain value based on the data on the page.

You can create evaluators for:

1. Custom targeting conditions: for example, if there is data about the user's age on the page, the evaluator can return the value for further use in targeting conditions for personalization campaigns.

2. Assigning values to variables in templates: for example, if there is a user's name on the page, the evaluator can return the value for use in the template. This way, you can embed the user's name into variations and create a more personalized user experience.

3. Assigning values in dynamic filters in recommendation strategies: for example, the evaluator can return the difference between the current cart total and the minimum cart total required for free shipping. Then a product with a price exceeding this difference can be suggested to the user.

4. Substituting promo codes for each day of the month: As part of the system's functionality, you can additionally segment user audiences and influence their interaction with the website. For example, you can offer a personalized promo code to a segment of users (corresponding to a specific date of purchase), and then, depending on whether it was used or not, show the next appropriate experience. With this evaluator, you can also see if the user used the promo code on that day or on any other, thus tracking the attribution window.

---

The evaluator runs only after the experience has been loaded on the page. This happens during page loading if there is no specific trigger in the experience targeting. Evaluators have a 4-second timeout and return "false" if no result is obtained within that time frame.

Writing Evaluator Code

Evaluator code is a JavaScript code that returns a certain value. It can be simple code that retrieves text from a page element or code that fetches data from the browser, modifies it, and returns it as a result. Data sources for the evaluator's work can include:

• HTML code of the website page (e.g., for the number of items in the cart).

• Objects on the page – dataLayer, window (e.g., for obtaining the user's region).

• User's browser – cookies, sessionStorage, localStorage (e.g., for passing data from CRM).

• The evaluator's own code (e.g., for substituting various promo codes for different days of the month).

• External front-end APIs which can supply the personalization platform with required data.

To avoid cases of returning an incorrect value or a zero value due to the absence of something on the page, we recommend using a JS promise. This ensures that targeting conditions are calculated only after the evaluator returns a valid value.

Examples of Evaluator Code

Number of items in the cart

Replace the `sup` element with the selector used on your website to display the number of items in the cart in the website header.

GF.waitForElement("sup", (elements) => {
   console.log(parseInt(elements[0].textContent))
}, 1, 10, 100)

Presence of a cart selector on the page

Replace the ID `composite-order-btn-smallcart` with the ID used on your website to identify the cart element. The command will return null if the element is not present and the element itself if it is found.

GF.waitForElement("#composite-order-btn-smallcart", (elements) => {
   console.log(document.getElementById("composite-order-btn-smallcart"))
}, 1, 10, 100)

Text of an element on the page

Replace the `div.dropdown-group.dropdown-group__gray-arrow a.complex-link span.complex-link_bottom-txt` element with the element used on your website whose text value needs to be retrieved.

If multiple elements belong to the same class, specify the path to the specific one; otherwise, all values with the specified class will be returned.

$("div.dropdown-group.dropdown-group__gray-arrow a.complex-link span.complex-link_bottom-txt").text();

User's gender

Replace the ID `PROFILE_GENDER` with the ID used on your website to identify the user's gender.

The command will return a numeric or textual value corresponding to the user's selected option.

$("#PROFILE_GENDER :selected").attr('value'); //numeric value
$("#PROFILE_GENDER :selected").text(); //textual value

localStorage.getItem('gender') //Using localStorage, specify the key responsible for storing the user's gender

Retrieving the website's region from the context

Value Type: string

Expected Value: corresponding to the feed

(function(){ return GF.pageContext.lng })()
//You can also get the region from the dataLayer:
google_tag_manager['GTM-XXXXX'].dataLayer.get('country_code') //Replace 'GTM-XXXXX' with the GTM container ID and 'country_code' with the field that receives the user's region.

Substituting promo codes for each day of the month.

(function(){
    var date = new Date();
    var day = date.getDate();
    
   var promocodes = {
        1: 'code_1',
        2: 'code_2',
        3: 'code_3',
        4: 'code_4',
        5: 'code_...',
        6: 'code_...',
        7: 'code_...',
        8: 'code_...',
        9: 'code_...',
        10: 'code_...',
        11: 'code_...',
        12: 'code_...',
        13: 'code_...',
        14: 'code_...',
       //<...>
        31: 'code_...'
    };
    
    return promocodes[day];
})();

How to create an Evaluator

Evaluator Creation Flow