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. 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, 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
Create the HTML5 ad using JavaScript and CSS.
Add Click-throughs, custom Interactions using the HTML5 API.
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.
Place all your assets including the default image in a folder and compress to a zip.
In the platform, under Creative Assets, create a new Workspace by uploading the zip file.
Under the Ads section, create a new ad.
Build your ad in the Sizmek MDX platform.
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.
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?
Create a Workspace
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.
Upload 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
From the main menu, select Manage > Creative Assets.
Select the folder to where you want to upload your Workspace or create a new folder by clicking New > Create New Folder.
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.
Click Upload. Once the ZIP file has been uploaded, the file's contents are extracted into the Workspace folder and a special folder icon appears 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.
Download a Workspace
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
Go to Manage > Creative Assets.
In the Creative Assets page, while in Asset view, select the Workspace or asset you want to download.
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.
Search for a 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
From the main menu, select Manage > Creative Assets.
In the Filters area, from the Filter By drop-down list, select Resource Type.
From the drop-down list, select the HTML5 Workspace checkbox as follows:
Click Go.
Copy Assets between Workspaces
To copy assets between Workspaces:
In Creative Assets, go to the Workspace with the assets or sub-folders you want to copy.
Select the assets or sub-folders you want to copy.
Click Move.
In the Move To Folder window, select the Workspace to which you want to copy the assets.
Click Select.
Replace a Workspace
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:
In Creative Assets, select your Workspace.
Click the Edit icon.
Next to the New Workspace field, click Replace.
Browse for, and select the file you want to replace the asset with.
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:
In the Workspace, double-click the file you want to replace.
Next to the File Name field, click Replace. This opens a local file browser window.
Browse for and select the file you want to replace the asset with.
Comments