variation.js

This is for:

Developer
In this article

The variation.js file controls what happens once the experience has been triggered and should contain the main body of your experience logic.

The code in this file executes once all the triggers and segment conditions have been met.

You can also duplicate a variation to A/B/n test your experience. See Duplicate an experience for details.

Example usage

Here is a simple example that changes the text content of an element:

module.exports = function variation (options) {
  document.querySelector('p.hidden-xs').innerText = 'New text new text.'
}

If your variation returns a promise, any asynchronous errors that cause the promise chain to be rejected will be captured and reported in the UI.

Note

All the code written in the variation.js file is locally scoped.

Hooks

There are several hooks that can be returned from the functions within triggers.js and variation.js. This involves returning an object with any of the following parameters from the variation or triggers:

onRemove

This hook allows you to provide some cleanup methods. If Smartserve restarts, these methods will be called. You should use this hook to remove any side effects.

If you implement this method, you’ll also be able to use the hot reloading feature of Qubit ClI.

Example usage

module.exports = function variation (options) {
  var $ = require('jquery')
  $('body').append('<div class="t001-div">Personalized message</div>')
  options.onRemove(() => $('.t001-div').remove())
}