How Scroll Depth Affects eCommerce Conversion Rates
As an eCommerce store, you are always on the lookout to boost your conversion rates. You have probably tried various strategies, including offering discounts, launching marketing campaigns, and optimising your product pages. But have you considered the impact that scroll depth might have on your conversion rates?
We speak with clients who run online stores every day, and scroll depth is something which is often overlooked. We understand it can be challenging to keep up with the various digital elements involved with running an eCommerce store, which is why we’ve put together this article to make scroll depth simple.
What Is Scroll Depth?
Scroll depth refers to the extent to which website visitors scroll down a web page. With a growing number of mobile purchases, it’s become a crucial aspect for eCommerce websites to consider. By tracking your visitors’ scroll depth, you gain valuable insights into customer interaction with your store which you can use to optimise site layout and design.
To understand its impact on your conversion rates, you first need to measure scroll depth. Fortunately, measuring scroll depth is simple thanks to its integration as a trackable metric in Google Analytics 4. The scroll depth tracking feature in Google Analytics 4 includes both horizontal and vertical scrolling, expressed as a percentage of pixels.
Take a look at our guide at the bottom of this article to learn how you can set up scroll depth tracking in Google Analytics 4 for your website.
This feature will give you an idea of how far down a page visitors are scrolling and exactly where they are dropping off. With this information, you can start making changes to your website that will encourage visitors to scroll further down your pages.
The Benefits of Measuring Scroll Depth For Your eCommerce Store
Measuring scroll depth provides new and unique insights into your eCommerce website, beyond what other metrics can reveal. This helps to provide a clearer understanding of user behaviour which informs optimisation that can lead to an increase in conversions.
You might be asking the question of whether investing time in scroll depth is really worth the effort. Let’s take a look at some of its main benefits which might help answer this.
Let’s start with the most obvious benefit. Scroll depth can help easily identify the placement of key elements on a page. This includes content such as product images, videos or banners, as well as other elements like CTAs or user reviews. By understanding how far users are scrolling on a page, you can ensure that critical elements responsible for user conversion are strategically placed in the most impactful areas of the page. If your customers tend to stop scrolling at the bottom of a product page, consider placing a call to action there to increase the chances of conversion. On the other hand, if they stop scrolling halfway through the page, you need to place your CTAs accordingly or make amends to the product page to encourage users to scroll further down.
Another benefit of measuring scroll depth is that it can reveal underperforming areas of your website that customers don’t find interesting or engaging. This is information you can’t afford to miss out on. Using this approach offers a unique window into analysing the structure of your site. For example, huge discrepancies in scroll depth between product pages or category pages might suggest that the way you present products to your audience is inconsistent. In this case, measuring scroll depth can help identify which types of content or which page designs are most engaging, allowing you to refine your content strategy and apply what works across all product and category pages.
In a different scenario, where the scroll depth percentage is similar but low across all product pages, the problem could lie within your product page layout. This may indicate that the information below a certain point of your product pages is not engaging or relevant. If someone visits your site and doesn’t see anything that catches their eye within the first few seconds, they’re likely to leave. In fact, research has shown that web pages only have a few seconds to make a good first impression and capture someone’s attention before they leave your website*.
Finally, measuring scroll depth can help identify areas that may be hindering search engine optimisation efforts. This is because search engines like Google apply user behaviour metrics, such as scroll depth, to determine the quality and relevance of your site. If visitors are leaving quickly and not scrolling down the page, it could indicate to search engines that the content on your website is not relevant or useful. This could result in harming your search engine ranking.
These are just some examples of how scroll depth analysis can provide valuable insights into user engagement and help you make informed decisions to improve your store. Retailers that don’t take advantage of this analysis could be missing out on potential conversions resulting in lower sales and decreased revenue from mobile traffic.
What Is a Good Scroll Depth and How To Improve It
While a good scroll depth for an eCommerce website will vary depending on the specific website and industry, some studies found that the average scroll depth for a web page is 58% with users spending less than 15 seconds actively on a page*. A study by the Nielsen Norman Group found that pages with a high scroll depth tend to have a higher conversion rate for certain types of tasks, such as responding to a CTA**.
When it comes to product pages, the scroll depth will often depend on the length of the content and the number of images and videos included. Longer pages tend to have a higher scroll depth, with users spending more time on the page**.
Often, users will scroll down to view additional product information, such as detailed descriptions, images to see the product from different angles, or product reviews.
This demonstrates that the two most important factors affecting scroll depth are user engagement and information that helps to make a more informed purchase decision.
To improve scroll depth, it’s important to keep users engaged. Some easy ways to do this include:
- The use of high-quality images, videos and other media that grab attention and showcase your products.
- Clear headings and subheadings to guide users through the page.
- Product descriptions should be easy to understand and include all the key information about the product.
- Review the placement of various elements on your product pages to ensure they are easy to navigate.
- Consider the elements of your pages that are above the fold. It’s best to have key CTAs, such as “add to cart” or “buy now”, above the fold so that users don’t have to scroll deep into the page to find them.
- Strategically place secondary CTA buttons throughout the page to encourage deeper scrolling and engagement.
- Lastly, keep mobile optimisation at the forefront of designing and changing even the smallest element of your store. A study by Google found that users tend to scroll further down the page on mobile devices compared to desktop computers.
These examples should all be relatively simple. If implementing these suggestions seems daunting because your eCommerce platform doesn’t allow quick and effortless changes to your homepage or product page layout, consider switching to an agile platform or CMS. Agile content creation tools can help eCommerce businesses improve their scroll depth by making it easier to create and update website content.
Get started today and see the results for yourself. If you’re interested in learning more about how scroll depth affects eCommerce conversion rates, sign up for our webinar where our eCommerce experts and partners from BigCommerce and Storyblok share real-life examples and show you exactly how it all works in practice.
*https://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/
**https://www.nngroup.com/articles/scrolling-and-attention/
How To Set Up Scroll Depth Tracking In Google Analytics 4
Before we begin, you should know that Google Analytics 4 measures scroll depth by default, but the way it does it is very limited.
In GA4, open the panel of the left, click on Reports, Engagement and Events.
Here, under Event Name, you will find the default scroll depth event called ‘scroll’.
However, this event only triggers when visitors scroll 90% of a web page. This means that you cannot see any other thresholds, which is what you’ll need if you are thinking about improving the user experience and conversion rates on your website.
Luckily, this can be changed in Google Tag Manager. But before you go there, click on the Admin button in the bottom-left corner in GA4.
Click on Data Streams, select your website and copy the Measurement ID on the right-hand side.
Now, go to Google Tag Manager and click on Variables in the panel on the left.
Click on Configure.
A menu will appear on the right called ‘Configure Built-In Variables.’ Scroll down until you see the Scrolling section and make sure every Scroll box is checked.
Go back to the menu on the left and click on Tags.
Click on ‘New’ to create a new scroll event tag.
Give your tag a name, for example Scroll Tracking In GA4, and then select Tag Configuration.
From the slide out menu that will appear on the right, select Google Analytics: GA4 Event.
This will take you back to the Tag Configuration menu. Select ‘None – Manually Set ID’ as your Configuration Tag and paste the Measurement ID copied from GA4 into the Measurement ID box.
Now you have to specify the name of the event. This is what you’ll later see in your reports in GA4. This is where it differs from the default GA4 setup. Let’s say you want to measure scroll events at 10%, 25%, 50% and 75%.
Click on the icon with ‘+’ next to the Event Name bar.
Choose ‘Scroll Depth Thresholds’ from the menu that will appear.
Type ‘% Scroll’ in the Event Name after the brackets.
Now it’s time to choose a trigger for this tag. Click on the Triggering box.
A menu will appear on the right side of the screen. Choose ‘Scroll Depth’ from the list.
Click on the firing trigger you selected and another menu will appear.
Here you can choose if you want to track vertical or horizontal scrolls, or both. In our case, we only need to track the vertical scrolls.
You get the option to measure the scroll depth in percentages or pixels. By default, the percentage button is selected.
It’s time to add the thresholds. Add them in the Percentages box, separated by commas. In our case, we want to measure scroll depth at 10, 25, 50 and 75%.
Once the thresholds are in place, click on the Save button in the top right corner.
To make sure you’ve set up everything correctly, it’s best to preview your new tag before making it live. Click on the Preview button in the top right corner to test your new scroll depth tracking.
A new window will open. Add the URL of your website and then click Connect.
Another new window will open with your website. Start scrolling down your webpage until you reach the bottom. As you scroll down, you should see ‘Scroll Depth’ events in the Google Tag Manager preview mode tab.
Click on one of the Scroll Depth events and you should see your new tag firing.
Click on the fired tag and a new overlay will appear with details of the tag and trigger.
You can see that the Event Name is the predefined variable from your tag, and the ‘%’ and ‘Scroll’ text values are the ones you provided when defining the event name.
You can also see the value of the threshold by selecting the Data Layer tab. One of the parameters you’ll see is called ‘scrollThreshold.’ It will show you the threshold value of this particular Scroll Depth event.
Now, go back to GA4 and choose ‘Reports’ and ‘Real-time’ from the menu on the left.
You will see real-time scroll events with your custom thresholds appearing in the Event count section.
If you can see your new Scroll Depth events in the GTM preview and in real-time in GA4 then you’ve done everything right.
You can now go back to Google Tag Manager and submit your changes by clicking the Submit button in the top right corner of the page.
Give it a day and then go to your GA4. Select Reports, Engagements and Events.
Make sure the selected date is after you set up your scroll depth tag in GTM. If you’ve done everything correctly, you should see your new scroll events with the predefined thresholds on the list of events.
The default GA4 scroll event will continue to appear alongside your new scroll events. If you want to disable the default scroll event click on Admin in the bottom left corner and select Data Streams from the list of properties.
Select your website. A new menu will open on the right. Click on the gear icon in the Enhanced measurement section.
Another menu will appear. Disable the button next to ‘Scrolls’ and save your changes.
