- Optimizely X Web Experimentation
- Optimizely X Web Personalization
- Optimizely X Web Recommendations
THIS ARTICLE WILL HELP YOU:
- Track visitor behaviors on your site, such as clicks, pageviews, and custom events
- Create events so you can measure the impact of your experiments and campaigns
In Optimizely, events help you measure success in an experiment. You can think of events as the “verbs” of Optimizely X. They track the actions that people take on your site, such as clicks, pageviews, form submissions, and purchases.
With events, you can track three kinds of visitor behavior:
Click events capture visitor clicks on elements like buttons or offers
Pageview events capture visitor pageviews and are tracked automatically for each page that you set up
Custom events capture additional information about other kinds of visitor behaviors
This article walks you through how to set up each kind of event.
Here's a short video on setting up events. Scroll down further for step-by-step instructions.
Set up a click event
Click events capture visitor clicks on elements like buttons or offers. You create them on a page, and they inherit the URL targeting from that page. Here's how to set up a click event (scroll down for step-by-step instructions):
Navigate to Implementation > Pages and select the page where you want to add the event. You can also create a new page instead.
In the left panel, in the Events section, select Create and then Click.
Click the element to which you want to attach a click event.
In the Selector field, the Editor automatically populates the selector for the element you chose. You can type or paste the element’s selector into the Selector field if you prefer.
In the Name field, enter a name for your event.
Track multiple selectors
You can track multiple CSS selectors in a click event by comma-separating them (just like in Optimizely Classic), but there is currently no multi-select capability with your cursor in Optimizely X Web.
Once you have your multiple CSS selectors comma-separated in a list, you will be able to manually add this into the selector field box as you would for a single selector. Once you add them in, if they are found on the current page, they will be highlighted in blue.
After saving your new click event, the elements will remain highlighted in blue when you open the event, indicating successful set up.
Now you will be able to track a single event across multiple selectors on your site page.
Set up a click event on a new element
Sometimes, when you create a variation, you'll use the Editor to insert a new element that doesn't exist in the original. Here's how to set up an event to track clicks to the new element.
In this example variation, the Wishlist option has been added to the navigation bar.
To track clicks for an element that is created in a variation:
Click Element Change.
Select the element and scroll down to Track Clicks.
Check the box under Enable Event Tracking.
Add a click goal name.
Track clicks within an iframe
If you'd like to track clicks within an iframe placed on your page, you need to make sure Optimizely snippet is implemented also on the URL that's being loaded inside the iframe.
If the URL inside the iframe is on a different origin from the one of the current page, you will also need to include this origin in your cross-origin tracking setup. In situations when the iframe URL lives on a different domain compared to the URL of the current page, you'll further need to implement the waitForOriginSync() API (on the URL loaded within the iframe) to make sure Optimizely data is synchronized across the two domains before Optimizely activates.
Set up a pageview event
Pageview events are added automatically for each page you create, so you don’t have to do anything to set them up. To view your pageview events, navigate to Implementation > Events.
Set up a custom event
Custom events capture additional information using custom code. You can use them to track behaviors like watching a video, submitting a form, or other actions that aren’t always reflected in clicks—any event that isn’t a click or pageview.
Read more about about when to use custom events.
Here's how to set up a custom event, with step-by-step instructions below:
Navigate to Implementation > Events.
Click Create New Event.
Under New Custom Event, enter a name for the event and an API name. Based on your entry in the API Name field, the code in the API Call field will populate the
Add the API call to your site.
For more information about implementing the API call, see our developer documentation.
Click Save Event.