Table of Contents
- 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. They track the actions that people take on your site, such as clicks, pageviews, form submissions, and purchases.
Optimizely Performance Edge is a lightweight experimentation product that delivers significantly faster performance than previous versions of Optimizely. It does this by relying on a streamlined "microsnippet" which limits the range of available features.
Optimizely Performance Edge and Optimizely Web handle events the same way, so all information contained in this article applies to experiments created with either version of Optimizely.
With events, you can track the following visitor behaviors:
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
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.
- Go 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.
- Click Save.
When tracking clicks on links that take visitors to a different origin (e.g. from https://www.example.com to https://shop.example.com), certain browser configurations may prevent some events from successfully being persisted and captured. In these cases, we recommend visitors track a Pageview on the URL of the click's destination to ensure complete conversion data.
Track multiple selectors
You can track multiple CSS selectors in a click event by comma-separating them, but there is currently no multi-select capability with your cursor in Optimizely 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 a successful setup.
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. To set up an event to track clicks to the new element:
Avoid using this method unless absolutely necessary. Using this feature means:
- The click events will not be found under Implementation > Events which means it may be hard to track down which experiment created the click event should you need to check the configuration.
- These click events are only tracked when the experiment is activated for the visitor and are not tracked otherwise.
- You cannot target more than one selector/element within these click events without altering the scope of your change.
- The click event cannot be measured as more than one type of Numerator e.g. Unique vs Total conversions.
To avoid these issues please create click events using the method described here for the best results.
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 Create.
- Click Element Change.
- Select the element and scroll down to Track Clicks.
- Check the box under Enable Event Tracking.
- Add a click goal name.
- Click Save.
Track clicks within an iframe
If you would like to track clicks within an iframe placed on your page, you need to make sure the Optimizely snippet is implemented also on the URL that is being loaded inside the iframe.
If the URL inside the iframe is of a different origin from the one on 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 will 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 do not 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 are not always reflected in clicks—any event that is not a click or pageview.
Read more about when to use custom events.
To set up a custom event:
- Go to Implementation > Events.
- Click Create New Event.
- Select Custom.
- 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. See also developer documentation.
- Click Save Event.