Image Optimization

Overview

The SmartCTR image optimization API is made for rotating different images to determine which image converts the best in a given placement. The most common uses for this are rotating product images in a store, rotating primary content images, or testing on-site advertisements. But it can be used on almost any image as long as you can also load the trackign javascript.

The image testing API consists of three parts that are combined into an image src tag like this:

<img smart-test="testname" src="https://img.smartctr.com/source/path/file.jpg?params"/>

To test a specific image for conversion rate all you have to do is build the image url with your params and variations, place that image on your page, set your goal, and include the tracking script. Boom, test finished.

The URL

A test url is constructed from three parts, the pieces are:

Base URL – https://img.smartctr.com
The base url for all image tests

Image source + /path/ + filename – /source-name/path/to/image/filename.jpg
The source refers to your image folder or bucket set in your account, the path can be any path within your source folder

Query parameters: – ?name=testname&group=testgroup&w=600&h=400&file[]=filetwo.jpg
These include the test name, group, different image filenames, and width/height of the image

Here's a live example:

See the Pen Image SRC Example

<img src="https://img.smartctr.com/source-name/path/to/image/control-filename.jpg?name=name&group=group&w=600&h=300&file[]=secondfile.jpg&file[]=thirdfile.jpg"/>

Test Definition

It's very important to understand how tests are uniquely definied by SmartCTR. Since SmartCTR is designed to run and create tests individually on lots of pages the Unique ID of a test is a key part to knowing when something will apply to the same test and when it will create a new test.

Unique Test ID = sourcename + /path/ + filename.jpg + testname

All of the above except for the testname are apart of the url (the testname is defined in the query string with ?test=testname). If all of the elements are the same they will refer to the same test (e.g. changing query parameters will not change a test). If any of them are different they will create or refer to a new test (e.g. to start a new test in the same spot you must chance the first filename or the test name in the query string).

Parameters

The query parameters of the url are where most of the test-specific details are set. The name and group of the test are typically set first with ?name=testname&group=default and are then followed by image width and height &w=400&h=200 and finally all of the image variations (filenames) that are being rotated for the test: &file[]=imgtwo.jpg&file[]=imgthree.jpg etc..

It's important to note that the different filenames are added using square bracket notation(e.g. file[]=filename.jpg not file=filename.jpg).

Here's a list of all available query parameters:

Creating a Goal

Once your image is correctly delivering and rotating through variations it's necessary to setup a goal for the test. In general there are two parts to goal tracking: placing smart-test="testname" in your image tag, and placing smart-goal="testname on the link or element where users are clicking. Here's an example:

<a href="#" smart-goal="imgdemo">
  <img smart-test="imgdemo" src="https://img.smartctr.com/source-name/path/file.jpg?..." />
</a>

Now when that is included in a page and the tracking script is correctly installed the test will track views on pageload and track a goal when the link is clicked.

It's possible to set the smart-goal on different elements on the page (that aren't near the image or that aren't links) and it's possible to track other goals like time-on-page, specific elements, and not-bouncing. See Settting Up Goals for more.