Home Blog Docs Guides

Javascript

Deploy the tracker script

If not already implemented, make sure to include the header script for our tracker to each page that will serve recommendations. Follow this guide to setup your tracker script.

Deploy the recommendation block

Place your recommendation block anywhere on the page using the following tag.

<div data-id="1" id="my-recommendation-block"></div>

And put the following javascript code at the bottom of your page.

zlt.rec(pid, "my-recommendation-block")

pid: A string of comma separated product ids. E.g. "1,2,3" tid: The id of the template you wish to display. E.g. "1"

The pid should contain the IDs of the currently viewed product and any product added to cart.

<!-- Example -->
<head>
   ...
   <!-- Initiate the tracker -->
   ### FOLLOW THE GUIDE ABOVE TO DEPLOY THE TRACKER SCRIPT ###
</head>
<body>
   ...
   <!-- Position the recommendation block -->
   <div data-id="1" id="my-recommendation-block"></div>
   ...
   <!-- Call the recommendation engine -->
   <script type="text/javascript">
      var pid = '1,2,3';
      zlt.rec(pid, "my-recommendation-block");
   </script>
</body>

Remember to replace [ADD YOUR TRACKER KEY] with your tracker key.

Extended options

Attribute

Usage

data-id

Template, or block selection

Required

data-mid

Model Selection, overwrites block in data-id

Optional

data-mprods

Number of Prods to get for Mobile

Optional

data-mslide

Number of Slides to show on Mobile

Optional

data-prods

Number of Products to get for Desktop

Optional

data-slide

Number of slides to show on Desktop

Optional

data-variant

Define variant for A/B testing

Optional

Examples

...
<!-- Position the recommendation block -->
<div data-id="design-id" data-model="model-id" id="my-recommendation-block"></div>
...

OR

...
<!-- Position the recommendation block -->
<div data-id="block-id" id="my-recommendation-block"></div>
...

Placement

We recommend that you position the recommendations as visible as possible on the product, cart and checkout pages. The position is vital for good recommendation performance. Read more about it in our article on product recommendations.

PreviousDeployNextShopify

Last updated