How To Suggest Related Page When The User Scrolls To The End

I often build various software to enhance this site. So I decided to share some of my experience with other webmasters. This is a Jquery/CSS tutorial for webmasters and developers.

The Idea

The idea of building this script is pretty simple: to suggest related articles or pages to those visitors who were patient enough to read a page from your site to the end. What I do is to refer to a random related page on our site - for example the Ultimate guide to ultralight flying. You can go there, scroll to the end of the page and you will see that a small popup gently shows at right of the page and suggests you another article from the same category. Because you read it to the end, chances are you will be interested in more of this content.

This is how it looks on our site.

Creating this effect has two aspects - server-side and client-side. Because the server-side realization can be totally different for different sites, we'll focus mostly on the client side. Anyway I'll show you parts of how we do it on the server-side as well, just so you get the idea.

Using jQuery and CSS to Display The Popup At The Right Time

You could implement this solution in pure Javascript, but doing it with jQuery makes things so much easier. Just have a look below. But first a little HTML/CSS:

<div id="nextArticle" style="position:absolute;display:none;background:#FFF;color:#000;width:200px;border:4pt solid #FC9B32;padding:25px;text-align:left;">
<b>See also:</b>
<a href="#"><h3>Article Title</h3></a>
<p>Short Resume</p>
<p align="center"><a href="#" onclick="$('#nextArticle').hide('slow');return false;">Close this suggestion</a></p>
</div>

This is the DIV that holds our related content suggestion. You don't need to have exactly the same CSS for border, text-align, etc. And it's better to define a CSS class instead of placing it inline. The properties that matter are position:absolute; and display:none; so by default the popup is hidden. Make sure to assign some width as well. We use 200px; in this example.

Now, let's make it move:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

suggestionShown=false;
function suggestNextArticle()
{
    if(!suggestionShown && $(window).scrollTop()+$(window).height()+200 > $(document).height())
    {
        topPos=$(window).height()/2 - 100 + $(window).scrollTop();
        leftPos=$(document).width() - 260;
        $('#nextArticle').css({top:topPos,left:leftPos});
        $('#nextArticle').show('slow');
        suggestionShown=true;
    }    
}

$(window).scroll(function() {    
    suggestNextArticle();
});

function trackSuggestionVisit()
{
    $.post("tracker.php", {}, function(msg){});
}

Dissecting and explaining this code:

Note: don't forget that none of this code will work without jQuery. Make sure you either download and include jQuery or include it from hosted CDN.

Line 1 starts with setting suggestionShown variable to false. We will later set this variable to true to mark that the user has already scrolled to the bottom of the page once. We don't want to re-render the popup all the time, but just to show it once.

suggestNextArticle() is the function that does the "magic". First, it makes sure the user has scrolled nearly to the end of the page. In our case we check for $(window).scrollTop()+$(window).height()+200 > $(document).height() which means when they scrolled up to 200px till the end of the page. It's good to add such extra space because many users may read the article but won't scroll to see your full footer, any ads you may have etc. This value of 200 may vary for your site.

Note that on the same 4th line of the code I check if suggestionShown is false. Like already said, you don't want the popup to render again on the same page if it has already been shown.

Then on lines 6 and 7 we calculate the exact position where the popup will be shown. I have hardcoded a couple of values (100 and 260) because of the exact size of my div. You may need to amend these or make them more "dynamic". Lines 8 and 9 assign the position through the jQuery css() method and show the popup slowly. On line 10 we finally set that suggestionShown variable as true.

Lines 14 to 16 simply call suggestNextArticle() function at any time the user scrolls the page. Only when the two conditions are met, the calculation for the div position is done and the div is shown.

Function trackSuggestionVisit() is entirely optional. We use it to figure out how many users actually clicked on the link to read the suggested story. More on this in the next section.

The Server-Side

Although the server-side implementation may vary a lot, here are some suggestion and ideas about it.

First and most important you need to do several things:

1. Figure out related content to show. We do this by selecting a random article from the same category as the one that the user is currently reading. To avoid suggesting them articles that they already read, we store those article IDs in session and then select only IDs that are not there. You could of course do something different. In PHP what I do looks like this:

$_SESSION['articles_read']=isset($_SESSION['articles_read'])?$_SESSION['articles_read']:array(0);

Here I just prepare the array of read articles. Once we select the current article we add it to the array:

$_SESSION['articles_read'][]=$article['id'];

Then when selecting a random article I just exclude the read ones from the query by adding AND id NOT IN (".implode(",",$_SESSION['articles_read']).") to the SQL query/

2. Track the visit (optional). As we want to know how many people actually click on these links, I added the trackSuggestionVisit() javascript function which sends Ajax request to one of my scripts.

The best way to fire the function is to add it to the onclick event of the link that goes to the suggested page. So inside the suggestion popup you will of course have some link. In it add onclick like this:

<a href="URL of the suggested page" onclick="trackSuggestionVisit();">Click here to read the article</a>

Note that the onclick attribute should not contain return false; instruction in the way you would usually do when calling a javascript function through a link click. This time you want the event to propagate further to the browser and the user to be taken to the URL in the href attribute.

You can even pass the page name, URL or some ID as a parameter to the function and then in the remote script to track even which articles exactly have been clicked and so on.

Gustavo at Dec, 17 '15 15:59
It was interesting to learn that 57 pecnert of adults think about taking steps to keep their work and personal profiles private, but 49% of adults do not use privacy settings on social networking sites. Why is it so important to manage your privacy online? Because mistakes happen 17% of people have inadvertently shared information online that was intended to remain private. Most commonly shared are details about one’s personal life (56%) and personal photos (38%). Check out our recent post to learn How to Change Your Facebook Privacy Settings.
Reply to this comment

Mavrick at May, 08 '16 13:02
Good points all around. Truly apeptciared.
Reply to this comment

 

*Your Name:
*Your Email: (will not be published)
Your website:
*Your comment
Notify me when someone post a comment on this article