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.

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;">
<script type="text/html">
<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>
</script>
</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;">
<script type="text/html">
<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>
</script>
</div>

<!-- END Onsite Recs-->
  1. Log into Listrak.
  2. Navigate from the home menu to Solutions.
  3. Go to Recommender.
  4. Then Merchandise Blocks.
  5. Click on the Show Code icon to get the code for the recommendations you’d like to display on your website.

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

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

8. 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.
9. Paste the website recommendations Code where you would like the recommendations to display on your website.
10. Your code should look like the example below. You can see the recs code is above the Async JavaScript and the Listrak Analytics JavaScript.

  • NOTE: 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.

Did this answer your question?