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
| Eventnamn | DOM element | Description |
|---|---|---|
| rekai.load | window | After 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;
}