Advanced recommendation

How to make predictions via Javascript.

Html structure for recommendations

The structure of the recommendations is created so that you can easily give them your style using CSS:

<div class="rek-prediction" data-nrofhits="2">
  <ul class="rek-prediction__list">
    <li class="rek-prediction__item">
      <a class="rek-link rek-prediction__link" href="/link">Lorem Ipsum</a>
    </li>
    <li class="rek-prediction__item">
      <a class="rek-link rek-prediction__link" href="/link2">Customer service 2</a>
    </li>
  </ul>
</div>

Reload predictions via Javascript

If you want to reload all predictions on a page, you can do it via Javascript. You can then first change data parameters in the div (for example which city you are in) and then create new predictions. The new predictions are placed after the existing ones because we never overwrite list items, so if you want to replace them, you can use the Javascript function for rendering (for example data-callback="generatehtml").

<script>
  // Reloads all predictions
  window.__rekai.checkAndCreatePredictions(window.__rekai.customer );
</script>

Only send with certain features when predicting

Then only the specified values ​​for the recommendation are used.

<div class="rek-prediction" data-subtree="" data-projectid="10011003" data-nrofhits="10" data-usecf="f4">

If you want to change values ​​before the page view is sent via Javascript

function transformViewParameters(sendObject) {
  console.log(sendObject);
}
 
window.__rekai.transformViewParameters = transformViewParameters;
 
window.__rekai.sendView();

Transform parameters before sending to get predictions

If you want to change parameters in the last step before a prediction is made, you can write a function that runs automatically as a last step. Add the following to a Javascript on the web page and the data will be printed to the console. All these parameters can be overwritten or changed before a prediction is created.

function transformPredictionParameters(parameters, sendObject) {
  console.log(parameters);
  console.log(sendObject);
  // Here you can modify parameters before a prediction
  // Example:
  sendObject.mb = 1;
}
 
window.__rekai.transformPredictionParameters = transformPredictionParameters;

Transform the request string before sending it for prediction

If you want to add parameters to the URL sent via GET to get a prediction, you can do it with the following function.

function transformRequestString(params) {
  params += '&foo=bar';
  return params;
}
 
window.__rekai = window.__rekai || {};
window.__rekai.transformRequestString = transformRequestString;

In the example above, parameter foo is added to the end of the request.

Javascript event triggered by rek.ai

Example of how you can trigger a recommendation as soon as the rek.ai javascript has been downloaded.

<script>
  window.addEventListener('rekai.load', function() {
    function myCallback(data) {
      console.log(data)
    }
    var options = {}
    window.__rekai.predict(options, myCallback);
  })
</script>

Run a function when the recommendation is ready

When the call is completed and the links are rendered in the list, the script tries to execute the function:

rekPredictionDone();

You can easily implement a function with that name. For example, to add a custom class to the recommended links (the example assumes you have jQuery added to your page):

<script>
  function rekPredictionDone() {
    $( '.rek-prediction__link' ).each( function(){
      $(this).addClass('my-class');
    });
  }
</script>

Or add a target blank to all links to an e-service portal:

<script>
  function rekPredictionDone() {
    $('.rek-prediction a').each(function(){
      if($(this).attr('href').indexOf('https://minasidor') > -1) {
        $(this).attr('target','_blank');
      }
    });
  }
</script>

Add tracking of clicks on recommendations created by Javascript

Rek.ai automatically saves views and clicks on recommendations. But if they are created with Javascript, they are not detected by our function, but then you can add that function yourself. So after the recommendations are in place you can run the function.

<script>
  // Add events to all a-tags inside the div with the class "recommendations-card"
  window.__rekai = window.__rekai || {};
  window.__rekai.checkAndAddEventsToDOM('.recommendations-card');
</script>

Add your links after the recommendations are ready

Since a function runs after the recommendations have been added, you can add your links to a recommendation area in it. Have the links ready in a Javascript object and then put them in the list.

<script>
  // List of links to add
  var addLinks = [{
    name: 'Foo',
    url: 'bar. html'
  }]
 
  // This function will run when prediction is done
  function rekPredictionDone() {
    for(var i = 0; i < addLinks.length; i++) {
      // Add a new li to prediction list
      $('.rek-prediction ul').append('<li><a href="' + addLinks[i].url + '">' + addLinks[i].name + '</a></li>');
    }
  }
</script>