Set up events

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Performance Edge

Events help you measure success in an experiment. You can think of events as the verbs of Optimizely Web Experimentation and Optimizely Performance Edge. They track the actions that visitors 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 Web Experimentation. It does this by relying on a streamlined microsnippet, which limits the range of available features.

Optimizely Performance Edge and Optimizely Web Experimentation handle events the same way, so all information in this article applies to experiments created with either version.

With events, you can track the following visitor behaviors:

  • Click events – Capture visitor clicks on elements like buttons or offers
  • Pageview events – Automatically capture visitor pageviews for each page that you set up
  • Custom events – Capture additional information about other visitor behaviors

Events exist on pages. If you have not set up a page yet, do that first.

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.

  1. Go to Implementation > Pages and select the page where you want to add the event. You can also create a new page instead.
  2. In the left panel, in the Events section, select Create and then Click.
  3. In the visual editor, select the element to which you want to attach a click event.

    The Selector for the element you chose automatically populates. If you prefer, you can enter the element’s selector into the Selector field.

  4. Enter a Name for your event.
  5. Click Save.
When tracking clicks on links that take visitors to a different origin (for example, 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, Optimizely recommends you track a pageview event 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. After you have your multiple CSS selectors comma-separated in a list, you can manually add this into the Selector field for an event. After you add them in, if they are found on the current page, they will be highlighted in blue in the visual editor.

After saving your new click event, the elements will remain highlighted in blue when you open the event, indicating a successful setup.

Now you can track a single event across multiple selectors on your site page.

Set up a click event for a variation

Avoid using this method unless absolutely necessary.

Sometimes, when you create a variation, you will use the visual editor to insert a new element that does not exist in the original.

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 or 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 (for example, unique and total conversions).

To avoid these issues, create click events using the method above in the Set up a click event section.

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:

  1. On the Experiments page, select an experiment.
  2. Click Variations.
  3. Edit an existing variation or create one.
  4. Next to Changes, click Create.
  5. Click Element Change.
  6. Select the element and expand Track Clicks.
  7. Select the Track clicks on this element checkbox.
  8. Enter the click goal Name.
  9. Click Save.

Track clicks within an iframe

To track clicks within an iframe on your page, make sure the Optimizely Web Experimentation and Optimizely Performance Edge snippet is implemented 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 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 further need to implement the waitForOriginSync() API (on the URL loaded within the iframe) to make sure Optimizely Web Experimentation and Optimizely Performance Edge data is synchronized across the two domains before it 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, go to Implementation > Events.

Set up a custom event

Custom events capture additional information using custom code. Use them to track behaviors like watching a video, submitting a form, or other actions that are not always reflected in clicks or pageviews.

Read more about when to use custom events.

To set up a custom event:

  1. Go to Implementation > Events.
  2. Click Create New Event.
  3. Select Custom.
  4. 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 eventName.
  5. Add the API call to your site. For more information on the API call, see the developer documentation.
  6. Click Save Event.

For help with the strategy for choosing effective events for your experiment, see Track macro and micro-conversion events.