Configure events in legacy editor

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Personalization
  • Optimizely Performance Edge

Events track visitor behaviors, such as clicks, pageviews, form submissions, and purchases. You can use an event as a metric to measure the success of your experiments.

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 configure.
  • Custom events – Capture additional information about other visitor behaviors.

Events exist on pages. If you have not configured a page yet, do that first. For help choosing effective events, see Track macro and micro-conversion events.

Configure 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. You can configure click events using the new Visual Editor. See Configure click events.

To use the legacy editor instead, open it with Edit in legacy, as described in the following steps.

Open the legacy editor for a page

  1. Go to Implementation > Pages.

  2. Find the page, then click More (...) > Edit in legacy.

Open the legacy editor for a specific event

  1. Go to Implementation > Events.

  2. Find the event, then click More (...) > Edit in legacy.

After the legacy editor opens, you can configure the click event:

  1. Select the element you want to track.

  2. Click Add an Event. The Selector field populates automatically. If you prefer, you can enter an element’s selector into the Selector field.

  3. Enter a Name for the event.
  4. (Optional) Add a Description.

  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 being persisted and captured. You should 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 are highlighted in blue in the editor.

After saving your new click event, the elements remain highlighted in blue when you open the event, indicating success.

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

Configure a click event for a variation

Avoid using this method unless absolutely necessary.

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

Using this feature means the following:

  • The click events are not 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 on a page, as described in Configure a click event.

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

  1. Select an experiment or campaign.
  2. Click Variations.

  3. For the variation that you want, then click More (...) > Edit with legacy editor.

  4. 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, ensure the Optimizely snippet is implemented on the URL that is being loaded inside the iframe.

If the URL inside the iframe differs from the one on the current page, you also need to include this origin in your cross-origin tracking configuration. 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 data is synchronized across the two domains before it activates.

Configure a pageview event

Pageview events are added automatically for each page you create, so you do not have to do anything to configure them. To view your pageview events, go to Implementation > Events.

Configure 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 not always reflected in clicks or pageviews. See Custom events.