Continuous Scroll Setup

A continuous (or infinite) scrolling page is one where new articles are continuously 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.

Page Regions

A “page region” is a virtual page with it’s own page metadata (eg: URL, title, and description).

In a continuous scroll application, the actual web page is usually divided into section or article elements which each represent their own “web page” or “page region”. Viafoura provides functionality to tie page metadata into widgets embedded in these page regions.

By doing this, we can ensure that:

  • Attention time will be properly attributed to the correct widgets
  • Content will be correctly linked to the appropriate page metadata

📘

Note

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

Workflow Overview

  1. Set initial page metadata on page load
  2. Load a new page region and set new page metadata

Setting Initial Page Metadata

The initial page's region must be registered in order to properly track analytics when the full page is first loaded.

HTML

Here we denote a page region with a top-level section element.

📘

Note

The page region should also include any content related to the page to ensure attention time is properly attributed to the correct page region.

<section id=”first-page” class=”page-region”>
    <h1>This is the first page</h1>
    <p>Some content</p>
    <vf-conversations class="viafoura"></vf-conversations>
</section>

JavaScript

When window.vf.context.registerCurrentPageRegion is called it will read the top-level page metadata from the page <head> and tie it to the page region passed as the first argument. For more information on page metadata see Integration with your Content.

function initializeFirstPage() {
   const firstPage = document.getElementById('first-page');
   window.vf.context.registerCurrentPageRegion(firstPage);
}

window.vfQ = window.vfQ || [];
window.vfQ.push(initializeFirstPage);

🚧

Warning

You must set up the appropriate page metadata in the <head> tag before calling registerCurrentPageRegion

Loading a New Page Region

When loading a new page region, you will need to tie that new region to the appropriate page metadata as well. This is similar to setting the initial page, but uses the window.vf.context.setCurrentPage method instead

HTML

<section id=”first-page” class=”page-region”>...</section>

<!-- second-page has been injected into the DOM by your code already -->
<section id=”second-page” class=”page-region”>
    <h1>This is the second page</h1>
    <p>Some content</p>
    <vf-conversations class="viafoura"></vf-conversations>
</section>

JavaScript

Once the DOM has been updated with the new page region, you can then tell viafoura to load the widget using window.vf.context.setCurrentPage.

The window.vf.context.setCurrentPage can be used in either of two ways:

  1. By first modifying the meta tags directly before calling setCurrentPage
  2. By passing the page metadata to setCurrentPage as an argument

Page Metadata from <head>

If you wish to update your page metadata in the page <head>, you will need to do so before calling setCurrentPage.

🚧

Warning

Make sure that you update all the meta tags you used initially to set the page metadata. For example, if you do not use og:url, make sure to call pushState to update the URL. If you use og:url and the <title> tag, make sure to update both before calling setCurrentPage.

function loadNewPage() {
   // Here we assume the use of vanilla page url and title tag, your needs may be different
   document.title = “new title”; // this could be replaced with setting the og:title meta tag
   history.pushState({}, '', '/some-path'); // this can be replaced with setting the og:url meta tag

   // Now that metadata is set, we can ask viafoura to load the new widget
   const newPage = document.getElementById(‘second-page’);
   window.vfQ.push(() => vf.context.setCurrentPage(newPage));
}

Page Metadata as Data Parameter

If you do not wish to update the page metadata in the <head> for each virtual page load, you may also pass a vfPageMeta object to setCurrentPage to specify some of the page data:

function loadNewPage() {
   const pageMeta = {
      path: '/page-2',
      title: 'Page Two',
   };

   // Now that metadata is set, we can ask viafoura to load the new widget
   const newPage = document.getElementById(‘second-page’);
   window.vfQ.push(() => vf.context.setCurrentPage(newPage, pageMeta));
}

🚧

Warning

Other page metadata such as og:image needs to be managed in the <head> of the page and will be picked up properly by setCurrentPage and registerPageRegion.

🚧

Warning

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.


Did this page help you?