Initializing a Test

The Test Object

Every JS test begins by creating a Test object that will initialize all of the test parameters, contain the variations, and provide the methods for running the test.

Here's an example of the most basic type of test initialization:

var smartTest = new Test({
  selector: '#home-cta'
  name: 'homepage-button',
  site: 'smartctr',
  callback: function (node) {
    console.log('Test variation ' + this.liveVar.name + ' is live!')
    node.innerHTML = this.liveVar.content
  }
})

Note that the following paramaters are necessary: name, site, callback, variations. In the test above we're also using the selector param, which allows us to attach this test to a DOM node and use that node as the basis for rotating our content. But note that we have not yet added variations.

Adding Variations

Variations can be added as an array directly to the Test initialization, or they can be added through the Test.addVar() convenience method (which takes a single Var object or an array and can be used in a loop and in other creative ways). Here's an example of using the addVar method:

smartTest.addVar({
  name: 'control',
  content: 'This is the control test!'
})

The addVar() method can also take an array of variations if you want to add all of them at once:

smartTest.addVar([{
  name: 'control',
  content: 'This is the control test!'
  },
  name: 'alternate',
  content: 'This is the alternate!'
  },
])

Starting the Test

One a Test object has been initialized with all of the parameters and variations have been added we're ready to start the test. To do that is as easy as:

smartTest.start()

...and the test will initiate, collect variations, fetch data from the server, and run the tests's callback (which is typically what injects the correct content into the DOM). See the Test Lifecycle for more information on the order of this.

The Callback: Changing Content

Once the test has data from SmartCTR and (if necessary) a DOM node then it will run the callback function. The callback function controls what actually happens from the client perspective: e.g. it is usually responsible for injecting or changing content based on the test variation (though it can be used to do just about anything including run other javascript).

Here's another look at our init code:

var smartTest = new Test({
  selector: '#home-cta'
  name: 'homepage-button',
  site: 'smartctr',
  callback: function (node) {
    console.log('Test variation ' + this.liveVar.name + ' is live!')
    node.innerHTML = this.liveVar.content
  }
})

The callback function is passed the Test object as this and is also given a node if it is available, which refers to the DOM node that contains the test. Using these, and another convenience object this.liveVar it is very easy to swap content when the test is ready. Each of our variables has a name and content, looking at the above callback function you can see we're using the liveVar and replacing content of the DOM node (in this case #home-cta) with our live variable's content.

This same basic structure can be used to add classes, change css, or do just about anything else that is possible with Javascript. Take a look at the Callback: Changing Content page to learn more about this.

Test Options and Parameters

Here's an outline of the most common options and parameters for the Test object, for a complete listing of all params and methods see the Full API Reference.

Properties

Methods