Advanced recommendation

Prefer to configure this without code? The Recommendations module manual (opens in a new tab) covers rendering styles, filtering and other settings through the Sitevision module.

Customize the HTML output

HTML structure for recommendations

The structure of the recommendations is built so you can easily style it with 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

To reload all predictions on a page, for example after changing a data parameter such as the visitor's city, call the function below. New predictions are placed after the existing ones, since existing list items are never overwritten. If you want to replace them instead, use the rendering callback (for example data-callback="generatehtml").

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

See also: How to make predictions via Javascript (opens in a new tab).

Control what data is sent

Only send certain features when predicting

Add data-usecf to the recommendation div to limit a request to specific features. Only the specified feature values are then used when generating the recommendation.

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

Change values before a page view is sent via Javascript

Define a transformViewParameters function to modify the data just before a page view is saved to the backend. It runs automatically as the last step.

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

Transform parameters before sending to get predictions

Define a transformPredictionParameters function to modify parameters just before a prediction request is sent. It runs automatically as the last step, and any changes you make are included in the request. The example below logs the current parameters to the console; sendObject.mb = 1 shows how to overwrite a value.

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

To add parameters to the GET request URL used for predictions, define a transformRequestString function. In the example below, the parameter foo is appended to the end of the request.

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

React to recommendation events

Javascript event triggered by Rek.ai Javascript

<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

Once the recommendations have been rendered into the list, Rek.ai tries to call the following function- implement it to run your own code at that point:

rekPredictionDone();

For example, to add a custom class to the recommended links (assumes jQuery is available on the page):

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

Or to open all links to an e-service portal in a new tab:

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

Add click tracking for recommendations created by Javascript

Rek.ai automatically tracks views and clicks on recommendations it renders- but if you generate recommendations with your own Javascript instead, they won't be detected automatically. Once your recommendations are in place, run the function below to start tracking them:

<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 own links after the recommendations are ready

Since rekPredictionDone runs after the recommendations have been added, you can use it to append your own links to the list. Prepare the links as a Javascript object first:

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