Behaviors

Behaviors let you detect specific user actions on your website. You can use them to launch an experience at the right moment. You’ll find and manage them in Zoovu Home > Behavioral Launcher.

Each behavior includes a name, a type, and a short code snippet. The code observes user activity — like switching categories or spending time on certain pages — and returns a value (true/false, a number etc.). That value is then used to evaluate when an assistant should appear.

Step 1: Create a behavior

• Go to Zoovu Home > Behavioral Launcher > Behaviors.
• Click "Create behavior".

• Enter a name.
• Select a type for the stored value.

Step 2: Choose the behavior type

Each behavior type determines how values are stored and which operators (equals, greater than etc.) are available in the launcher.

Type	Description	Example
Boolean	True/False values	"Whether the user added an item to the cart" (Yes/No)
Integer	Whole numbers	"How many times has the user clicked a button?"
Decimal	Numbers with decimals	"What is the total time spent on a page?"
Text	Stores text values	"What was the last visited category?"
Duration	Time-based values	"How long has the user been on the page?"

Step 3: Write a code snippet

Each behavior must contain a JavaScript function that tracks user behavior. The function receives:

getValue() – Retrieves the stored value. setValue(value) – Updates the stored value. resetRule() – (optional) Resets the behavior's stored status for re-evaluation.

Basic template

function f(getValue, setValue) {
  // Initialize value
  setValue(0);

  // Retrieve current value
  const currentValue = getValue();
}

Always use setValue() to update the behavior’s value. Simply returning a value won't store it.

Example: Tracking category button clicks

This behavior tracks how many times a user clicks a category button.

• Set the behavior type to Integer.
• Use the following JavaScript snippet:

function f(getValue, setValue) {
  // Select the category button
  const categoryButton = document.querySelector('.category-button');

  // Initialize value
  setValue(0);

  // Add a click listener to track clicks
  categoryButton.addEventListener("click", function() {
    const previousValue = getValue();
    setValue(previousValue + 1);  // Increment count
  });
}

You can set the value for your behavior in Behavioral Launchers under Launch Rules. See the example below, where a launcher sets off after 5 clicks and 1 add to cart:

Storing and using behavior values

Each behavior keeps its value stored in the browser’s storage. The stored data looks like this:

{
  "componentId": {
    "value": 10,
    "passed": true
  }
}

The value stores the tracked number (e.g. number of button clicks).

• The passed flag is true when the behavior meets the set condition in the launcher.
• Once passed = true, no further updates occur unless manually reset.

Resetting the behavior

Sometimes, a rule needs to reset automatically to allow re-evaluation. The resetRule() function does this.

Example: Resetting after the condition is met

function f(getValue, setValue, resetRule) {
  setValue(0);  // Reset stored value

  const currentValue = getValue();

  resetRule();  // Allow behavior to re-component if needed
}

Deleting a behavior

A behavior can be deleted unless it is actively used in a behavioral launcher.

To delete a behavior:

• Go to Behaviors.
• Find the behavior you want to remove.
• Click the three-dot menu and select Delete.

Troubleshooting

"The script can't find the element on the page":

• Check for typos in the CSS selector inside your JavaScript snippet.
• Verify if the element exists on the page when the script runs.
• If the element loads dynamically, use a MutationObserver to detect it:

function f(getValue, setValue) {
  // Observe when the category button appears
  const observer = new MutationObserver(() => {
    const categoryButton = document.querySelector('.category-button');
    if (categoryButton) {
      observer.disconnect(); // Stop observing
      setValue(0);

      categoryButton.addEventListener("click", function() {
        setValue(getValue() + 1);
      });
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
}

Behavior examples

Get inspired by these behavior examples before writing your own behavioral launcher.

Example 1: Help button click counter

Counts how many times the help button is clicked.

// behavior type: integer
function f(getValue, setValue) {
  const helpButton = document.querySelector('.help-button');

  helpButton.addEventListener("click", function () {
    const previousValue = getValue() ?? 0;
    setValue(previousValue + 1);
  });
}

Example 2: Help button clicks on single page load

Counts help button clicks per single page load.

// behavior type: integer
function f(getValue, setValue) {
  const helpButton = document.querySelector('.help-button');
  setValue(0);

  helpButton.addEventListener("click", function () {
    const previousValue = getValue();
    setValue(previousValue + 1);
  });
}

Example 3: Viewed category from page element

Saves the currently opened category name from the DOM.

// behavior type: text
function f(getValue, setValue) {
  const isCategoryPage = window.location.href.replace(window.location.origin, '').includes('/?category=');

  if (isCategoryPage) {
    const categoryTitle = document.querySelector('.category-title')?.innerText;
    if (typeof categoryTitle === 'string') {
      setValue(categoryTitle);
    }
  }
}

Example 4: Viewed category from URL

Captures the category from the URL, such as https://mydomain.com/?category=shoes.

// behavior type: text
function f(getValue, setValue) {
  const categoryKey = '/?category=';
  const isCategoryPage = window.location.href.replace(window.location.origin, '').includes(categoryKey);

  if (isCategoryPage) {
    const urlParts = window.location.href.split(categoryKey);
    if (urlParts.length > 1) {
      const categoryName = urlParts[1];
      setValue(categoryName);
    }
  }
}

Example 5: Page view timer

Tracks how long a user stays on a page. In this example, it targets category pages in the URL.

// behavior type: integer
function f(getValue, setValue) {
  const isCategoryPage = window.location.href.replace(window.location.origin, '').includes('/?q=');
  setValue(0);

  if (isCategoryPage) {
    setInterval(() => {
      if (document.hasFocus()) {
        setValue(getValue() + 1);
      }
    }, 1000);
  }
}

Example 6: Something added to cart

Detects if a user added a product to cart. Uses reset() to allow re-evaluation.

// behavior type: boolean
function f(getValue, setValue, reset) {
  const body = document.querySelector("body");

  if (getValue() === null) {
    setValue(false);
  }

  body.addEventListener("mousedown", (event) => {
    const target = event.target;
    const parentColumn = event.target.parentNode?.parentNode;

    if (target.className === 'button' && parentColumn?.className === 'column info') {
      reset();
      setValue(true);
    }
  }, { capture: true });
}

Example 7: Page view counter

Counts how many times a product detail page (PDP) has been visited. Works with single-page apps using a MutationObserver.

// behavior type: integer
function f(getValue, setValue) {
  const handlePageVisited = () => {
    const isPDP = window.location.href.includes('/product?id=');
    if (isPDP) {
      const currentValue = getValue() ?? 0;
      setValue(currentValue + 1);
    }
  };

  const observeAndReactOnPageChange = (callback) => {
    try {
      let oldHref;
      if (oldHref === undefined) {
        callback();
        oldHref = document.location.href;
      }

      const body = document.querySelector('body');
      const observer = new MutationObserver(() => {
        if (oldHref !== document.location.href) {
          callback();
          oldHref = document.location.href;
        }
      });

      observer.observe(body, { childList: true, subtree: true });
    } catch (error) {
      console.debug("Page change error", error);
    }
  };

  observeAndReactOnPageChange(handlePageVisited);
}