Configure click events

Events help you measure success in an experiment. They track visitors' actions on your site, such as clicks, pageviews, form submissions, and purchases.

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.

A click event captures when a visitor clicks an element on your page, like a button or a link. You can use a click event as a metric to measure the success of your experiments.

The new Visual Editor lets you create click events directly on your live page, without writing a CSS selector by hand. Point at the element you want to track, give the event a name, and save. The event then becomes available as a metric for any experiment that runs on that page.

Click events carry one of two scopes, and the scope decides which experiments reuse the event.

• Project-level – The event lives on a page and inherits that page's URL targeting. Every experiment in the project reuses it. The Visual Editor labels this scope project-level, because the event is available to the whole project.
• Experiment-level – The event lives in one experiment. Experiment-level events cannot be reused in other experiments.  m

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

Configure a click event from Implementation

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. Events exist on pages. If you have not configured a page yet, do that first.

1. Go to Implementation > Events.

2. Click Create New Event.

   

3. Select Click as the event type.
4. Select the page you want to work on.

5. Click Create Event.

   

Optimizely opens the page in a separate browser tab, in the new Visual Editor. The toolbar includes controls to return to your pages, switch pages, turn on interactive mode, and preview on different device sizes.

1. Click on an element you want to track. You can also click Event in the toolbar to open an empty popup and set the selector yourself..

2. Click Add Click Event (waveform icon).

   

3. The Create Click Event popup displays with the Selector filled in. This is the element the event tracks. It is filled in automatically when you select an element, or you can manually set it in the selector field. The popup shows how many elements on the page match the selector.
4. Enter a descriptive Name for the event, up to 400 characters.
5. (Optional) Add a Description for the click event. The context that helps teammates understand what the event tracks.

6. Click Save. 

   

Optimizely creates the event and makes it available as a metric for experiments on that page.

To track the same event across several elements at once, such as three "Add to cart" buttons, enter multiple CSS selectors separated by commas in the Selector field.

View all events on a page

You can open the Attributes panel to see a complete list of the events on the page in one place.

1. Click Attributes in the toolbar.

2. Select the Events tab.

   

Each event row shows the event icon, the event name, and the event type, such as click. The list can also include the page's automatic pageview event. If no events exist yet, the tab shows an empty state with a Create Event button.

Click any event to open it in the Edit Click Event popup with its details filled in.

Edit an event

The editor highlights every event on the page with an outline and a label that shows the event icon and name. This makes it easy to see which elements you already track.

When you select an element that already has a click event, the popup opens with that event's details filled in, so you can review or edit it.

To edit an event, complete the following steps:

1. Click a highlighted element and click Add Click Event, or click Attributes and select the event. 

   

2. In the Edit Click Event popup, update the name, description, or selector.

3. Click Update.

   

Archive an event

Archiving stops an event from being tracked and removes it from the snippet. Archive one event or several at once.

Archive a single event

1. Open the event in the Edit Click Event popup.

2. Click Archive.

   

3. Click Archive Event to confirm.

Archive several events at once

1. Click Attributes and select the Events tab.

2. Click More (...) > Select. To select all events, click Select All.

   

3. Select the events using the checkboxes and click Archive.

   

4. Click Archive Event to confirm.

Archived events do not display in the editor. To view or unarchive them, use the Events dashboard. For details, see Manage events.

Configure a click event from an experiment

You can track a click without leaving the experiment you are building. Select the element in the Visual Editor, then name the event. Optimizely adds it to the metrics of the experiment in the same step. This shortens setup for a metric you decide on midway through designing a variation.

A project-level event created this way is the same event you get from Implementation > Events. It appears on the page it belongs to, and other experiments reuse it.

Choose the event scope

The activation of the experiment decides which scopes are available.

• Experiment activates on a saved page – Both scopes are available. Leave Create as experiment-level event clear to create a project-level event that other experiments reuse. Select it to keep the event inside this experiment.
• Experiment targets a URL – Only the experiment-level scope is available. Optimizely selects Create as experiment-level event, disables the checkbox, and displays the message Experiment-level events cannot be reused in future experiments. To create a reusable project-level event instead, please visit the Implementation Page.

A project-level event lives on a page, and a URL activation belongs to one experiment. Optimizely therefore has no page to attach the event to. To lift the restriction, save the targeting as a page, then reopen the Visual Editor. For the steps, go to Manage pages.

Track clicks on an element

Follow these steps to create the event.

1. Select your experiment or campaign.
2. Click Variations > Visual Editor.
3. Select the element you want to track.

4. Click Track Clicks in the element menu.

   

5. Review the Selector field. Optimizely fills it from the element you selected and reports how many elements match.
6. Click Show advanced to refine the selector, if the match count is wrong.
7. Enter a name in the Event name field.
8. Select or clear Create as experiment-level event to set the scope. Experiment-level events cannot be reused in other experiments. To create a reusable project-level event instead, uncheck the box.

9. Click Save.

   

Optimizely displays a badge with the event name next to the element. The event joins the metrics of the experiment. To change the measurement or the winning direction, go to Configure experiment settings in the Visual Editor.

Reuse a click event that already tracks an element

Optimizely checks for a project-level event on the element before it creates a second one. When one exists, a window titled A project-level click event already exists for this element names the event. It states that continuing adds the event to the metrics of the experiment.

• Click Continue to add the existing event as a metric. Optimizely confirms with the message Click event "EVENT_NAME" added to experiment metrics.
• Click Cancel to leave the metrics unchanged.

Reusing the event keeps one definition of the click, so results stay comparable across every experiment that measures it.

Edit track clicks

The editor highlights every event on the page with an outline and a label that shows the event icon and name. This makes it easy to see which elements you already track.

When you select an element that already has a click event, the popup opens with that event's details filled in, so you can review or edit it.

To edit an event, complete the following steps:

1. Click a highlighted element and click Track clicks.

   

2. In the Edit Click Event popup, update the Event name or selector.

3. Click Update.

   

Add a metric

The Metrics tab in Experiment Config decides which visitor actions the experiment counts. Every metric is built on an event, so create the event first or pick one that already exists. To create a click event in the editor, see Configure click events.

A metric pairs an event with a winning direction and a measurement. Optimizely treats the first metric in the list as the primary metric and the rest as secondary metrics.

Follow these steps to add a metric.

1. Click Experiment Config in the Visual Editor toolbar.
2. Click the Metrics tab.

3. Click Add Metric and select the metric type. See Types of metrics and when to use them.

   

4. Select the winning direction from the first drop-down list. Select Increase when a higher value means success, or Decrease when a lower value means success.
5. Select the measurement from the second drop-down list.
6. Click the event field, then select the event you want to measure.

7. Click Save.

   

The first metric you add is the primary metric for the experiment. This metric determines whether your experiment "wins" or "loses" and should track an event that is directly affected by the changes you make in your experiment. You can also add secondary metrics or monitor goals to measure the downstream effects of your experiment.

Find an event in the picker

The event picker lists every event available to the experiment. Two controls narrow the list.

• This Project – Lists the events in the current project. Use this for most experiments.
• All Account – Lists the events across every project in the account. Use this to measure an event that another project owns. For the setup this requires, go to Cross-project events.

Enter text in the search field to filter either list by name.

Reorder or remove a metric

The order decides which metric is primary. The primary metric drives the statistical decision of the experiment, so put the metric that answers your hypothesis first.

• To reorder, drag a metric row by its handle. The metric in the PRIMARY group is the primary metric.
• To remove, click Delete on the metric row.
• To discard unsaved changes, click Revert.