Google Tag Manager, enables us to perform numerous actions by utilizing data made available to the client in ways beyond page view events.
For basic information and setup instructions regarding Google Tag Manager, please refer to the article titled What is Google Tag Manager?. Additionally, you can follow the basic setup steps in video format through Google Tag Manager: Beginner’s Tutorial.
So, what will this article cover?
- Capturing
windowand elementscrollevents 1 - Using Google Tag Manager scroll events
- Sending scroll events to Google Analytics 2
In future posts, we’ll utilize these data collected via Google Analytics within Looker Studio reports.
The operations discussed in this article are part of the Looker Studio User Interaction Report.
Scroll Events
The addEventListener function also allows us to capture movements along the X and Y axes of the window and HTML elements, beyond commonly used events such as click. Using properties from the Window Object, namely pageXOffset, pageYOffset, scrollX, and scrollY, we can achieve this operation based on the window object3.
window.addEventListener('scroll', function () {
console.log(`pageXOffset: ${window.pageXOffset}`);
console.log(`pageYOffset: ${window.pageYOffset}`);
console.log(`scrollX: ${window.scrollX}`); // alias: pageXOffset
console.log(`scrollY: ${window.scrollY}`); // alias: pageYOffset
});However, for HTML elements outside of iframe, we need to rely on different properties for scroll events. If additional clarification is required specifically for iframe, when an iframe element is used within a page, the browser creates a separate window object for the HTML document and a separate one for the iframe. Therefore, iframe operations must be planned separately. For our examples, we can take elements such as textarea and div as a basis.
Upon examining the DOM properties, we observe the following scroll-related properties: scrollHeight, scrollLeft, scrollLeftMax, scrollTop, scrollTopMax, and scrollWidth. Among these definitions, we perform operations using scrollTop and scrollLeft to capture movements along the X and Y axes.
document.querySelector('div').addEventListener('scroll', function () {
console.log(`scrollTop: ${this.scrollTop}`);
console.log(`scrollLeft: ${this.scrollLeft}`);
});Google Tag Manager and Scroll Event
Google Tag Manager provides us with the Scroll Depth Threshold, Scroll Depth Units, and Scroll Direction variables, along with a Scroll Depth trigger under the User Engagement section.
The Scroll Depth Threshold is a numerical value indicating the scroll depth that triggers the trigger. For percentage thresholds (25, 50, 75, 100, etc.), this value ranges from 0 to 100. For pixel-based thresholds, it represents the specified number of pixels.
The Scroll Depth Units specifies the unit for the threshold—either in pixels or as a percentage.
Scroll Direction, informs whether the trigger threshold is vertical (vertical) or horizontal (horizontal).
The scroll action can be processed together with gtm.js, gtm.dom, or gtm.load. However, since elements added during page loading—such as images—can affect page depth, it is recommended to perform the action after the entire page has loaded, i.e., using gtm.load.
If the scroll dynamically changes (scrolls infinitely), you can instead use an element visibility trigger (element visibility trigger) instead of a scroll trigger 4.
If an action is required based on the Scroll Depth Threshold value during page loading, the trigger will occur when the threshold is reached during page loading, without user interaction 4.
Sending Scroll Events to Google Analytics
As you might expect, one of the most frequently occurring actions during page viewing is the scroll event. Therefore, I recommend evaluating the scroll event for a specific purpose and sending it to Google Analytics in a way that its values can be easily distinguished from other event values. If your goal is simply to understand how visitors perceive the content of the page, I recommend using Hotjar and heatmaps 5. This will provide you with more meaningful insights and enable you to generate ideas.
You have evaluated the situation and decided to send scroll movements to Google Analytics as a custom event via GTM. Proceed accordingly.
Our goal is to observe scroll depth within a page context. In this case, we’ll need the following variables: {{Page Path}}, {{Scroll Depth Threshold}}.
Create a new Google Analytics tag and select Event under the Tracking Type option.
We’ll need a trigger to activate the previously defined tag. For this purpose, we’ll use the scroll action. Therefore, we should select the Scroll Depth trigger option.
Of course, you can also conditionally restrict the process. For instance, you might want to observe scroll depth only on a specific landing page. In the above example image, scroll depth is evaluated both horizontally and vertically, in percentage segments. If your page does not require movement along the X-axis, I recommend evaluating only vertical (Y-axis) scroll depth.
Shortly after completing the above steps, you’ll be able to view scroll event values in Google Analytics under the real-time events section and in the reports under Behavior > Events. After that, the use of these data will vary depending on your specific objectives. For example, in the report section below, you may see the scroll event presented as a funnel, and upon analysis, you might conclude that only 56% of the pages are fully visible.
One of the results shown by the chart indicates that we should avoid having critical information in the footer section of the page.
*[property]: property
*[HTML]: HyperText Markup Language