LiftIgniter Code Demo - with A|B test

by LiftIgniter

HTML

<center><h1>
LiftIgniter<br> Recommendations
</h1></center>

<!--The Recommendation Area where items will be displayed-->
<div style="height:100px;width:470px" id="li-recommendation-unit">
  <div style="text-align: center;"  class='recommended_item li-widget-item'>
    <a class='headline' href='//url-1'>Title 1</a>
  </div>

  <div style="text-align: center;"  class='recommended_item li-widget-item'>
  <a style="text-align: center;" class='headline' href='//url-2'>Title 1</a>
  </div>

  <div style="text-align: center;"  class='recommended_item li-widget-item'>
    <a class='headline' href='//url-3'>Title 3</a>
  </div>

  <div class='recommended_item li-widget-item'>
    <a class='headline' href='//url-4'>Title 4</a>
  </div>
</div>

<!--Widget Display Template-->
<div id="recommended-item-template">
  <div style="text-align: center;"  class='recommended_item'>
    <a class='headline' href='{{url}}'>
      <div>{{title}}</div>
      <div><img src="{{thumbnail}}"></div>
    </a>
  </div>
</div>

CSS

#recommended-item-template {
  visibility: hidden;
}

img {
  max-width: 400px;
}

.recommended_item {
  margin: 15px;
}
.recommended_item {
border: 2px dashed  #ffffff;
box-shadow: 0 0 0 8px #a3a3a3;
}

JavaScript

//---------- BEACON SNIPPET START------------
// The Beacon calls our JS SDK, which allows the usage of the other $p functions seen below. It also applies a first-party tracking cookie to identify unique users.

if (typeof $igniter_var === 'undefined') {
  // Ensures that our client code is updated.
  (function(w, d, s, p, v, e, r) {
    w.$ps = (w.performance && w.performance.now && typeof(w.performance.now) == "function") ? w.performance.now() : undefined;
    w['$igniter_var'] = v;
    w[v] = w[v] || function() {
      (w[v].q = w[v].q || []).push(
        arguments)
    };
    w[v].l = 1 * new Date();
    e = d.createElement(s), r = d.getElementsByTagName(s)[0];
    e.async = 1;
    e.src = p + '?ts=' + (+new Date() / 3600000 | 0);
    r.parentNode.insertBefore(e, r)
  })(window, document, 'script', '//cdn.petametrics.com/f7tsbsle43k5irci.js', '$p');
  // If you have a LiftIgniter account, you can replace "f7tsbsle43k5irci" with your own JS key to get recommendations from your own inventory. Make sure to replace it in the URL above, and in the $p("init") function below.

  $p("init", "f7tsbsle43k5irci");
  //This JS key will return a max of 4 test items from LiftIgniter.
}
//---------- BEACON SNIPPET END------------

//$p('render') uses the template defined in the HTML to overwrite the target area with the items recommended by LiftIgniter.
var rendering_callback = function(resp) {
  var els = document.querySelectorAll('#li-recommendation-unit > div.li-widget-item');
  var template = document.querySelector('#recommended-item-template').innerHTML;

  for (var i = 0; i < els.length && i < resp.items.length; ++i) {
    // Basically Mustache.render(template, resp.items[i]); 
    els[i].innerHTML = $p('render', template, resp.items[i]);
  }
}

//$p('track') attaches event listeners and query string parameters to each URL in the recommendation area.
var trackAlgo = function(algorithm) {
  $p('track', {
    elements: document.querySelectorAll('#li-recommendation-unit...