Tag - Scroll

How to Add Infinite Scroll to your WordPress Site (Step by Step)


Do you want to add infinite scroll to your WordPress blog?

Infinite scroll is a web design technique which automatically loads your next page content when users reach the bottom of a page. It allows users to see more content on your blog without clicking on the pagination or ‘Load More’ button.

In this article, we will show you how to easily add infinite scroll on your WordPress blog (step by step).

Adding Infinite Scroll to Your WordPress Blog Easily

What is Infinite Scroll?

Infinite scroll is a web design trend which uses AJAX page load instead of numeric page navigation to automatically load your next page content and display it at the end of current page. Infinite scrolling makes it easier to browse more content by simply scrolling down. It loads content continuously and infinitely as users keep scrolling.

Traditionally, users would have to click on ‘next,’ ‘previous’ buttons or page numbers to see older blog articles.

When using AJAX short for Asynchronous Javascript and XML, webpages can communicate with the server without reloading the entire page. It enables web apps to process user requests and deliver data without refresh.

The best examples of infinite scroll design are the popular social media sites such as Facebook, Twitter, Instagram, Pinterest, and more. If you are using any of them, then you know how content loads endlessly on your social media timeline.

Is Infinite Scrolling Suitable for Every Website?

Many content websites on the internet are using infinite scroll technique to improve the browsing experience and increase engagement. This leads many beginners to ask the questions like is it suitable for every website, or is it good for my site?

Infinite scrolling is excellent for sites that present content in a timeline or feed, like the social media apps. It offers a fantastic browsing experience to the users looking for time-based content.

Next, infinite scroll design is perfect for mobile and touch devices. For mobile users, scrolling is more user-friendly than taping on tiny page links.

Touchscreen Web Interaction

The most significant advantage of infinite scroll technique is a smooth browsing experience. Users don’t need to click on the pagination links manually. Content loads quickly with scrolling and keeps users engaged.

But on the other side, it can also make your site navigation harder. With continuous loading, it is hard to figure out where (on which page) a blog article is. Some users even find it overwhelming to see many articles all at once.

Another disadvantage of infinite scroll design is that you cannot have a footer. Even if you have it, it will be hidden under endless articles continuously loading. Many sites add essential links on the footer, so not having it can disappoint some users.

Perhaps the most concerning issue with infinite scrolling is that it can slow down your website or even crash the server. When we added infinite scroll to one of our smaller blogs, we experienced server crash after users scrolled unnecessarily causing memory exhaustion on a small WordPress hosting account. We recommend that you use managed WordPress hosting if you’re looking to try infinite scrolling.

Now that you know the pros and cons of infinite scroll design, you can decide whether you need to add it to your blog or not.

If you have decided to add infinite scrolling to your WordPress blog, then you can do it easily. We will be showing you multiple plugins that you can use, so you can choose the one that best suits your needs.

Adding Infinite Scroll to Your WordPress Blog with Catch Infinite Scroll

First thing you need to do is install and activate the Catch Infinite Scroll plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, WordPress will add a new menu item labeled ‘Catch Infinite Scroll’ to your WordPress admin panel. You need to click on it to configure the plugin settings.

Catch Infinite Scroll Settings

First, you can choose a trigger option for loading articles. The plugin lets you load content automatically as users scroll down the page or add a ‘Load More’ button.

Load on Scroll or Click - Catch Infinite Scroll Plugin Settings

You should select the ‘Scroll’ option to trigger autoload with scrolling. Alternatively, you can select the ‘Click’ option if you want to add a load more button.

Next, you can see the navigation selector, next selector, content selector, and item selector. You don’t need to change anything on these options because default options work quite well.

After that, there is an Image option where you can add content loader icon. By default, it has a loader GIF image. If you have a better picture, then you can change it.

Upload a New Loading Image for WordPress Infinite Scroll

‘Finish Text’ option includes the message which will be shown once a user completes viewing your articles. By default, the text says ‘No more items to display.’ You can easily edit this text as needed.

Articles Loading Finished - Finish Text Option Catch Infinite Scroll

Once done, click on the Save Changes button.

That’s it! The infinite scrolling is now active on your blog. You can visit your blog and see the infinite scrolling in action.

WordPress Infinite Scroll Preview

Alternative WordPress Plugins to Add Infinite Scroll in WordPress

Catch Infinite Scroll works well with most of the WordPress themes; however, it can fail with some themes. In such a scenario, you can use any of the following infinite scroll WordPress plugins.

1. Ajax Load More

Ajax Load More settings

Similar to Catch infinite Scroll, Ajax Load More plugin also lets you add endless scroll and clickable Load More buttons to your WordPress site.

The plugin offers more customization options, including many page loading icon styles, button styles, etc. For a detailed guide, you can see our tutorial on creating a load more posts button in WordPress using Ajax Load More plugin.

However, the plugin has some learning curve for beginners. It has an advanced interface with many options, including repeater template, shortcode builder, WordPress queries, and more.

It will require some coding skills to apply infinite scrolling with this plugin.

2. YITH Infinite Scrolling

YITH Infinite Scrolling is a simple alternative to Ajax Load More or Catch Infinite Scroll plugin.

Similar to Catch Infinite Scroll plugin, it has minimal options to set up scroll-based web interaction on your site. You just need to install and activate the plugin and enable infinite scrolling.

YITH Infinite Scrolling Plugin Settings

Anyone, including beginners, can easily set up infinite scrolling using this plugin. However, it doesn’t have a ‘Load More’ button option, which is included in the other two plugins mentioned above.

We hope this article helped you to learn how to add infinite scroll design to your WordPress blog. You may also want to see our guide on how to add scroll-depth tracking in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Infinite Scroll to your WordPress Site (Step by Step) appeared first on WPBeginner.



Source link

How to Add Scroll Depth Tracking in WordPress with Google Analytics


Do you want to add scroll depth tracking on your WordPress website?

Scroll depth tracking allows you to see how far a user scrolls on any page. This data helps you see if your visitors are actually reading your long posts and when they lose interest, so you can modify the content to keep them engaged.

In this article, we will show you how to easily track user scrolling in WordPress using Google Analytics.

How to Track User Scrolling in WordPress Using Google Analytics

Why Track User Scrolling in WordPress?

Generally, scrolling occurs when a user wants to see your content below the preview screen. It is a primary activity that all users perform to look at your content.

This makes scroll depth tracking an important measure to track user engagement. In addition to that, it gives you plenty of insights about user interaction on your site and helps you improve pages for optimal length.

For example, you can find out how much an average user scrolls when viewing your site, which long reads they liked the most, what makes them lose interest, etc.

With these insights, you can then optimize your pages for better user engagement and higher conversions.

Tracking Scroll Depth in WordPress with Google Analytics

Google Analytics is a free web analytics tool offered by Google to help you better understand your website visitors.

It allows you track who your website visitors are (age, gender, interests), where they are from, which pages they visit, how long they stay on those pages, how far down they scroll on the pages, and more.

Google Analytics tracks the basic metrics like total page views, total number of visitors, top pages, etc. by default.

For more advanced metrics like scroll depth, eCommerce tracking, form submissions, file downloads, event tracking, and others, Google analytics require you to setup custom tracking.

Manually setting up advanced Google analytics tracking requires a lot of technical skills. As a beginner, this is nearly impossible. Even some developers can’t do it properly.

Thankfully, there are easy to use WordPress plugins that can help you track advanced metrics like scroll depth with Google Analytics.

Let’s take a look at two plugins that you can use to setup scroll depth tracking in WordPress.

1. Scroll Depth Tracking in WordPress with MonsterInsights

MonsterInsights is the most popular Google Analytics plugin for WordPress with over 2,000,000+ active installs. It helps you easily install and use Google Analytics on your WordPress website without using any code.

MonsterInsights Best Google Analytics WordPress Plugin

With MonsterInsights, you can enable advanced tracking like eCommerce tracking, file downloads, affiliate links, forms tracking, scroll depth, and more with just a single click (no coding needed).

MonsterInsights comes with scroll-depth tracking enabled by default. This means you don’t even need to configure any settings. All you need to do is setup the MonsterInsights plugin.

First, you need to install and activate the MonsterInsights plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, go to Insights » Settings page and then click on the Engagement tab. As shown in the screenshot below, you will see the scroll tracking option enabled by default.

MonsterInsights Scroll Depth Tracking Option

MonsterInsights trigger events in Google Analytics as your website visitors scroll down the page. It will then be tracked with Google Analytics as 25%, 50%, 75%, and 100% scroll.

You can see your scroll tracking stats and other helpful stats right inside your WordPress admin area by going to the MonsterInsights Publishers Report (Insights » Reports » Publishers). The scroll depth data appears next to the Interests section.

Scroll Tracking Reports in WordPress

You can use the scroll depth data to optimize your pages for more conversions. It gives you a better picture of how your visitors are interacting with your content and helps you decide the best place for your important calls to action, ads, and more.

View User Scrolling Data in Google Analytics

Now that you have set up scroll tracking with MonsterInsights, you can view reports also in your Google Analytics account.

Log into your Analytics account and then visit Real-Time » Events to see your real-time or recent scrolling data within the last 30 minutes.

Google Analytics Scroll Tracking in Real-time

For the complete data, you can go to Behavior » Events » Overview from your Analytics dashboard.

Scroll Depth Data in Google Analytics

You can click on the Scroll Depth link to get more details.

If you want more granular details, then you can use Google Analytics’ secondary dimension feature alongside the Scroll Depth event to see the scroll data for each individual landing page.

2. Track User Scrolling With WP Scroll Depth Plugin

If you don’t want a comprehensive Google Analytics solution and would rather use a single plugin, then you can use WP Scroll Depth.

The first thing you need to do is install and activate the WP Scroll Depth plugin on your site. For detailed instructions, here’s our step by step guide on how to install a plugin in WordPress.

Upon activation, you need to go to Settings » Scroll Depth to configure the plugin settings.

WP Scroll Depth Plugin Settings

The default options will track scroll depth for all pages on your WordPress site. All you need to do is click on the Save Changes button to store plugin settings.

WP Scroll Depth plugin uses jQuery to track scrolling on your WordPress site. It monitors four scroll points 25%, 50%, 75%, and 100% of the page height. When a user reaches a scroll point, the plugin sends an event to Google Analytics using jQuery.

After that, you can view Scroll Depth event data under Real-Time » Events on your Google Analytics dashboard.

WP Scroll Depth Real-time data

We use MonsterInsights on all our websites because it’s the most complete Google Analytics plugin for WordPress, and we recommend all our users to do the same. They have a free MonsterInsights plugin, and you can also upgrade to the premium version to unlock more powerful tracking.

We hope this article helped you learn how to track scroll depth on your WordPress site using Google Analytics. You may also like to see our guide on 10 website marketing data you must track on every WordPress site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link