Dynamic Yield Scripts

Follow

The Dynamic Yield scripts should be added to the <head> tag of your site, on any page. Once implemented, your visitor activity will be tracked, Dynamic Yield campaigns can be served on your site.

Implementation

  1. In the Dynamic Yield admin, go to Settings › General Settings.
  2. Copy and paste the code snippet immediately after the opening <head> tag of every page on your site.

    script_dashboard.png

Best Practices

  • Script placement:
    • We recommend placing scripts in the <head> tag to avoid flickering.
    • Implement the Dynamic Yield scripts right after the page context.
  • Implementation method: Implement the Dynamic Yield script directly on your site's code, and not with a Tag Manager to avoid flickering.
  • Synchronicity: If you configure the scripts to run asynchronously, unexpected behaviors will occur affecting which variations are shown, loading times, flicker, etc. Dynamic Yield provides a high server redundancy rate and lightning-fast loading times so you don’t need to resort to asynchronous loading to speed things up. All other operations after loading the scripts are run asynchronously.

Adding Prefetch and Preconnect Tags

Since the Dynamic Yield scripts are served from a different hostname 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 allow the browser to setup early connections before an HTTP request is actually sent to the server. This eliminates roundtrip latency and saves time for users. Some browsers (e.g. Explorer, Safari iOS) do not support preconnect tags and ignores it.

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.

<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>

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 the customer web page, the timeline on which they execute and dependencies between them.

Note: st.dynamicyield.com, async-px.dynamicyield.com, and cdn.dynamicyield.com are replaced with st-eu.dynamicyield.com, async-px-eu.dynamicyield.com, and cdn-eu.dynamicyield.com if you are using Dynamic Yield’s EU data center.

Execution Flow

script_architecture.png

  1. Implement api_static and api_dynamic on the page – will render the campaigns on your site
  2. Default action for collection injection will add a call to st.dynamicyield.com/st – returns the user and section data and add a call to load our collection script and jquery
  3. Add dy-coll-min.js – until Q2 2019 this was used to enable data collection, client-side targeting, and rendering of overlays and notifications. In sites that were created in Dynamic Yield after Q1 2019, the script skips this step, while still maintaining all of its capabilities. If your site was created before this date and you wish to remove this jQuery library - contact your Customer Success Manager. 
  4. The collection script will fire async-px.dynamicyield.com call to report collection endpoints to the server

Scripts On The Page

Experiment Scripts

  • api_static.js
    1. Loaded from CDN with 1hr  cache
    2. Renders all available experiences and serves variations based on their targeting
    3. Waits for all the dynamic data to load on the page before executing all exepriences. Once loaded it will enable all API calls for the campaigns
    4. 63.1 KB after gzip (last updated: Feb, 2018)
  • api_dynamic.js
    • Loaded from CDN with a 5-minute cache
    • Holds all Dynamic Yield campaign settings
    • File size differs depending on the number of active experiences

Asynchronous Collection Script
The Implementation script will call our server and set up all the user and site data on the page and then proceed to load dy-coll-min.js from the CDN. The script performs all data collection and exposes the on-page API.

Data Collection Process

Collection Operations
When our static collection script executes, we perform the following actions on the page:

  1. Init all page listeners
  2. Calculate segment definition – custom javascript evaluation per section to define the current page segment
  3. Calculate site variables – evaluate site variable javascript code and save the results in a local variable
  4. Calculate goal values
  5. Init the QManager – handle DY.API calls
  6. Log to server leftovers from previous executions
  7. Mark and execute FrontPage experiments
  8. Add listeners for all monitored units on the page
  9. Run detectors to identify current page and user feature set
  10. Log page data to the server
  11. Log impressions to the server (1 second after dom ready)
  12. Log real impressions to the server (every 10 seconds)
  13. Log clicks on monitored units (every time a unit is clicked)
  14. Log dynamic events – based on DY.API executions

Data Collection – Network Calls

  • async-px.dynamicyield.com/uia – report page and user information
  • async-px.dynamicyield.com/imp – report all monitored units on the page – can be executed more then once in single page application and will report the delta
  • async-px.dynamicyield.com/rimp – report an array of real impressions
  • async-px.dynamicyield.com/dpx – report dynamic event call and properties
  • async-px.dynamicyield.com/var (ri,c) – report variation impression (ri) and variation click (c)
  • async-px.dynamicyield.com/id – identify user with uid and uid type – required for omni channel
  • async-px.dynamicyield.com/rcomEvent – client side rcom interactions – JSON with PRIMP, WRIMP, CLICK data
  • async-px.dynamicyield.com/batch - a batch request containing impressions, decisions, and other required internal Dynamic Yield reports.