Infinite Scroll Integration

An infinitely scrolling page is one where new articles are continously loaded inline in the existing page via AJAX. Viafoura widgets fully support such types of pages, but a few special steps need to be taken to ensure that the widgets load the proper data.

Loading a new page

After loading your new page, the window.vf.context.setCurrentPage function can be used to load the widgets onto the new page. For more information on the setCurrentPage function, please refer to the JavaScript API Documentation. The setCurrentPage function takes 2 parameters, the parent element of the page which denotes the new page (i.e. everything on the new page should be inside this element) and an object with defining attributes of a page: path or unique id of the page you would like to load. The path should point to the canonical URL for that page. For more information on unique id, please refer to the Viafoura Unique ID documentation. The element passed into the function will also be used to register a page region to track attention time while the page region is in view.

Once the content and all the widgets you want to embed onto the page have been inserted into the DOM, execute the window.vf.context.setCurrentPage function. This will locate and register the newly implanted widgets on the page and load their data. Calling this function will also fire a page view event to indicate that a new page has been loaded. Additionally, this function can be called with no parameters to refetch the page information and fire a page view request. This is useful if you want to track page view events when the user is scrolling backwards through the pages as normally, setCurrentPage would only be called going forwards to load new pages.

Additionally, because setCurrentPage is only used to load new pages, if you would like analytics to be tracked on the initial page as well, that page's region must also be registered. After loading the initial page, window.vf.registerCurrentPageRegion should be called with the parent element of the initial page to denote the area of the initial page. By registering the page region, we may track attention time on the initial page as well so that the time that the user spends on each page may be more accurately tracked.

The following widgets support both infinite scroll and data-path or data-url:

• Commenting
• Ratings and Reviews
• Comment Count
• Social Share Bar
• Share Count
• Average Ratings
• User Page Ratings

Example:
If you want to load a new page with the following template with the route: '/news.html' for example:

<div id="news_page">
        <section>
            <p> Page Contents </p>
        </section>
        <div class="viafoura">
            <div class="vf-widget" data-widget="media-gallery"></div>
        </div>
        <div class="viafoura">
            <div class="vf-widget vf-comments" data-widget="comments"></div>
        </div>
</div>

After inserting the elements into the DOM, you could load the widgets for the /news page as follows:

window.vf.context.setCurrentPage(document.getElementById('news_page'), { path: '/news.html' });

To track attention time on the initial page, after our widgets are finished loading, the page region should be registered.

window.vfQ = window.vfQ || [];

window.vfQ.push(function() {
	window.vf.context.registerCurrentPageRegion(document.getElementById('news_page'));
});

🚧

Note

Section-specific settings do not work with infinite scroll pages, all pages loaded on an infinite scroll page will inherit the settings of the actual page on which they are placed.

🚧

Note

Be careful not to call setCurrentPage multiple times with elements that intersect. The function will not allow you to register the same page region twice but if two page regions intersect, then the area that is intersecting will double count the attention time.