This article will help you:
  • Track clicks on objects on your page (to measure the success of your variation)
  • Set up a Click Goal in Optimizely
  • Track clicks on new elements that you've created for the variation
  • Track clicks on elements that are only accessible through user interaction
  • Track multiple elements as part of the same Click Goal
  • Track clicks on an element on a different page
  • Track clicks on elements that load after the initial pageload
  • Use Element Tracking to see which elements on a page are being tracked

Click goals in a nutshell

Click goals allow you to track when a visitor clicks an element on your page. For example, you create a test to compare different value propositions on your product details page. Measure the impact of your changes with a click goal that track clicks to the Add-to-Cart button in each variation.

Key tips 

What to watch out for

  • If you see "no element is being tracked," don't worry. This just reminds you that the element doesn't exist on the original page.

Click Goals track how often your visitors click on a certain element. They are one of several goal types that help you measure success in an experiment. Setting Click Goals is fundamental to effective AB testing and will allow you to run better experiments in Optimizely.

Want to see Click Goals in action? Watch this short video.

 
 
Note:

A Click Goal is registered every time a visitor clicks a tracked element on your page. Behind the scenes, Optimizely binds to the "onmousedown" event to ensure that these goals get tracked. To see what other conversion events can be tracked with Optimizely, see our Goals Overview article.

 
Tip:

Have a question about tracking goals with Optimizely? Head over to the Optimizely Community to post a discussion and see what others are talking about.

Note:

Are your goals not tracking properly? Check out our article on troubleshooting your goals to further investigate your goal setup.

Set up a click goal

There are two basic ways to set up a Click Goal: by clicking the element you want to track in the Editor, or by using the Goals icon in the top-right of the Visual Editor. Below, we show you how to set up click goals to: 

  • Track existing content
  • Create a new goal to track new content
  • Track new content with an existing goal 
  • Track clicks on interactive content or on multiple elements
  • Track clicks on a redirect page
  • Create custom selectors and event names
  • Track clicks on pages not available during pageload

Track existing content

Option 1: Select an element using the Visual Editor

Select the element that you want to use as a Click Goal in the Editor, and choose Track Clicks > Create New Click Goal.

Enter a name for this goal. This is the name that Optimizely will display on the Results page.

Option 2: Use the Create Goals dialog

Click the Goals icon in the top-right corner of the Editor, next to Start Experiment.

Then click Create a New Goal to set up a new goal. You can also use a saved goal from another experiment.

Select the element you want to track in the preview by clicking on it. The element you select will be outlined in red. To cancel a selection, simply click the element again.

Once you save your goal, you will see it show up on your experiment's Results page. Conversions will start to populate once visitors start to enter your test.  

After you set up a Click Goal, you will want to preview it using the Events tab of Preview Mode.

If your goal is not tracking as expected, read our article on troubleshooting goals for some techniques to troubleshoot the issue.

 
Note:

The goal management interface (pictured above) will preview the original page, so elements created in a variation may not be visible. To track clicks on these elements, use the method described above where the goal is added by clicking on the element in the Visual Editor itself.

Track brand new content as a new goal

When you add new content to a variation, you may want to track clicks on that element with a new goal or as part of an existing goal. To add a new conversion goal and bind it to that element, click on the new item you want to track. Then select Track Clicks > Create New Click Goal.

You will see the Create goal module appear with a warning message: “No tracked elements were found.” Please disregard this warning. The warning simply tells you that this element does not exist on the original page that is being loaded. It does not indicate that the new element on your variation page is not being tracked.

Click Save to set the goal.

To check that your element is being tracked in the Editor, go to Options > Element Tracking and enable the Highlight Tracked Elements checkbox. This will outline all tracked elements in red.

Clicking on the element and selecting the 'Track Clicks' options will show you all the goals associated with that element.

Track brand new content as part of an existing goal

You may want to track clicks on new content using an existing goal, instead of a new goal. To do this, you will use a little jQuery to add the element to the Selector.

 
Note:

Want to learn more about jQuery? Check out our article on jQuery for Nontechnical Users. If you're comfortable with jQuery you can skip to the Modifying an Existing Goal section.


Create a New jQuery Selector for a Goal

If you are not familiar with jQuery, the Optimizely Editor can help. Click the element that you want to track and click Custom JavaScript. You will see the Code Editor section expand, with a new line all the way at the bottom.

Copy the code that is contained within quotes on the last line. Then click Cancel to exit out of the Code Editor.

Modify the Existing Goal

A list of jQuery selectors in the Edit goal dialog controls which elements are tracked by that goal. To add new content to the existing goal, click Set Up Goals, then Edit for the specific goal. Under the Advanced section of the Edit goals dialog, locate the Selector option.

The Selector box allows for a comma-separated list of selectors. To add a selector to your existing goal, add a comma and paste the selector name that you just copied above into the box.

Now if you turn on tracked element highlighting on the page you will see that all of the elements are tracked as one goal.

Track clicks on interactive content or multiple elements

When you're in the Goals menu, you can click  for additional functionality. Namely, the expanded Goals menu allows you to use Interactive Mode to select elements that require interaction with your site, and it allows you to select multiple elements.

Interactive Mode

Some elements are accessible only after interacting the page. To select elements that are not immediately available, click the  button, and use the toggle to switch to Interactive Mode using the toggle.

Multiple Elements

You can track clicks on multiple elements as part of the same Click Goal. In the preview, click on any additional elements for which you wish to track clicks. For a larger preview, click the  button.

Then, select the goals you want to track. Selected elements will be highlighted in red.

Track clicks on a redirect page or a page outside your experiment

An extra step is required to track clicks on a page in a redirect experiment or a page that exists down the funnel from your experiment page.

If you're trying to set up a goal on a page outside of your experiment's targeting conditions, follow our guide to goal targeting . Note that the article describes goal tracking in the context of redirect tests. You can follow the steps in that article, even if you're not running a redirect test. Just substitute the "redirect page" for whatever page you want to track goals on. This will replace the default Click Goal targeting, which is equal to the URL Targeting.

 
Important:

Before creating goals for your experiment, please ensure the Optimizely snippet has been added to any page on which you wish to track goals.

If you are looking to track clicks on a different domain, this Click Goal may experience tracking issues. Please refer to our other knowledge base article that details cross-domain tracking and explains further.


Advanced Usage

If you look at the Selector field in the Advanced section, you will see the specific jQuery selectors that Optimizely uses to bind the tracking calls. If you are comfortable with jQuery, you can modify this selector to suit your needs.

Set your own selector

You can enter custom jQuery selectors in the Advanced options. Using your own jQuery selector is especially useful if you want to track clicks on an entire class of elements rather than just one specific element.

To do this, you'll often need to manually find a selector on your page. The linked article will teach you how to do that.

For example, imagine you were testing a product page and wanted to track clicks on all of the "Buy Now" buttons. If you opened the goal dialog and clicked on one element, Optimizely would populate a selector that is specific to that ONE element. With a quick modification to the selector, you can select all of the products at once. For example, use a less specific selector, like .buynow > img instead of .buynow > img:eq(0) by deleting the highlighted portion below:

 
Important:

Do not alter the provided value for "Custom event name." Optimizely generates this name from the plain English name you gave to the click goal when you created it. Altering this value will break the standard click function binding Optimizely uses to track your click goals to your experiment. As a result, you will not see click goals tracking on the Results page.

Track clicks on elements that are not available on pageload

Tracking clicks on elements that are not always available on pageload is possible with live bindings. This method involves using the Custom Event Goal format.

Based on the information that you get from the Create Goal screen, you can write four lines of code that you can add to the Experiment JavaScript of the experiment. Just take the custom event name and selector name and insert them into the following JavaScript, which should be added to your experiment's Experiment JavaScript.

 
Note:

Depending on what version of jQuery you're using, you may need to modify the above code slightly. Optimizely uses jQuery version 1.11.3 by default, and has tested it to be backwards-compatible with version 1.6.4. 

Certain functions from version 1.6.4 are not included in 1.11.3, most notably .live(). So if you have tried using a function such as $().live("mousedown"...) or similar, try using $().on("mousedown) instead -- the syntax will be the same. For more information on live binding, see this article on event binding methods.

/* _optimizely_evaluate=force */
window['optimizely'] = window['optimizely'] || [];
$("SELECTOR").live("mousedown", function() { 
   window.optimizely.push(["trackEvent","CUSTOMEVENTNAME"]); 
});
/* _optimizely_evaluate=safe */


Replace SELECTOR with the text in the Selector field and CUSTOMEVENTNAME with the text in the Custom event name field. See the screenshot below for an example:

Check which elements on a page are tracked

Element Tracking allows you to visually identify elements of your page that are associated with Click Goals.  To enable Element Tracking, click Options > Element Tracking. This will open the following dialog box:

Toggle the check mark to turn Element Tracking on and off.  When enabled, elements of your page associated with Click Goals will be outlined in red.  You can see an example of what this looks like below.  On this page, six elements are being tracked.