Add the Dynamic Yield scripts to the <head> tag of your site, on any page. After the scripts are implemented, your visitor activity is tracked, and Dynamic Yield campaigns can be served on your site.
Implementation
- In the Dynamic Yield console, go to Settings › General Settings.
- Copy and paste the code snippet immediately after the opening <head> tag of every page on your site.
Example of entire <head> tag with the script, prefetch and preconnect tags, and page context. Make sure to maintain this order:
<head>
// DNS Prefetch and preconnect
<link rel="preconnect" href="//cdn.dynamicyield.com">
<link rel="preconnect" href="//st.dynamicyield.com">
<link rel="preconnect" href="//rcom.dynamicyield.com">
<link rel="dns-prefetch" href="//cdn.dynamicyield.com" />
<link rel="dns-prefetch" href="//st.dynamicyield.com" />
<link rel="dns-prefetch" href="//rcom.dynamicyield.com" />
...
...
…
// DY context
<script type="text/javascript">
window.DY = window.DY || {};
DY.recommendationContext = { type: "PRODUCT", data: ["SKU123"] };
</script>
// DY scripts
<script src="//cdn.dynamicyield.com/api/[SECTION_ID]/api_dynamic.js" type="text/javascript"></script>
<script src="//cdn.dynamicyield.com/api/[SECTION_ID]/api_static.js" type="text/javascript"></script>
</head>
Best practices
- Implementation method: Implement the Dynamic Yield script directly on your site's code, not with a Tag Manager, to avoid flicker.
- Synchronicity: Avoid configuring scripts to run asynchronously. Unexpected behaviors can occur, affecting which variations are shown, loading times, flicker, and so on. Dynamic Yield provides a high server redundancy rate and fast loading times so you don’t need asynchronous loading to speed things up. All other operations after loading the scripts are run asynchronously.
Adding prefetch and preconnect tags
Because the Dynamic Yield scripts are served from a hostname different than your website, the browser needs to resolve the DNS. Place a dns-prefetch tag before the script to reduce the DNS resolution time.
Preconnect tags enable the browser to set up early connections before an HTTP request is actually sent to the server. This eliminates roundtrip latency and saves time for users. Some browsers (like Explorer, Safari iOS) do not support preconnect tags and ignore them.
These calls are included by default in the script provided in the Settings › General Settings page that should be copied to every page in your site.
US data center:
<link rel="preconnect" href="//cdn.dynamicyield.com">
<link rel="preconnect" href="//st.dynamicyield.com">
<link rel="preconnect" href="//rcom.dynamicyield.com">
<link rel="dns-prefetch" href="//cdn.dynamicyield.com">
<link rel="dns-prefetch" href="//st.dynamicyield.com">
<link rel="dns-prefetch" href="//rcom.dynamicyield.com">
<script type="text/javascript" src="//cdn.dynamicyield.com/api/[YOUR SITE ID]/api_dynamic.js"></script>
<script type="text/javascript" src="//cdn.dynamicyield.com/api/[YOUR SITE ID]/api_static.js"></script>
EU data center:
<link rel="preconnect" href="//cdn-eu.dynamicyield.com">
<link rel="preconnect" href="//st-eu.dynamicyield.com">
<link rel="preconnect" href="//rcom-eu.dynamicyield.com">
<link rel="dns-prefetch" href="//cdn-eu.dynamicyield.com">
<link rel="dns-prefetch" href="//st-eu.dynamicyield.com">
<link rel="dns-prefetch" href="//rcom-eu.dynamicyield.com">
<script type="text/javascript" src="//cdn-eu.dynamicyield.com/api/[YOUR SITE ID]/api_dynamic.js"></script>
<script type="text/javascript" src="//cdn-eu.dynamicyield.com/api/[YOUR SITE ID]/api_static.js"></script>
Script architecture and advanced details
We currently execute multiple code sections on the customer web site in order to perform:
- Data collection
- Parameter gathering
- Decision making
- Experiments execution (including tags and actions)
- Recommendations
This section describes all scripts executed on your web page, the timeline in which they execute, and the dependencies between them.