Guides

Single Page App Setup

Suggest Edits

A Single Page App is a website that dynamically rewrites the current page rather than loading entire new pages from a server. Viafoura fully supports this type of implementation, but requires a few special steps to ensure that widgets load and show the correct information when navigating between pages.

Page Templates

Typically, single page apps will use a template for a page which would be dynamically updated on page navigation. Because the page does not reload and is instead updated, any Viafoura widget located on that page will stagnate unless it is also updated.

The page metadata must also be updated to ensure that:

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

Workflow Overview

  1. Set initial page metadata on page load
  2. Set new page metadata and reset widgets when navigating within the single page app

Setting Initial Page Metadata

Externally loading a page in your single page app occurs when a user navigates to a page from another website, enters the site in their address bar, or refreshes the page. The document Integration with your Content will guide you through setting up the appropriate metadata for your page.

Navigating Between Pages

There are two steps to consider when navigating between pages:

  • Updating the page metadata
  • Resetting and updating the widgets

Updating Page Metadata

When page navigation occurs, we need to tie that new page to the appropriate page metadata. In general, this step is the same as setting the initial page metadata. Make sure that the same metadata that is set on initial page load is also changed when loading a new page.

📘

Note

Container IDs can be placed directly on widgets instead of in the <head>. If the Container ID is on the widget, make sure it is updated before resetting the widget.

Resetting Widgets

🚧

Warning

This step must happen after the new page fully loads and the appropriate page metadata is set.

To reset the widgets so that they load the correct information based on the metadata for the new page, the window.vf.context.reset() function can be used. The following is a snippet that outlines the flow of loading a new page:

function loadNewPage() {
  // Using the HTML History API, we can load a new page using pushState
  history.pushState({}, '', '/some-path');
  
  // 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
  
  // Reset the widgets
  window.vfQ.push(function() {
    window.vf.context.reset();
  });
}

Updated over 3 years ago

What’s Next