Skip to main content

How to trigger an event in your optimization

Dylan MacDonald
  • Updated

This article talks about what events are and how to trigger one in your optimization.

On this page:

What is an event?

An event is a specific behavior recorded during an optimization.

Events are sent to the Evolv AI server via the API's emit method. Events are typically tied to the KPI (Key Performance Indicator) or secondary KPI that the optimization measures, such as order confirmations.

window.evolv.client.emit('add_your_event.here');

Types of events

There are several scenarios where we might trigger events during an optimization.

  1. Selector Engagement: Record an interaction with an element on the page, such as a button click.
  2. Page Load: An event to define a page load, such as a 'thank you' or 'checkout' page.
  3. A Sequence of Events: Trigger an event when a particular behavior is observed, such as scrolling partway down the page or once multiple on-page behaviors are complete.
  4. Page Flows: You can even trigger an event after successfully navigating a specific sequence of pages.

The most common scenario for triggering an event is via selector engagement, followed by page load. Below are some code examples for each.

Selector Engagement

var heroBtn = document.querySelector('.btn.homepageHero__button');

heroBtn.addEventListener("click", function() {
  window.evolv.client.emit('youre-my-hero');
});

Page Load

// Send event on Product landing page load
window.evolv.client.emit('page.product_landing.loaded');

Steps to trigger an event

There are two ways to add events to your project.

We're going to focus on how to add events via the Web Editor.

  1. Open a project in the Web Editor.
  2. Select the context where you want to add the event.
    • Events can also be added to a variant. However, events measuring a project's performance must be available to all variants, including Control.
  3. Add the code to the JavaScript panel.
    mceclip1.png

Context-level JavaScript executes immediately once the script is loaded on the page. Take care to use the appropriate code to wait for the element if you're using a click listener like in the example.

Remember to check your events are firing correctly.

Related articles