Article sections
The scroll tracking feature allows you to trigger a Google Analytics event when a piece of content becomes visible on your website.
One of the reasons for creating this plugin was in fact related to this feature; I had a one-page website with a pricing table at the bottom and wanted to get some statistics about how many users scrolled down enough to view it.
Scroll tracking configuration
Suppose that you want to know how many visitors scrolled all the way down to the bottom of your website’s pages and reached the WordPress footer area.
Identifying the tracked element
The first thing we need to do is to identify the footer area uniquely. Luckily, the underlying HTML code gives us multiple ways to do that. Our plugin uses two of them to determine how to behave.
In HTML, an element can have either an “id” which has to be unique or multiple “classes” assigned. If you wrote the code for a page element such as a button, link paragraph, you could specify a class or id, and later use that in our plugin’s settings. But if you already have an element like the footer in our example, you will have to find a way to extract this information.
I will use the built-in Chrome Developer tools to show you how to grab the class of the footer on a demo page. Most browsers have similar tools to do the same.
Right-click the general area of the section you want to track and select the Inspect option. Chrome will launch it’s developer tools pane and highlight the section’s HTML code. If you move the cursor around that element, you will see chrome highlighting the actual area in on the page.
We can see that the footer area has the class – “fusion-footer.” That was easy.
Configure Tracking
Now that we can uniquely identify the area, it is time to configure the plugin:
- Open the Scroll Tracking tab, and set the Selector to fusion-footer (the class we just grabbed).
- Choose the Type of “class”.
- Set the Event Category, Action, and Label to whatever you like. This information will show up in Google Analytics every time someone scrolls to the area.
- We recommend leaving the non-interaction field set to true. You can read more about it here – https://support.google.com/analytics/answer/1033068#NonInteractionEvents.
- Save the settings.
Users of the Pro version of the plugin can also use placeholders in the Category, Action, and Label fields, to include more dynamic information for each event.
Testing the Event
You can now open or refresh your website’s page and scroll down until the footer becomes visible.
The Google Analytics real time dashboard should now show you this event with all the information as you can see in the screenshot.