Variables

Variables form the backbone of multivariate tests. Anything you would like to change between permutations should be a variable. This could be things like taglines or background images.

Variable types#

There are currently four types of variables;

Text
Color
Image
Font

Text#

Text variables simply replace their macros with their values.

<span class="tagline">
    [text_var]
</span>

<span class="tagline">
    My tagline!
</span>

tip

Text variables can be used for things other than simple strings, such as external image URLs, CSS styling or JavaScript variables.

Color#

Color variables work in much the same way as Text, replacing their macro with their values. The main difference is that Color variables are better suited to displaying color data in Labs.

<a href="#" style="color: [color_var];">
    A variably colored link
</a>

<a href="#" style="color: #e90c8a;">
    A variably colored link
</a>

Image#

The Image type will replace their macro with the URL to the image.

<style>
    body {
        background-image: url("[image_var]");
    }
</style>

<style>
    body {
        background-image: url("https://cdn.emerse.com/image.png");
    }
</style>

tip

You can use an Image variable even if you only want one image.

Font#

The Font type will replace their macro with the URL to the font. Compatible font extensions are .ttf, .otf, .woff and .woff2.

The preferred format is .woff which is supported by all major browsers including Internet Explorer.

<style>
    @font-face {
        font-family: MyFont;
        src: url("[font_var]");
    }

    <span style="font-family: MyFont;">Lorem impsum</span>
</style>

<style>
    @font-face {
        font-family: MyFont;
        src: url("https://cdn.emerse.com/font.woff");
    }

    <span style="font-family: MyFont;">Lorem impsum</span>
</style>

Support for standard font families#

The font variable type does not yet handle standard font-family string such as "Times New Roman", Times, serif or Arial, Helvetica, sans-serif. However, this is easily achievable by using a Text variable with the desired font-family strings.