[Deprecated] Single Page Applications on Websites

Many websites use Single Page Application technology such as React, AngularJS, and Vue.js. If this is the case for all or part of your website, visitors might navigate through your site from screen to screen without changing the URL. Even if the URL does change, the browser may populate elements dynamically instead of reloading the page.

Dynamic Yield experiences depend on browser pageloads, as most experiences are rendered when their relevant page is loaded. SPAs do not generate pageloads, and therefore Dynamic Yield will not run experiences on affected pages without manually reporting pageviews.

To run Dynamic Yield experiences on pages or sites using SPA, you explicitly inform Dynamic Yield every time a new SPA page is loaded using an API. You indicate which Dynamic Yield campaigns should be affected by the API using an advanced setting in each campaign.

Step 1: Report Pageviews via API

There are two ways to use APIs to report pageviews:

1. Use individual spa calls if the pageload is very fast (completed synchronously on the client-side without any delays or calls to the server).
2. Use pairs of spa_start and spa_end calls to define the start and end of a pageview. Use this method if the pageload itself is more than a few milliseconds, or if you aren’t sure.

DY.API('spa', {
context: {
type: 'PRODUCT',
data: ['product-sku']
},
url: 'https://store.example.com/buy/product-sku.html',
countAsPageview: true
});

DY.API('spa_start', {
context: {
type: 'PRODUCT',
data: ['product-sku']
},
url: 'https://store.example.com/buy/product-sku.html',
countAsPageview: true
});

Step 2: Enabling SPA for Relevant Campaigns

After you have implemented SPA API calls, you enable an advanced option for every campaign you want to be affected by these API calls. All other campaigns will not be affected in any way. When creating or editing a campaign, enable the Serve on every SPA event option in the Advanced settings.

Validating SPA Functionality

Use this procedure to verify that you have configured the API calls and the Dynamic Yield settings correctly.

1. In your browser, go to Inspect › Network Tab.
2. Type SPA in the search bar. This will limit the results of the next step.
3. Copy the spa or spa_start API call you created to the console of your browser and click Enter to run it.
4. Drill down to see details of the API and make sure there are no errors.
5. Make sure the Serve on every SPA event option is enabled for relevant campaigns.
6. Simulate an SPA workflow on your site that should contain a Dynamic Yield campaign.
7. Inspect your browser to verify that an SPA event was fired.

Troubleshooting SPA Issues

In some cases, an SPA campaign targeted on one page may persist and continue to appear on different pages. If this occurs, we recommend the following workaround:

1. Edit the campaign.
2. Create a new experience with the lowest targeting priority. This means that the experience will only be served when the targeting conditions of all other experiences are not met. In our case, this means it will only be served on pages that are not your target page. 
3. Create an empty variation by using the HTML tab and adding an empty set of <div> tags. You can also use the JS tab to create an empty variation. 
4. Save the campaign and publish the experience.

Now users continue to be served the campaign on all pages, but since the variation is blank, no content is visible.