Single-page applications and Digital

Unlike a static web page, a Single Page Application (SPA) is dynamic and by default only loads and executes the Digital embed code when the SPA page first loads. This means any updates that happen as a result of interaction with the SPA cannot be detected by Digital. This can potentially cause problems for example with targeting not being triggered or custom parameters not being updated. Digital provides methods of integrating with the different types of SPA.

How you integrate Digital depends on the type of SPA:

Where the URL changes
Where the URL does not change

For SPAs where the URL changes, it is recommended to use Digital URL based targeting.

Tip: In previous versions of Digital there was a feature to poll SPAs with URL changes. This feature is deprecated and any such SPAs should migrate to using the updatePageView() technique in this section.

For SPAs where the URL doesn't change, the Digital on-site SDK provides an alternative solution to manually call the KAMPYLE_ONSITE_SDK.updatePageView() function at suitable times from the code controlling the SPA. This gives you full control of when to inform Digital of changes from the SPA.

For example, suppose an SPA uses the model of steps through a payment process. To ensure Digital is in sync with changes in values as the visitor progresses from step to step, call the updatePageView() function each time the SPA progresses to the next steps. This ensures that the Digital targeting engine is updated based on any changes the SPA has made to data on the page.

For surveys that capture custom parameters or use a rule to trigger the survey, the SPA should also call the updatePageView() function after the custom parameters are set with a value or updated dynamically. For example, whenever the custom parameter is set with a value, the updatePageView() function should be called. This updates Digital based on what has changed on the website after the embed code was initially loaded.

Identify SPA based sites

Ideally when working with a site, the web development team can inform you whether it has any SPA based parts or not. But in a situation where this information is not available, try triggering the survey on UAT and see if it triggers when you try changing the page. If the survey does not trigger, execute the SPA code as demonstrated in SPA integration.

For example, using Google Chrome browser, open the browser console on the page you want to test. Update the page view using the function:

KAMPYLE_ONSITE_SDK.updatePageView()

If the survey triggers once updatePageView() has been called, it is quite likely an SPA based site.

To check that the updatePageView() function ran correctly, monitor the value of pageCounter in the browser's local storage. Each time you run the updatePageView() function the value of pageCounter should increase.