Help Center

Scroll Listener

The Scroll Listener can be used to identify how visitors scroll through content in your site or application. The Scroll Listener throws an event when the user scrolls down the page. In this way, you can easily trigger a dialogue on scroll behavior. The following scroll thresholds are used by default: 20%, 50%, 80%

When the threshold is exceeded, an event is thrown. This event can be used at the When tab of a dialogue, for example to trigger a dialogue when a visitor scrolls to the bottom:

Scroll Listener in BlueConic.png

The following sections detail how to install the Scroll Listener in BlueConic, add it to your individual tenant, and configure it.


This specialized listener was created outside the BlueConic product development team and does not come preinstalled in the BlueConic platform.

CDP use cases for the Scroll Listener

The BlueConic Scroll Listener can power a number of CDP use cases:

  • Use the listener’s events to trigger a dialogue to show based on how far a user scrolls down the page, even on pages that use split-screen scroll bars for different parts of the page.
  • Use the Scroll Listener with a Scoring Listener to count the number of product pages where a user scrolls down to a product reviews section (based on a scroll depth of 75%). By tracking scroll depth across 7, 30, or 90 days, you can tracking buyers’ interests in reviews and trigger special dialogue promotions.

Install the Scroll Listener

By default, the Scroll Listener is not installed in BlueConic. To install it, navigate to BlueConic Settings > Plugins, click the Add plugin button, and register the following external URL:

For more detailed instructions, see What are BlueConic plugins? And if you need further assistance, contact BlueConic Support

Add the Scroll Listener

  1. With the Scroll Listener installed in BlueConic, click Listeners in the main navigation bar at the top.
  2. Click the Add listener button.
  3. In the Add listener window that opens, check the Show all box, then scroll down to the bottom and click the Scroll Listener option.
  4. On the Scroll Listener page that opens, configure the listener as described in the next section.
  5. When finished, use the toggle at the top to turn the listener on and click Save. Now the listener will then start tracking and collecting scrolling data.

Configure the Scroll Listener

The Scroll Listener page contains the following configurations:

Scroll Listener.png

Choosing a scroll percentage

  • Where: The default is to have the listener appear on all pages on all channels. You can customize this field.
  • Extra event scroll %: In addition to the default scroll percentages, you can trigger an additional event by entering an additional scroll percentage. (Default scroll percentages are 20% 50% 80%) 
    Note: When specifying a custom scroll event, you should also specify a custom event name, which will automatically appear on the When tab of a dialogue in BlueConic.
  • Extra scroll event: Add an extra scroll event to be triggered once the specified scroll depth percentage is reached. This event can be used to trigger a dialogue or within a listener to activate data collection. Select from the dropdown list in this field, or create a new event by typing a new name.
  • Scroll element selector: When you have a split screen (so a part of the page is scrollable), you can define a selector of the scrollable area to track scrolling behavior in this area
    Choose a selector of the element containing the scroll bar you want to monitor with this listener. Opens the BlueConic Visual Picker, where you can select a position. 
  • Delay event (seconds): When configured, the extra scroll event will be delayed from triggering until the user has been on the current page for at least the number of seconds configured here for the delay. When you specify the delay, it will start tracking the scrolling behavior after a certain amount of time, to be more certain the visitor is reading the content


Was this article helpful?
0 out of 0 found this helpful