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.
- Selector Engagement: Record an interaction with an element on the page, such as a button click.
- Page Load: An event to define a page load, such as a 'thank you' or 'checkout' page.
- 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.
- 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.
- Via the Web Editor
- Via a Custom Integration
We're going to focus on how to add events via the Web Editor.
- Open a project in the Web Editor.
- 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.
- Add the code to the JavaScript panel.
Remember to check your events are firing correctly.