Set up events in Optimizely Web Experimentation

  • Updated

Relevant products:

  • Optimizely Web Experimentation
  • Optimizely Performance Edge

This topic describes how to:

  • 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 Web Experimentation and 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 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 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 contained 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 – 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

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.

add-click-event.gif

  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. 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.

  4. In the Name field, 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, 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 Experimentation or Optimizely Performance Edge. 

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.

click-event-multiples.png

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 (for example, Unique and Total conversions).

To avoid these issues, 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.

new-element-example1.png

To track clicks for an element that is created in a variation:

wishlist-tracking.gif

  1. Click Create.
  2. Click Element Change.
  3. Select the element and scroll down to Track Clicks.
  4. Check the box under Enable Event Tracking. 
  5. Add a click goal name.
  6. 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 Web Experimentation and Optimizely Performance Edge 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 Web Experimentation and Optimizely Performance Edge data is synchronized across the two domains before Optimizely Web Experimentation and Optimizely Performance Edge 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.

pageview-event-example.png

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:

create-custom-event-example.gif

  1. Go to Implementation > Events.
  2. Click Create New Event.
  3. Select Custom.
  4. 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 theeventName.
  5. Add the API call to your site. See also developer documentation.
  6. Click Save Event.

Related articles

Learn the strategy for choosing effective events for your experiment.

Learn to build:

  • An experiment in Optimizely Web Experimentation.

  • A campaign in Optimizely Web Personalization.