Custom event tracking

3 min

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

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 (for example, "scroll25" for scrolling 25% of the way down the page).

/*
 * Usage
 *    This function fires custom events at different scroll depth milestones.
 */
// Variables to prevent continuous firing of custom events
let hasFiredScroll25Event = false;
let hasFiredScroll50Event = false;
let hasFiredScroll75Event = false;
let hasFiredScroll100Event = false;
// Function to handle scroll event
function handleScrollEvent() {
    //DOM queries
    const windowHeight = window.innerHeight;
    const bodyHeight = document.body.scrollHeight;
    // Calculate scroll percentage
    const scrollPercent = (window.scrollY / (bodyHeight - windowHeight)) * 100;
    window.optimizely = window.optimizely || [];
    // Conditional code we'll use to fire events based on scrollPercentage.
    if (scrollPercent >= 25 && !hasFiredScroll25Event) {
        // Push an event to the Optimizely data layer
        window.optimizely.push({type: "event", eventName: "scroll25"});
        hasFiredScroll25Event = true;
    }
    if (scrollPercent >= 50 && !hasFiredScroll50Event) {
        window.optimizely.push({type: "event", eventName: "scroll50"});
        hasFiredScroll50Event = true;
    }
    if (scrollPercent >= 75 && !hasFiredScroll75Event) {
        window.optimizely.push({type: "event", eventName: "scroll75"});
        hasFiredScroll75Event = true;
    }
    if (scrollPercent >= 100 && !hasFiredScroll100Event) {
        window.optimizely.push({type: "event", eventName: "scroll100"});
        hasFiredScroll100Event = true;
    }
}
// Add event listener outside the function
window.addEventListener('scroll', handleScrollEvent);

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 Events to learn more about tracking custom events.

/*
 *  Usage
 *    Track clicks on elements loaded after DOM ready. The .addEventListener() method allows you to add an event listener to the document object and 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.
 */
const selector = '[YOUR_SELECTOR]';
const eventName = '[YOUR_EVENT_NAME]';
document.addEventListener('mousedown', handleClick);
document.addEventListener('touchend', handleClick);
function handleClick(event) {
  const target = event.target;
  if (target.matches(selector)) {
    window.optimizely = window.optimizely || [];
    window.optimizely.push({type: 'event', eventName: eventName});
  }
}