Advanced recommendation

Advanced recommendation

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();

Send rendering recommendations via Javascript

If the recommendations are retrieved via Javascript, it is still possible to render via the rek.ai script. By submitting the recommendations delivered from rek.ai.

<div id="re-target"></div>
 
<script>
  var options = {
    overwrite: {
      addcontent: true,
      subtree: 'news'
    }
  }
 
  function myCallback(data) {
    console.log(data)
    var targetDiv = document.getElementById('ac-target');
    targetDiv.classList.add('rek-prediction');
    window.__rekai.renderPredictions(data, targetDiv, options.overwrite);
  }
 
  window.__rekai.predict(options, myCallback);
</script>

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

Using session data from a different project than the active one

If a project wants to use the session path (i.e. URLs visited during the session) from another project, it can be done by adding a property to the customer object.

// Add overwrites
var options = {
  customer: window.__rekai.customer,
  overwrite: {
    nrofhits:20,
  }
}
 
// Set to a specific project
options.customer.projectid = 10301062;
// Read session from specific project
options.customer.readdatafromproject = 10301056;
 
// Do prediction
window.__rekai.predict(options, renderProducts);

Javascript event triggered by rek.ai

EventnamnDOM elementDescription
rekai.loadwindowAfter the rek.ai javascript is downloaded, this event is triggered. Good to use if you want to get a recommendation as soon as possible.

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() {
    $svjq('.rek-prediction a').each(function(){
      if($svjq(this).attr('href').indexOf('https://minasidor') > -1) {
        $svjq(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>

Transform parameters before sending them for a prediction

If you want to change values ​​before a prediction is retrieved, you can overwrite the object that is used to build up the GET-URL that is sent. In the example below, we print out the parameters and change them so that all predictions are based on the fact that the visitor is not using a mobile phone.

window.__rekai.transformPredictionParameters = function(parameters, sendObject) {
  console.log(parameters);
  console.log(sendObject);
  sendObject.mb = 1;
}