A/B testing

The Autheos embed code includes convenient utilities to A/B test the video content on your shop. This includes testing the conversion of video, or user engagement between different UI implementations.

A/B testing is not enabled by default. Implementing UI tests will always display the first UI template unless A/B testing is enabled. To qualify for A/B testing, please contact us.

A/B testing different templates#

To make use of template testing, you’ll want to configure the templates you want to test between in your embed code. To do this, you can pass an array of template names to the templateId property in Autheos.embed like so:

Autheos.embed({
  ean: ['1234567890123', '9999999999999'],
  language: ['nl', 'en'],
  templateId: ['button', 'thumbnail']
});

The embed code will then select a random template to render every time videos are embedded. If A/B testing is disabled, the first item from templateId will be used instead.

It is likely that you want to render different templates at different positions in your page. To control that, modify the doRender function:

const instance = new Autheos.AutheosUI({
  doRender: function (ctx, template, defaultTarget) {
    // ctx.templateId is the selected template name
    switch(ctx.templateId) {
      case 'button': {
        // Render the button template in your target element
        const target = document.querySelector('#video-button-wrapper');
        target.appendChild(template);
        break;
      }
      case 'thumbnail': {
        // Render the thumbnail template in your target element
        const target = document.querySelector('#video-thumbnail-wrapper');
        target.appendChild(template);
        break;
      }
    }
  }
});

instance.embed({
  ean: ['1234567890123', '9999999999999'],
  language: ['nl', 'en'],
  templateId: ['button', 'thumbnail']
});

More detail about custom renderers can be found at configuring.

You can also define your own custom UI templates to A/B test between. Simply add your templates to the UI configuration and use their names to test between:

const instance = new Autheos.AutheosUI({
  templates: {
    myButtonTemplate: function () { /* your template code */ },
    myThumbnailTemplate: function () { /* your template code */ }
  }
});

instance.embed({
  ...
  templateId: [
    'myButtonTemplate',
    'myButtonTemplate'
  ]
});

For any questions, don’t hesitate to contact us for a custom example.