How can I track page scrolls (manual method)?

Piwik PRO automatically tracks page scrolls on your website. It then saves the scroll data as custom events and shows results in custom reports or in the site inspector for Chrome.

However, if you want to change the way page scrolls are tracked, you can use a manual method.

Turn off automatic scroll tracking

Available from 16.17.0. In versions below 16.17.0, just skip this step.  

The first thing you need to do is turn off the automatic scroll tracking, otherwise the data will be collected twice.

To turn off automatic scroll tracking, follow these steps:

1. Go to Menu > Administration.
2. Navigate to Sites & apps.
3. Choose the site or app you want to work with.
4. Navigate to Data collection.
5. In Page scrolling, turn off Measure scroll depth.

   

6. Done!

Set up custom events with scroll triggers

Next, you need to create custom event tags for different scroll points. You can go with the easy option of four tags at 25%, 50%, 75% and 100%, or pick your own points.

When creating a custom event tag, you can use the following framework:

• Event category: built-in page scroll (or Heatmap events for versions below 16.17.0)

  Note: Use exactly this name if you want to use the collected 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:

1. Go to Menu > Tag Manager.
2. Click Add a tag.
3. Name the your and select the following type: Custom event.
4. Click Next.
5. Fill in the following fields:
   • Category: built-in page scroll (or Heatmap events for versions below 16.17.0)
   • Action: 25%
   • Name: – (Leave it empty.)

   

6. In Tag triggers, click Add a trigger.
7. Name the trigger.
8. In Event type, choose the following type: Page scroll.

   

9. Click Next.
10. In Amount of page scrolled, set the percentage to 25%.

    

    Tip: Percentage depth is the most common way to grasp scroll depth. However, if you prefer an absolute measure, switch from percentages to pixels and track the scroll distance in pixels. This is handy for comparing across devices with varying relative percentage heights.

11. (Optional) In Event conditions, define trigger conditions. You can choose to fire your tag only on certain pages.
12. In Multiplicity, select Once for each page view. This is the best option to see how far people scroll down the page.

    

13. When you’re done, click Save.
14. Test your tag in debug mode.
15. When you’re happy with how the tag works, click Publish.
16. Done! Now you’re collecting scroll data.

You can now repeat these steps to set the 50%, 75% and 100% marks. Remember to change the action to 50%, 75% and 100% and the percentages in your trigger settings.

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:

1. Go to Menu > Analytics.
2. Navigate to Custom reports.
3. Click Add a report.
4. Choose the following report type: Explorer.
5. Name your report. Example: Page scrolls.
6. In Visibility, choose Author or All users. All users lets you share this report with your teammates.
7. In Nested dimensions, set the following dimensions:
   • Page URL
   • Custom event action

   

8. Add the following metrics:
   • Custom events
   • Unique custom events

   

9. (Optional) Set up Default sorting options.

   Tip: Default sorting makes the data appear in your report in a specific order based on the selected dimension or metric.

10. In Filter dimension, set the following filter: Custom event category is built-in page scroll.

    

11. Click Save.
12. All done! You can now view scroll data when clicking on a page URL.