Use this article to help switch to the new Dynamic Yield Single-Page Application (SPA) solution.
Overview: Comparing the old and new SPA implementations
New SPA solution
Old SPA solution
|Page changes/transitions||Automatically detected using MutationObserver and Proxy APIs||
Had to be explicitly reported using the SPA event
|Rendered into the Shadow DOM which is invisible to the front-end framework||
Rendered directly into the DOM, causing frontend frameworks with DOM change detection to remove the inserted campaigns
The campaigns reevaluate their targeting conditions and rendered or removed from the page upon detection of page changes
The campaigns aren’t reacting to page changes
Migrate to the new SPA solution
The migration includes 4 steps:
- Review your campaigns, and if needed, make changes.
- Simulate the new solution on your site.
- QA the changes you made to your campaigns.
- Contact Support to enable the new solution on your production site.
Prerequisite: Having page context implemented is mandatory for this feature.
Step 1: Review and edit existing campaigns
- Third-party libraries should pass references to elements instead of CSS selectors (In the new solution, the campaigns are rendered into a shadow dom).
For example, instead of passing a selector to the Swiper carousel plugin:
Pass the actual element:
new Swiper('#dy-recommendations-slider', getSliderOptions());
Make sure to review all of your variations and the templates.
new Swiper(document.getElementById(dy-recommendations-slider'), getSliderOptions());
Note that you must also update the Swiper's option object to ensure that it works as expected with the new SPA script.
- If you have Dynamic Content or Recommendations campaigns that are implemented manually via embed code, embed them automatically by referencing the selector.
- Implement styles in the variation/template CSS section. It will not inherit styles from the page. CSS from Dynamic Content/Recommendation campaigns won’t affect the DOM elements.
Step 2: Simulate the new SPA solution on your site
- Install the Requestly plugin for Chrome. It enables you to simulate this solution on your browser, without applying it to your site visitors.
- In Requestly, create a new rule.
- In the Create New Rule dialog, select Redirect Request.
- In the redirect request creation window:
- Give the rule a name, for example Simulate SPA.
- Change the comparator from Match to RegEx.
- Set the RegEx value to /api_static.js$/gi.
- Set the destination to:
For the US data center:
For the EU data center:
Note that you must specify your current script version in the URL. Check your console by executing DYO.version.
- Save the rule.
- Navigate to the website, empty the cache, and do a hard reload.
Step 3: QA your site
- Look at your Dynamic Content and Recommendations campaigns and QA:
- Appearance: CSS styling is applied correctly.
- Functionality:Third-party plugins are passing HTML elements and not CSS selectors.
- Make sure that Multi-Touch campaigns are rendered correctly.
- Check that SPA page transitions do not break any campaigns.
- Edit a template that is linked to active variations, and verify that it updates the variations.
Useful API: DYO.isSpaFlow - To check if the new SPA solution is enabled
Step 4: Enable the solution on your site (in production)
Contact Support to enable it for all of your traffic. After it's enabled, you can remove the Requestly rule.