How to use scroll depth data in Adobe Analytics to identify drop-off points

One of the most valuable insights scroll depth tracking offers is identifying where users drop off on your pages. For landing pages and key CTA pages, this is critical, as it reveals whether visitors are engaging with your content long enough to reach the main calls to action.

Pinpointing drop-off points

Scroll depth data allows you to see exactly how far down the page users scroll before they exit or lose interest. If a significant portion of your visitors drop off before reaching the key messaging or CTA, this indicates a potential issue in your content flow, page design, or CTA placement. By identifying these drop-off points, you can take action to reduce friction and keep users engaged.

Consider screen size: percentages vs. absolute values

When analyzing scroll depth, it’s important to take screen size into account. Users on mobile devices may experience your page differently from desktop users, as content is displayed in a more compressed format. For this reason, it’s often helpful to measure scroll depth both in percentage terms (how far down the page they’ve scrolled) and absolute values(such as pixels or viewport units).

• Percentage-based tracking: This helps normalize data across devices, making it easier to see the relative point where users drop off, regardless of screen size. For example, if 50% of mobile and desktop users are dropping off at around the same percentage mark, this provides a clear signal about engagement issues.
• Absolute value tracking: This gives you more granular control over understanding specific user behaviors, especially when dealing with longer pages or dynamic content that may load differently across devices.

Mobile vs. non-mobile device analysis

Analyzing scroll depth data separately for mobile and non-mobile (desktop or tablet) devices is crucial for understanding the full picture. Given the different user behaviors and screen sizes, you may find that mobile users drop off sooner due to the nature of scrolling on smaller screens, while desktop users may scroll further before disengaging.

By segmenting your data, you can:

• Mobile devices: Adjust content and CTA placement to ensure critical information is visible early on smaller screens, where users typically scroll faster.
• Non-mobile devices: For desktops or larger screens, you may have more flexibility in content layout, allowing for CTAs to be placed further down the page, provided engagement levels remain high.

Example: improving CTA engagement on a landing Page

Imagine you’re running a campaign with a dedicated landing page designed to collect sign-ups. After reviewing the scroll depth data segmented by device type, you notice that the majority of mobile users drop off at 20%, while desktop users continue scrolling to 37%, but your sign-up form and CTA button are placed at 70%.

By moving the form higher, say around the 15% mark for mobile users and 35% for desktop users, you ensure that more visitors see the CTA before they drop off. This significantly increases the likelihood of conversions across both device types. Scroll depth tracking helps you make these data-driven adjustments, optimizing the performance of your landing pages for all users.

How to Implement the New Scroll Depth Plugin in Adobe WebSDK

Now that we've covered how scroll depth data helps identify drop-off points and optimize your landing pages, let’s look at how to implement the new plugin in Adobe WebSDK.

Step 1: Add the following code snippet at the end of the "send event" action in your page view rule:

//clear previous page data

_satellite.cookie.remove('initialPercent');

_satellite.cookie.remove('highestPercent');

// Function to set a cookie with an optional expiration in minutes

function setCookie(name, value, minutes) {

    var expires = "";

    if (minutes) {

        var date = new Date();

        date.setTime(date.getTime() + (minutes * 60 * 1000));

        expires = "; expires=" + date.toUTCString();

    }

    document.cookie = name + "=" + (value || "") + expires + "; path=/";  

}

// Function to calculate the percentage of the page viewed

function getScrollPercent() {

    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    return Math.min(Math.round((scrollTop / scrollHeight) * 100), 100);

}

// Function to calculate the initial viewport percentage

function getInitialViewportPercent() {

    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

    const scrollHeight = document.documentElement.scrollHeight;

    return Math.min(Math.round((viewportHeight / scrollHeight) * 100), 100);

}

// Function to track page view data

function trackPageViewData() {

    // Set the initial percent viewed on page load

    if (!_satellite.cookie.get('initialPercent')) {

        // Calculate the initial viewport percentage

        const initialPercent = getInitialViewportPercent();

        _satellite.cookie.set('initialPercent',initialPercent);

        _satellite.cookie.set('highestPercent',initialPercent); // initially set with initial percent value, once user scrolls the page it gets updated.

    }

    // Get the current scroll percent

    const currentPercent = getScrollPercent();

    // Update the highest percent viewed

    const storedHighestPercent = parseFloat(_satellite.cookie.get('highestPercent') || 0);

    if (currentPercent > storedHighestPercent) {

       _satellite.cookie.set('highestPercent',currentPercent);

    }

}

// Initialize page view tracking

trackPageViewData();

// Initialize page view tracking

window.addEventListener('scroll', trackPageViewData); // Track on scroll events

window.addEventListener('click', trackPageViewData); // Track on click events

Step 2: Create a data element that reads the initialPercent and highestPercent values from cookies and builds a string:

var initialPercent = _satellite.cookie.get('initialPercent');
var highestPercent = _satellite.cookie.get('highestPercent');
if(initialPercent!= null && initialPercent!= 'undefined' && highestPercent != null && highestPercent != "undefined"){
  return "initialPercent="+initialPercent + " | "+ "highestPercent="+ highestPercent;
}
else{
  return "";
}

Step 3: Map the data element to the desired field in the XDM object in the same page view tracking rule.

Step 4: Build your changes in your development and make sure the eVar is captured with the desired value.

Step 5: Create rule-based classifications to separate initial percent and highest percent values into separate dimensions and then create sub classifications to bucket them if needed.

Considerations for scroll depth tracking

Scroll depth tracking offers valuable insights into how users engage with your content, but there are a few important considerations to be aware of when implementing this feature in Adobe WebSDK. 

Scroll data isn’t captured for users who bounce

Currently, our scroll depth plugin does not fire if a user bounces, meaning scroll depth data won’t be captured if a visitor leaves the page without interacting further. This could lead to missed insights, especially on high bounce-rate pages.

Testing before implementing to ensure a smooth rollout

Before implementing the scroll depth tracking plugin in a live environment, it's crucial to conduct thorough testing to ensure it works as expected and doesn't introduce any issues that could affect performance or data accuracy.

Maximizing insights with no additional cost

Scroll depth tracking provides invaluable insights into how users engage with your content and where they drop off, especially for landing pages and key CTA sections. However, it’s important to be mindful of factors like server calls, bounce data, and fast-scrolling behavior when implementing this functionality.

If you are looking to capture real-time scroll data or need help optimizing your scroll depth tracking, we’re happy to help. Contact us for guidance on the best approach for your business and to ensure you’re getting the most out of Adobe Analytics while keeping costs and performance in check.

Santosh would be happy to help! Reach out, get started and ask your questions to: [email protected]