Sizmek HTML5 Workspaces are a toolset for you as a programmer to incorporate our HTML5 rich media features using the authoring environment of your choice. Workspaces are ZIP folders that contain all of the assets and files you’ll need for a single ad, pre-packaged withSizmek API code. Once you have a Workspace, all you have to do is plug in your own assets and customize your ad the way you want. When you’re finished, zip all of your HTML5 assets into a bundle and upload them to the Sizmek MDX platform for trafficking. In the platform, the folder created in the Asset Library is named according to the zip file name. If the folder already exists with this name, the system automatically adds a suffix to the folder name.

You can create your own Workspace from scratch or download a template, and view a demo of the HTML5 templates. Each creative format/feature article includes a link to download the Workspace. When you extract the ZIP file, make sure to preserve the directory structure.

Recommended Practices

  • If you are creating an ad using a Sizmek Workspace template and updating or replacing images or videos, make sure to also update references to their filenames and dimensions found in index.html and style.css as necessary.

  • Use a text editor to update the layout and design of a template in the index.html and style.css files.

  1. Create the HTML5 ad using JavaScript and CSS.

  2. Add Click-throughs, custom Interactions using the HTML5 API.

  3. Test your ad locally by opening the index.html in a web browser and walk through the ad experience. You can use a web-debugging tool to view the source code and any data being sent or received by the ad.

  4. Place all your assets including the default image in a folder and compress to a zip.

  5. In the platform, under Creative Assets, create a new Workspace by uploading the zip file.

  6. Under the Ads section, create a new ad.

  7. Build your ad in the Sizmek MDX platform.

  8. Preview your ad in the platform.

Workspace Elements

The Sizmek HTML5 ad Workspace includes the following ad-related elements:

  • HTML files:

    • index.html: The ad’s main creative file and initialization code.

    • config.js: Controls ad behavior, playback, and functionality. Serves as the main configuration file of the Creative AdKit.

    • style.css: The style sheet for the ad and its elements.

  • Sizmek Tracking code: Tracks your users' interactions with your ads.

  • Smart Versioning: Adds Smart Versioning functionality to your HTML5 ads. For more information, see Add Dynamic Creative Functionality to Your HTML5 Ads Using Workspaces.

  • Ad Assets: Images and videos. You can save your images in a dedicated AdditionalAssets folder. For more information, see Uploading and Managing Additional Assets for Workspaces.Uploading and Managing Additional Assets for Workspaces

Rules and Guidelines

  • Place the index.html and config.js in the root of the Workspace.

  • Include the adkit.js or the EB.Loader.js in the root HTML file.

  • The index.html file must be larger than 0 KB.

  • The size of an HTML5 ad is the total size of all assets in the ad’s Workspace, at the compressed size. This includes images, the largest video, fonts, JavaScript files, HTML files and any other files. We do not count additional assets for dynamic creative or videos. Compression is automatically applied which reduces the size of each asset type to the compressed size. For more information, see Calculate the HTML5 Ad Size.

  • The Workspace name must be unique.

  • Asset names must not contain spaces.

  • In the platform, a special icon is used to indicate a Workspace so that you can easily identify HTML5 ads.

  • Before you upload the Workspace to Sizmek, ensure that the .zip file does not include a _MACOSX folder, or  .DS_Store andIcon_ files in the subfolders.
  • Supported Asset Types:

    • HTML files: HTML, JavaScript, CSS

    • Images: GIFs, JPEGs, PNGs

    • Videos: MP4s, OGG vorbis files, WebM videos

Managing Workspaces

What do you want to do?

Was this article helpful?
5 out of 5 found this helpful
Have more questions? Submit a request