Creative upload

Labs currently supports uploading creatives from

HTML,
Google Web Designer, and
Adobe Animate CC (Beta).

Variables#

Variables in uploaded creatives should follow the {{variable}} scheme. Once uploaded they will be extracted and converted to the [variable] scheme used in labs.

The reason for the different naming scheme as compared to the one used interally in Labs is to avoid collisions, especially minified JavaScript.

<body>
    <p>{{my_var}}</p>
</body>

<body>
    <p>[my_var]</p>
</body>

Creative variables before and after uploading.

Automatic variable extraction#

If you so choose, Labs will also attempt to extract text and color variables from your creative. This is done on a best-effort basis and results may vary.

<style>
    body {
        background-color: #cccccc;
    }
    <p>My text</p>
</style>

<style>
    body {
        background-color: [color_0];
    }
    <p>[text_0]</p>
</style>

Automatic variable extraction before and after uploading. [color_0] will have a value #cccccc and [text_0] will have a value My text.

Caveats#

Color variables are currently only extracted from hex #abc or #aabbcc representations. rgb(255, 255, 255), for example, would not be extracted.

Formats#

HTML#

You can upload either a single .html file or a zipped archive with an .html file and other resources such as .css and image files.

Labs will attempt to inline links to local .css and .js files. Images and fonts in the archive will be extracted into variables.

Google Web Designer#

Google Web Designer creatives should be published with the Flatten files, Inline local files (.js and .css), Create zip and Minify settings enabled.

In the case of a responsive creative, all the supported sizes will be imported into Labs as separate creatives using a common set of variables.

Adobe Animate CC#

In the case of a responsive creative, only a single creative will be imported and its size will need to be set manually. If multiple creatives for different sizes are required this needs to be handled manually by copying this initial creative.