Narvar Integration

Narvar runs delivery tracking pages that can enhance your e-commerce website. Because this tracking page is in a different domain than the rest of your pages, our script doesn't run on these pages unless you set up the integration described in this article. The integration enables you to insert Dynamic Yield experiences by adding an iframe to your Narvar pages.  

Setting up the Integration

1. Adapt the following code that will be added to each iframe, replacing REPLACE_WITH_SECTION_ID with your Dynamic Yield section ID. In this example, a recommendation is added but you can also add a different campaign type using the appropriate API.
   

       var sectionId = REPLACE_WITH_SECTION_ID;
       var skusString = document.location.href.match(/skus=([\w-\,]+)/)[1]|| '';
       var skusInCart = skusString.split(','); 
       var head = document.querySelector('head');
       var api_d = document.createElement('script'); 
       var api_s = document.createElement('script');
       var dynamicSrc = '//cdn.dynamicyield.com/api/' + sectionId + '/api_dynamic.js';
       var staticSrc = '//cdn.dynamicyield.com/api/' + sectionId + '/api_static.js';
       api_d.setAttribute('type','text/javascript');
       api_s.setAttribute('type', 'text/javascript');
       api_d.setAttribute('src', dynamicSrc);
       api_s.setAttribute('src', staticSrc);
       window.DY = window.DY || {};
       DY.recommendationContext = { type: 'CART', data: skusInCart };head.appendChild(api_d);head.appendChild(api_s);    

2. In Narvar, add an iframe to any relevant pages.
3. Paste the code in the iframe in one line.
4. Add a div to the iframe with a unique ID.
5. In Narvar, configure the URL of the pages to contain the product SKUs in a parameter called "skus". 
6. Get a preview link for the Narvar page without publishing it.
7. In Dynamic Yield, modify any campaigns that target all pages on your site to not include the URLs of the Narvar pages using the URL does not contain option.
8. Create the Dynamic Yield campaign that will be added to the iframe. Set the insertion method to Automatic, select Replace and specify the unique ID you defined in the div above. 
9. Configure all other campaign settings and variations as desired. 
10. For any links included in the campaign, anchors tags should have the html attribute target=“_blank”, so they will open outside of the iframe.
11. In the Advanced Settings of the experience (the gear icon next to the Primary Metric dropdown), set the attribution window to end after 1 day.
12. Save and Publish the Dynamic Yield campaign.
13. Use the preview link from Narvar to test and update the campaign before it is made public.
14. In Narvar, publish the page.

Notes and Limitations

1. Viewing the Narvar page will count as a cart pageview.
2. All other Dynamic Yield campaigns that target all pages must exclude Narvar pages using the "URL does not contain" option.
   
3. Inside the iframe, there is no access to CSS and no JavaScript libraries (no JQuery, no slick, no datalayer, etc.)
4. The iframe is a fixed height of 300px, but Narvar will sometimes increase it to 600px depending on the screen size. We typically ask them to keep in 300px for all devices. Given this limitation, we recommend keeping your campaign designs simple.