Piwik PRO tracks page scrolls automatically, saves scroll data as custom events and shows results in a custom report or in the site inspector for Chrome. But if you want to track page scrolls manually, for example, track only scrolls on your home page, you need to set it up. In this article we’ll show you how.
Turn off automatic scroll tracking
Available from 16.17.0. In versions below 16.17.0, just can skip this step.
First, you need to turn off automatic scroll tracking, otherwise data will be collected twice.
To turn off automatic scroll tracking, follow these steps:
- Go to Menu > Administration.
- Navigate to Sites & apps.
- Choose the site or app you want to work with.
- Navigate to Data collection.
- In Page scrolling, turn off Measure scroll depth.
Set up custom events with scroll triggers
To collect scroll data, you need to add a custom event tag with a page scroll trigger for each scroll point. The easiest way is to create four tags with 25%, 50%, 75% and 100% scroll points, but you can use different points.
When creating a custom event tag, you can use the following framework:
- Event category:
built-in page scroll
(orHeatmap events
for versions below 16.17.0)Note: Use exactly this name if you want to use collect data for scrollmaps in the site inspector for Chrome.
- Event action: 25%, 50%, 75%, and 100%
- Event name: Leave it empty if you want to collect data for scrollmaps in the site inspector for Chrome.
Note: Each custom event contains information about a page URL so you don’t need to include it in custom event settings.
We’ll show you how to set up a custom event tag for a 25% scroll mark, and you’ll be able to repeat these steps for other marks.
To set up the tag for a 25% scroll mark, follow these steps:
- Go to Menu > Tag Manager.
- Click Add a tag.
- Name the tag and select the following type: Custom event.
- Click Next.
- Set
Category
as built-in page scroll (or Heatmap events for versions below 16.17.0) - Set
Action
as 25%. - Leave
Name
empty.
- In Tag triggers, click Add a trigger.
- Name the trigger.
- In Event type, choose the following type: Page scroll.
- Click Next.
- In Amount of page scrolled, set the percentage as 25%.
Tip: Percentage depth is the relative measure most commonly used for understanding the scroll depth. But if you want to use an absolute measure, you can change the percentage to pixels and record the scroll distance in pixels. This can be useful for comparing across devices where the relative percentage heights vary greatly.
- In Event conditions, optionally define conditions for the trigger. You can decide to fire the tag only on some pages.
- In Multiplicity, mark Once for each page view. This is the best option to see how far people are scrolling on a page.
- When you’re done, click OK.
- Test your tag in debug mode.
- When you’re happy with how the tag works, click Publish.
- Done! Now you’re collecting scroll data.
You can now repeat these steps to set up the 50%, 75%, and 100% marks. Remember to change the action to the 50%, 75%, and 100% and percentages in the trigger setup.
Set up reporting for page scrolls
As the last step, you can set up a custom report to see page scrolls for each page.
To set up reporting for page scrolls, follow these steps:
- Go to Menu > Analytics.
- Navigate to Custom reports.
- Click Add a report.
- Choose the following report type: Explorer.
- Name the report. Example:
Page scrolls
. - Choose the Visibility option: Author or All users. The All users option lets you share this report with other teammates.
- In Nested dimensions, set the following dimensions:
- Page URL
- Custom event action
- Add the following metrics:
- Custom events
- Unique custom events
- Optionally, set Default sorting options.
Tip: You can choose to sort by dimensions or metrics. The default setting will always show this type of sorting in your custom report.
- In Filter dimension, set the following filter: Custom event category is
built-in page scroll
.
- Click Create a report.
- All done! Now click on a page URL in your report to see how far visitors scroll on that page.