PREREQUISITE

Before getting started, please have your MerchantID ready to insert into the below code. Your Project Manager will provide you with this at the start of your onboarding/replatforming. If you are missing your MerchantID, please contact the Listrak Client Success Team at (877) 362-4556 x1, success@listrak.com, or the chat bubble in the lower right-hand corner of this page.

PART 1: ADDING THE JAVASCRIPT FRAMEWORK TO THE BOTTOM OF THE PAGE

Place this block of code above the end body tag </body> on every page on your site. Be sure to replace MERCHANTID in the code below with your unique ID.

<!-- Listrak Analytics – Javascript Framework -->
<script type="text/javascript">
        var biJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
        (function (d, s, id, tid, vid) {
          var js, ljs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return; js = d.createElement(s); js.id = id;
          js.src = biJsHost + "cdn.listrakbi.com/scripts/script.js?m=" + tid + "&v=" + vid;
          ljs.parentNode.insertBefore(js, ljs);
        })(document, 'script', 'ltkSDK', 'MERCHANTID', '1');
</script>

PART 2: INSTALLING CONVERSION TAGS ON THE ORDER CONFIRMATION PAGE

  • Place the below code on the order confirmation page only. Please be sure this code is above the JavaScript Framework code you installed in part 1.
  • Update all _ltk.Order.[variables] with the appropriate values from customer's completed order.
  • For _ltk.Order.AddItem, iterate though all items ordered, one line per item ordered.
<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 **********/
/** Handle ORDER **/
_ltk.Order.SetCustomer('customer@email.com', 'FirstName', 'LastName');
_ltk.Order.OrderNumber = '10025736';
_ltk.Order.ItemTotal = '25.00';
_ltk.Order.ShippingTotal = '6.99';
_ltk.Order.TaxTotal = '1.50';
_ltk.Order.HandlingTotal = '0.50';
_ltk.Order.OrderTotal = '33.99';
_ltk.Order.AddItem('SKU-123', 3, '5.00'); // one line per item ordered
_ltk.Order.AddItem('SKU-124', 1, '10.00'); // one line per item ordered
_ltk.Order.Submit();
/********** End Custom Code ************/
});
</script>

ADDING TRACKING PIXEL TO ORDER CONFIRMATION PAGE

Place this image tag at the top of the order confirmation page only directly after the opening <body> tag.

  • Please be sure to replace the MERCHANTID with your unique ID. This is the same ID as in part 1.
<img src="https://fp.listrakbi.com/fp/MERCHANTID.jpg" height="1" width="1" />

PART 3: INSTALLING THE BROWSE ACTIVITY CODE

UNDERSTANDING THE ASYNCLISTENER

All Listrak code outside of the OneScript tag you installed in part 1 will be wrapped in a block of code called the AsyncListener. 

All of the function calls will be added between the Begin and End Custom Code comment blocks.

It is best to place the AsyncListener just below the <body> tag, and should always be above the OneScript 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 **********/
 
/********** End Custom Code ************/
});
</script>

ADDING THE PRODUCT BROWSE FUNCTION TO THE ASYNCLISTENER 

Add the following function to your AsyncListener code block with the SKU of the current product for that product page, only on product pages.

_ltk.Activity.AddProductBrowse('SKU1'); 

Please be sure you are passing the same SKU that's being passed in your product file. 

Your code block will look something like this:

<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.Activity.AddProductBrowse('SKU1');
/********** End Custom Code ************/
});
</script>

PART 4: SETTING UP EMAIL CAPTURE CODE

The email capture code allows Listrak to capture the visitor's email address to be used in all Abandonment solutions. 

ADDING THE CAPTURE CODE FUNCTION TO THE ASYNCLISTENER

  • Locate the IDs for every text field that a customer is able to enter their email address. For example, your footer email input text box might look like this:
  • Use the ID from every email input in the _ltk.SCA.CaptureEmail function:
_ltk.SCA.CaptureEmail('YourEmailFieldID');

Each ID will be placed in it's own line of code. Your code block might look something like this:

<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.SCA.CaptureEmail('Textbox-1');
_ltk.SCA.CaptureEmail('footerInput');
_ltk.Activity.AddProductBrowse('SKU1');
/********** End Custom Code ************/
});
</script>
  • NOTE: You may have additional functions from previous steps in this code.

PART 5: ADDING CART ACTIVITY CODE

Every time a customer updates their shopping cart, you will need to send Listrak those cart contents with the _ltk.SCA.AddItemWithLinks function. This call includes:
SKU
, Quantity, Price, Product Title, Relative Image URL, Relative Product URL.

ADDING THE CART ACTIVITY FUNCTIONS TO THE ASYNCLISTENER

Below is what the function will look like:

_ltk.SCA.AddItemWithLinks('sku1', 1, '19.95', 'prod 1', '/images/product1.jpg', '/product1.html');

Listrak does not save the cumulative cart, so each time a customer updates their cart you will need to send the full cart. For example, if a customer adds a second item to their cart, you will call the function twice, once for each item:

_ltk.SCA.AddItemWithLinks('sku1', 1, '19.95', 'prod 1', '/images/product1.jpg', '/product1.html');
_ltk.SCA.AddItemWithLinks('sku2', 1, '29.95', 'prod 2', '/images/product2.jpg', '/product2.html');

Similarly, if a customer updates the quantity of one of the carted items, you will call the function twice, once for each item, updating the quantity of the additional item:

_ltk.SCA.AddItemWithLinks('sku1', 2, '19.95', 'prod 1', '/images/product1.jpg', '/product1.html');
_ltk.SCA.AddItemWithLinks('sku2', 1, '29.95', 'prod 2', '/images/product2.jpg', '/product2.html');

CLEARING THE CART 

IMPORTANT: When a customer removes all items from their cart, you will need to use the _ltk.SCA.ClearCart function to let Listrak know the cart has been emptied. 

  • Call the Clear Cart function if the site visitor presses an Empty Cart button on your website.
  • If a website visitor removes the last item from the cart.
_ltk.SCA.ClearCart();
  • NOTE: The Clear Cart function should stand alone and not be called with the AddItemWithLinks function call.

Below is an example of what your AsyncListener code block might look like after adding the cart code and completing all of the above steps:

<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.SCA.CaptureEmail('Textbox-1');
_ltk.SCA.CaptureEmail('footerInput');
_ltk.Activity.AddProductBrowse('SKU1');
_ltk.SCA.AddItemWithLinks('sku1', 1, '19.95', 'prod 1', '/images/product1.jpg', '/product1.html');
  _ltk.SCA.AddItemWithLinks('sku2', 1, '29.95', 'prod 2', '/images/product2.jpg', '/product2.html');
/********** End Custom Code ************/
});
</script>

Below is what the block might look like if a customer has removed all items or pressed a Remove all items button:

<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.SCA.CaptureEmail('Textbox-1');
_ltk.SCA.CaptureEmail('footerInput');
_ltk.Activity.AddProductBrowse('SKU1');
_ltk.SCA.ClearCart();
/********** End Custom Code ************/
});
</script>

You are done!

TESTING YOUR CODE

Your Listrak onboarding team will validate your integration - ensuring Listrak is receiving all of the data and your account is properly configured. However, please test your code using browser development tools. Click here to learn more about testing your integration with our integration testing guide. 

Did this answer your question?