Follow
Last Update:
  viewable by end users
  editable by agents

Overview

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 with Sizmek 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. Iif 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, view a demo of the HTML5 templates or get the latest copy of the build guide, please visit the Formats tab in Sizmek Showcase. Download the Workspace from the Sizmek Showcase and extract it, while preserving 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. 
Procedure
  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:

  • The following HTML files are included:
    • 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 Adding Smart Versioning Functionality to Your HTML5 Ads.
  • Ad Assets: Images and videos. You can save your images in a dedicated AdditionalAssets folder. For more information, see OVERVIEW: 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 HOW TO: 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.
  • 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?

When you are finished authoring your ad, put all of its files in one folder and compress that folder to a ZIP. When uploaded to the  platform, the ZIP's files will automatically be extracted, creating a Workspace on the platform.

When you are creating your HTML5 ad, instead of selecting creative assets, like in other rich media ads, you select a Workspace.

Rules and Guidelines
  • We recommend you upload the Workspace once, and apply changes only by adding files or by using the Replace button.
  • The Workspace name must be unique. If the Workspace name already exists, you will need to enter a new name.
  • All changes made to the assets will affect the HTML5 Workspace.
  • If you make changes to the hierarchy of a Workspace, this may require changes in your ad's code.
  • You cannot add assets that are larger than the largest asset in your Workspace.
Procedure
  1. From the main menu, select Manage > Creative Assets.
  2. Select the folder to where you want to upload your Workspace or create a new folder by clicking New > Create New Folder.
  3. Click Add, and then browse for and select the ZIP file that you are uploading. You can use the Shift button to select multiple files.
  4. Click Upload.
    Once the ZIP file has been uploaded, the file's contents are extracted into the Workspace folder and a special folder icon screen_HTML5_folderappears indicating that the folder is a Workspace.
    If you defined custom interactions in a JS file, the interactions are loaded into Sizmek and you can edit these interactions through the Custom Interactions interface. For more information, see Defining Custom Interactions.
    Once your Workspace has been uploaded, you can add, replace, and preview your assets.

You can download a Workspace/asset you previously uploaded to the Sizmek MDX platform, save it locally and then make changes to it. After making the required changes, you can re-upload the Workspace to override the existing one.

You can also download a Workspace when working on a specific HTML5 ad from the Ads page.

Note: The Download option is only available for assets or Workspaces, not for folders.

Procedure
  1. Go to Manage > Creative Assets.
  2. In the Creative Assets page, while in Asset view, select the Workspace or asset you want to download.
  3. From the main toolbar, click Download.
    The entire ZIP/asset is saved to your computer. The name of the ZIP is the same name as the Workspace asset in the Sizmek MDX platform.
    If you have assets or sub-folders in a Workspace that you need in another Workspace, you can copy them with the Move feature. This will copy the assets to your new Workspace, so the originals will still be in the source Workspace.

To quickly locate HTML workspaces, use the Filters in the Creative Assets library. This allows you to filter through all your creative asset folders and assets, and search for only HTML Workspaces.

Procedure
  1. From the main menu, select Manage > Creative Assets.
  2. In the Filters area, from the Filter By drop-down list, select Resource Type.
  3. From the drop-down list, select the HTML5 Workspace checkbox as follows:

    screen_filter_HTML5_wkspace

  4. Click Go.
To copy assets between Workspaces:
  1. In Creative Assets, go to the Workspace with the assets or sub-folders you want to copy.
  2. Select the assets or sub-folders you want to copy.
  3. Click Move.
  4. In the Move To Folder window, select the Workspace to which you want to copy the assets.
  5. Click Select.

If you need to replace an entire Workspace, you can do so by uploading a new one that replaces the existing Workspace.

To replace a Workspace:
  1. In Creative Assets, select your Workspace.
  2. Click the Edit icon.
  3. Next to the New Workspace field, click Replace.
  4. Browse for, and select the file you want to replace the asset with.
  5. Click Save.

Note: If you need to replace only a few files in your Workspace, we recommend you use the replace option rather than upload an entire Workspace again. This allows you to edit the files locally, and then replace them on the Sizmek MDX platform by uploading the newer versions.

To replace a file in your Workspace:
  1. In the Workspace, double-click the file you want to replace.
  2. Next to the File Name field, click Replace. This opens a local file browser window.
  3. Browse for and select the file you want to replace the asset with.
  4. Click Save.
Was this article helpful?
2 out of 8 found this helpful
Have more questions? Submit a request

Comments