Skip to main content

We are currently experiencing an issue that is preventing customers from submitting support tickets. Please contact us at (866) 819-4486 if you need immediate assistance.

x
Optimizely Knowledge Base

Custom event goals

This article will help you:
  • Track events that are not clicks or pageviews 
  • Set up custom event goals in Optimizely
  • Add tracking calls to your site to register custom events and pass information to Optimizely

Custom tracking events allow you to capture and report on visitor actions or events that might not be related exclusively to clicks or page views. Unlike default goals, custom events let you track an element that isn’t a pageview or a click. 

Want to see custom event goals in action? Watch this short video.

 

Essentially, the custom event API is a call to the Optimizely snippet -- the snippet recognizes the event and generates the appropriate HTTP request so that the conversion event is attributed to your experiment’s results.  The Optimizely snippet must be implemented on the page where the custom event is triggered.

 
You can use Optimizely’s custom event tracking to capture revenue. For additional details on how to set this up, check out our article on revenue tracking.
 
Tip:

Have a question about custom event goals? Head over to the Optimizely Community to post a discussion and see what others are talking about. Also, check out the Optimizely developer showcase for tips and tricks. 

Specific examples where Custom Events are helpful

  • You may have a form on your page that does not drop visitors onto a unique confirmation page. If you want to track successful form submissions rather than just clicks on the button, you can tie a custom event to the logic on your page that qualifies the form submission and progresses the user to the next step. Custom events would also be useful for AJAX form submissions that do not generate a new page URL.
  • You may have a pop-up that appears for the visitor at specific instances in the flow. You can track views of this pop-up by triggering a Custom Event when the pop-up is shown.
  • You may have content that is added to the page as the user progresses through a flow but the URL does not change. You can use the bind() functionality to attach event handlers to the documents element of the page. You can bind a custom event that listens for the presence of clicks on the element when it appears.
  • You want to track dropoff within a form and see which fields a visitor is filling out. You can tie a Custom Event to actions taken in a specific input field.
  • You want to track your visitors' behavior on a website that uses a Single-Page App framework such as AngularJS, BackboneJS or EmberJS

Format to add a Custom Event for Web experiments

The basic format for Custom Events in Web experiments is listed below. Depending on the event you’d like to track, you can either add the code to your website or you can add it to the Experiment JavaScript of your experiment. Custom Events can also be called from Project Javascript, if your current plan includes it.

Our developer docs include an example of the implementation of a common Custom Event goal, allowing you to track scroll depth.

For mobile app experiments, we have a dedicated section covering custom events in our developer docs, for iOS and Android

 
Note:

Adding a custom event to the Experiment JavaScript will only work if the experiment is active on the page in question. If you would like to track custom event goals outside the scope of the experiment, the code will need to be placed natively on the page.

Here is an example of the lines of code needed to be added on your page to trigger a custom event goal: 

 
// ensures the optimizely object is defined globally using
window['optimizely'] = window['optimizely'] || [];

// sends a tracking call to Optimizely for the given event name. 
window.optimizely.push(["trackEvent", "eventName"]);

In this code snippet, the “eventName” will be tracked and associated with the appropriate visitor/experiment/variation. Choose a value for “eventName” that correlates with the intent of your goal, for example “form_success” if you are looking to track form submits. 

Write down the value you choose for “eventName” as you will need to reference it later in the Optimizely dashboard when creating the custom event goal. This part is covered in depth in the Add your Custom Event as a goal for your experiment section below. 


You can also include the call inside of a function that gets called elsewhere.

var trackCustomEvent = function() {   
window['optimizely'] = window['optimizely'] || [];
window.optimizely.push(["trackEvent", "eventName"]); }


You can manually trigger the Custom Event to track the number of actions that complete a specific action using jQuery.

 window['optimizely'] = window['optimizely'] || [];
 $("#ButtonID").bind("mousedown", function() {     
     window.optimizely.push(["trackEvent", "eventName"]); 
 });
 

Recommendation: You should use bind() on the mousedown event and not the click event for hyperlinks in order to maximize browser compatibility. WebKit browsers such as Chrome and Safari are unable to process tracking calls bound to the click event because the browser immediately follows the link. Optimizely uses a trimmed version of jQuery 1.11.3 by default, and has also tested it to be backwards-compatible with version 1.6.4. If you're using version 1.11.3, or your own version of jQuery version 1.7 or later, we recommend on() instead of live() or bind().  

 

Add your Custom Event as a goal for your experiment

  1. Log in to your Optimizely account and navigate to the relevant experiment.
     
  2. In the Editor, click the goals icon () and then click Create a New Goal.


     
  3. Choose Custom Events from the What to Track dropdown.
     
  4. Give your goal a name.
     
  5. In the field labeled Custom Event to Track, here's what to enter. 

    For a Web experiment:

    Enter the second argument of the “trackEvent” call for a Web experiment (whatever you entered in place of "eventName"). The value you enter must match the value in your code exactly. Special characters (including spaces) are not allowed and will prevent the goal from firing. It is recommended to use underscores ( _ ) instead of spaces.

    For an iOS experiment: 

    Enter a string to uniquely identify your custom goal. In order to successfully track this goal, the same string should be entered as the NSString value in our developer's guide. The value you enter must match the value in your code exactly. Note that you won't be able to see this custom event fire unless you're in Preview mode.


     
  6. Click Save to add the goal to your experiment. You must also re-save the experiment in order to start capturing results. You can achieve that by clicking on the Save Now button at the right hand side of the Optimizely Visual Editor. 
  7. Feel free to reuse this custom event goal for other experiments as well.
 

Confirm your Custom Event is working correctly

When the appropriate action is triggered, you should see a HTTP request in the network traffic. The n parameter of the request header should match the eventName parameter of your API call. 

In Chrome, you can access the HTTP requests by opening up the Chrome Developer Tools and heading to the Network tab.

To learn more about checking network traffic, see our QA article. For additional information, check out our Knowledge Base article on troubleshooting Optimizely goals

 
 
Note

Optimizely will de-duplicate results based on a visitor’s unique user ID. This means that a conversion will show up only once for a given visitor. As an example, if one visitor completed a form 10 times, this would only count as one conversion event. De-duplication applies to all conversion events, with the exception of revenue.