Scroll Event
The scroll event sends tracking data when a visitor scrolls through a screen. You can specify whether to measure the scroll amount by pixels or screen percentage. You can also specify whether to track vertical scrolling, horizontal scrolling, or both.
See the full list of available events.
Prerequisites
- utag v4.38 or higher. For additional information, see How to upgrade utag.js.
How it works
A scroll event tracks when a visitor scrolls through a screen. When a visitor performs the action, the tracking call is triggered.
Event triggers
Event triggers are the specific actions the event listener tracks.
This event can track the following triggers:
- Vertical Scroll Depths – Fire when the user scrolls down the screen.
- Horizontal Scroll Depths – Fire when the user scrolls across the screen.
Set the following thresholds to control when to trigger each event:
- Percent - Measure scroll distance by a percentage of the screen.
- Pixels - Measure scroll distance by a number of pixels.
Enter multiple values as a comma-separated list to trigger at different screen locations. For example, to measure percentages enter 25, 50, 75, 100
, or to measure pixels enter 2000, 5000
.
Event trigger variables
Event trigger variables are the values the event listener sends with the tracking call. The scroll event has the following default event trigger variables:
Variable | Description | Example | Type |
---|---|---|---|
tealium_event |
Tealium event name. | scroll |
String |
scroll_depth |
The amount of scroll. | 50 |
Number |
scroll_depth_type |
The measurement of scroll, by percent or pixels . |
percent |
String |
scroll_direction |
The direction of scroll, vertical or horizontal . |
vertical |
String |
Event tracking
Horizontal Scroll
Identifier | Description |
---|---|
tealium_event="scroll" |
The visitor scrolled through the screen in a specified direction and amount. |
Example
{
"tealium_event" : "scroll",
"scroll_depth" : "500",
"scroll_depth_type" : "pixels",
"scroll_direction" : "horizontal"
}
Vertical Scroll
Identifier | Description |
---|---|
tealium_event="scroll" |
The visitor scrolled through the screen in a specified direction and amount. |
Example
{
"tealium_event" : "scroll",
"scroll_depth" : "50",
"scroll_depth_type" : "percent",
"scroll_direction" : "vertical"
}
This page was last updated: January 30, 2023