Overview

Infinite scroll websites are websites where content and ads are loaded and added dynamically when the user scrolls down. This articles describes how to serve ads on infinite scroll websites.

Sample implementation

You are free to choose the method to generate the content and Equativ's ad tags dynamically.The following sample implementation uses the jQuery library to add a javascript handler on the scroll event.Registering a callback on the scroll event of the page with jQuery:

<script type="application/javascript">
    var loading = false;   
    $(document).ready(function() {           
        $(window).scroll(function() {
            if (loading) {
                return;
            }
            if  ($(window).scrollTop() + 1 >= $(document).height() - $(window).height()){
                loading = true;
                $('.loading').show();
                loadAdditionalContent();
                loading = false;
            }                   
        });           
    });
</script>

Both the additional content and the new Equativ ad tags are loaded with the loadAdditionalContent function:

// Create a random ID
var rndId = parseInt(Math.random() * 1000000);
 
// Create new content
var art = document.createElement("div");
$(art).addClass("article");
var artTitle = document.createElement("h2");
$(artTitle).text("Titre Article "+ rndId);
var artBody = document.createElement("p");
$(artBody).text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget mi pellentesque, vehicula odio eget, commodo velit. Integer fermentum enim sit amet elit dictum rhoncus. Nunc quis molestie nunc, in dignissim velit. Ut sollicitudin finibus turpis. Aliquam pharetra lectus ac scelerisque aliquet. Curabitur ornare purus in porta fringilla. Nam non finibus libero. Donec quis tortor non nibh efficitur pellentesque. Etiam est risus, vestibulum eu eleifend non, luctus et justo. Cras interdum non purus venenatis accumsan.");
 
// Create a container in the article with the EQUATIV ad tag
var smartDiv = document.createElement("div");
smartDiv.id = rndId;
var smartTag = document.createElement("script");               
$(smartTag).text("sas.call('std', {siteId:35227,pageId:241561,formatId:15195,tagId:" + rndId + "});");               
 
// Build the additional content
art.appendChild(artTitle);
art.appendChild(artBody);
art.appendChild(smartDiv);
art.appendChild(smartTag);
 
// Add it to the content
$('#articles').append(art);

Targeting ad containers

Since ads on infinite scroll websites are loaded on demand, asynchronous tagging must be used. Asynchronous tagging relies on the existence of a root container div named sas_<formatid>.  Since this container must be unique, the formatId can be used only once on the page.However, you can use the same formatId multiple times if you use custom container div names and pass these as a parameter in the ad call as follows:

sas.call('std',{
    siteId: 35227,
    pageId: 241561,
    formatId: 15195,
    tagId: 'mydivid'});

In the ad call, the tagId parameter will be included as shown in this example:

http://www.smartadserver.com/ac?siteid=35227&pgid=241561&fmtid=15195&async=1&visit=s&tmstp=3324810665&orgfmtid=15195&tag=mydivid

Known issues and limitations

• Ads on infinite scroll websites work with standard call only (one call is not supported!).
• You may see the same ad multiple times if you have only a small amount of ads on the placement and do not use specific targeting.

Page view counting

If you want to count new page views each time you load additional content, you need to set the master tag on the first ad call of your scroll event. 

sas.call('std', {
    siteId: 35227,
    pageId: 241561,
    formatId: 15195,
    tagId: 'mydivid'
}, {
    forceMasterFlag: true
});

More details on the forceMasterFlag option in Tagging guide: advanced operations.