GETTING YOUR MERCHANDISE BLOCK
Before getting started, the first step is to create a Merchandise Block.
After a Merchandise Block is created, the next step is to add it to your website. Add recommendations to any page that has the Listrak Analytics script on it. Follow the below steps to add this code to your site.
⚠️ If a contact utilizes an ad blocker in their browser it may interfere with the appearance of the product recommendations. You may want to include text on the page telling a contact to disable any ad blockers if they have issues viewing the recommendations.
ADDING THE WEBSITE RECOMMENDATIONS RENDER CODE
On your webpages, add _ltk.Recommender.Render(); in the Async JavaScript between the Begin Custom Code and End Custom Code Comments. Place this code before the Listrak Analytics JavaScript and before the closing body tag.
<script type="text/javascript">
(function(d) { if (document.addEventListener) document.addEventListener('ltkAsyncListener', d);
else {e = document.documentElement; e.ltkAsyncProperty = 0; e.attachEvent('onpropertychange', function (e) {
if (e.propertyName == 'ltkAsyncProperty'){d();}});}})(function() {
/********** Begin Custom Code **********/
_ltk.Recommender.Render();
/********** End Custom Code **********/
});
</script>
TIP: If you have other Listrak solutions like Shopping Cart Abandonment or Conversion Tracking, you may already have the Async JavaScript code on the webpage that you’re trying to add Website Recommendations to. If this is the case, then just add the _ltk.Recommender.Render(); snippet below the rest of the code that is between the Custom Code section of the Async JavaScript.
ADDING THE WEBSITE RECOMMENDATIONS MERCHANDISE BLOCK CODE
Below are HTML styled templates for Horizontal Website Recommendations and Vertical Website Recommendations to help get you started on the design of your merchandise blocks.
Horizontal HTML Styled Template
<!-- Onsite Recs: Insert Code Here -->
<!-- Change data-ltk-merchandiseblock to the one from your merchandise block -->
<div data-ltk-merchandiseblock="PLACE YOUR MERCHANDISE BLOCK ID HERE" style="width:100%; padding:40px 0;">
<template style="display:none">
<div style="box-sizing:border-box; vertical-align:top; display:inline-block; width:25%; padding:20px;">
<a href="@Recommendation.LinkUrl"><img src="@Recommendation.ImageUrl" title="@Recommendation.Title" style="display:block; width:auto; height: 100%; max-height:200px; margin:auto;"/></a>
<a href="@Recommendation.LinkUrl" title="@Recommendation.Title" style="display:block; width:100%; font-family:Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 15px; font-weight: 500; color:#333;text-decoration:none; text-align:center; padding-top:8px;">@Recommendation.Title</a>
<a href="@Recommendation.LinkUrl" title="@Recommendation.Title" style="display:block; width:100%; font-family:Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 13px; font-weight: 700; color:#d43e3e; text-decoration:none; text-align:center; padding-top:8px;">$@Recommendation.Price</a>
</div>
</template>
</div>
<!-- END Onsite Recs-->
Vertical HTML Styled Template
<!-- Onsite Recs: Insert Code Here -->
<!-- Change data-ltk-merchandiseblock to the one from your merchandise block -->
<div data-ltk-merchandiseblock="PLACE YOUR MERCHANDISE BLOCK ID HERE" data-ltk-take="4" data-ltk-skip="0" style="width:100%; padding:20px 0;">
<template style="display:none">
<div style="box-sizing:border-box; vertical-align:top; display:block; width:100%; padding:0 0 2em;">
<a href="@Recommendation.LinkUrl"><img src="@Recommendation.ImageUrl" title="@Recommendation.Title" style="display:block; width:auto; height: 100%; max-height:200px; margin:auto;"/></a>
<a href="@Recommendation.LinkUrl" title="@Recommendation.Title" style="display:block; width:100%; font-family:Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 15px; font-weight: 500; color:#333;text-decoration:none; text-align:center; padding-top:8px;">@Recommendation.Title</a>
<a href="@Recommendation.LinkUrl" title="@Recommendation.Title" style="display:block; width:100%; font-family:Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 13px; font-weight: 700; color:#d43e3e; text-decoration:none; text-align:center; padding-top:8px;">$@Recommendation.Price</a>
</div>
</template>
</div>
<!-- END Onsite Recs-->
Log into Listrak.
Navigate to Solutions > Recommender Merchandise Blocks.
Click on the Show Code icon to get the code for the recommendations you’d like to display on your website.
Copy just the ID of the merchandise block out of the Website Code tab. If you aren’t using one of the styled templates provided above, copy all the code from the Website Code tab.
You’ll notice the code is wrapped in a div that has a unique ID (data-ltk-merchandiseblock=) for your merchandise block. Within that div, is a script block that will be repeated for each product that is in your merchandise block.
💡 For example, if you created a merchandise block that held 10 products, that script tag, and the contents within it, would be duplicated for all 10 products.
If you are using one of the styled templates provided above, paste the ID of the merchandise block code where it says PLACE YOUR MERCHANDISE BLOCK ID HERE.
Paste the website recommendations Code where you would like the recommendations to display on your website.
Your code should look like the example below. You can see the recs code is above the Async JavaScript and the Listrak Analytics JavaScript.
💡 The data-ltk-merchandiseblock has an ID that is specific to your merchandise block.
To view the below example screenshot, right click and open the image in a new tab.
PREPENDING DOMAINS
STOP: If you are sending Listrak relative image and link URL paths in your data files, you will have to prepend the domain name so the images and links for the website recs work correctly. Before doing this, save your changes and test to ensure that your recommendations are rendering appropriately.
1. The easiest way to prepend the Link URL and Image URL is to add two variables in a script tag to your webpage that holds this information. For this example, we will use var imageRoot and var linkRoot.
TIP: The values that go here should be based on the values from your products file. For example, if you are sending us an image URL of whitepolo.jpg, then you may want to prepend the image root http://www.styleco.com/media/catalog/product/. This depends on where you are storing your images. Otherwise, if you are sending us absolute URL’s, then you may not need a root location.
2. After you have prepended your domain, you will have to make some modifications to your Website Recommendations script so it adds your prepended domain variables to the relative link and image URL’s that you’re passing to Listrak.
Change @Recommendation.LinkUrl to @(linkRoot + Recommendation.LinkUrl)
Change @Recommendation.ImageUrl to @(imageRoot + Recommendation.ImageUrl)
To view the below example screenshot, right click and open the image in a new tab.
After you've completed the above, check out our On-site Recommendations Additional Options and Methods.