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 are reusable and apply to a page rather than to a single experiment or variation. You can add the same event as a metric to any experiment that runs on that page.

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

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

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