Custom event tracking

These code samples can be used to track events after specific user actions. The majority of these code samples should be used in Project JS, Shared Code, or Variation code.

Scroll depth

This function checks after each scroll event to see if a visitor has achieved certain scroll depth milestones. In the example below, custom events will be fired off when a visitor scrolls 25%, 50%, 75%, and 100% of the way down the page. You'll need to create custom events that correspond to the events below (e.g., "scroll25" for scrolling 25% of the way down the page).

📘

Note

This code uses jQuery's .scrollTop() method, which isn't included in Optimizely Web Experimentation's trimmed version of jQuery. To use this code within your Optimizely experiment, you must either include the full version of jQuery in Project Settings or use a native version of jQuery on the page.

JavaScript

/*
 * Usage
 *    This function fires custom events at different scroll depth milestones.
 */

  // Variables to prevent continuous firing of custom events

  var scrollTwentyFive = true;
  var scrollFifty = true;
  var scrollSeventyFive = true;
  var scrollOneHundred = true;

  // Create the scrollPercentage

  $(window).bind('scroll', function() {
      window.scrollPercent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;

      // Conditional code we'll use to fire events based on scrollPercentage.

      if (window.scrollPercent >= 25 && scrollTwentyFive) {
          window['optimizely'] = window['optimizely'] || [];
          window['optimizely'].push({type: "event", eventName: "scroll25"});
          scrollTwentyFive = false;
      }

      if (window.scrollPercent >= 50 && scrollFifty) {
          window['optimizely'] = window['optimizely'] || [];
          window['optimizely'].push({type: "event", eventName: "scroll50"});
          scrollFifty = false;
      }

      if (window.scrollPercent >= 75 && scrollSeventyFive) {
          window['optimizely'] = window['optimizely'] || [];
          window['optimizely'].push({type: "event", eventName: "scroll75"});
          scrollSeventyFive = false;
      }

      if (window.scrollPercent >= 100 && scrollOneHundred) {
          window['optimizely'] = window['optimizely'] || [];
          window['optimizely'].push({type: "event", eventName: "scroll100"});
          scrollOneHundred = false;
      }

  });

Track clicks on dynamic content

This JavaScript code will let you track clicks on elements loaded after DOM ready as a custom event in Optimizely Web Experimentation. See our article on events to learn more about tracking custom events.

JavaScript

/*
 *  Usage
 *    Track clicks on elements loaded after DOM ready.  The .delegate() method allows you to select all current and future elements that match the selector passed in as the first argument.
 *
 *  @param {String} selector - Provide the element selector.
 *  @param {String} eventName - Provide the custom event name.
 */

 var selector = [YOUR_SELECTOR];
 var eventName = [YOUR_EVENT_NAME];

 $('html').delegate(selector, 'mousedown touchend', function() {
   window['optimizely'] = window['optimizely'] || [];
   window['optimizely'].push({type: "event",eventName: "eventName"});
 });