With HTML5 in Sizmek you have multiple ways to create your HTML5 ad.
Below instructions are the first steps and use cases you need to be aware of before you start building your ad.

Please see our HTML5 portal for more information, tools, Flash to HTML5 converters and recourses here

  • HTML5 filesize

    Sizmek will calculate file size as all assets in the ad at the compressed size.

    Suggestions on how to optimize the weight and performance of the banners can be found here

    Please click here for more information about Sizmek HTML5 filesize.

  • Build your ads in HTML5

    An HTML5 ad must always contain at least the two following codes.

    1. Include the Sizmek “EBLoader” within the <head> section of the html file:

    <script src="https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js" type="text/javascript"></script>


    2. Make sure you use the Sizmek clicktag for HTML5:

     EB.clickthrough();


    3. Make sure all calls to external scripts are using the secured protocol (https). (E.G. to an external library)

    4. Most publishers prefer the mouse cursor to be a ‘pointer’ (hand symbol). You can add this to the element which contains the Sizmek clicktag. For example:
     <div id=”container” style=”cursor:pointer” onclick=”EB.clickthrough()”>

    5. If you need multiple clicks or interactions then you can make sure these will be measured correctly in Sizmek by adding a custom interaction. You can use the following code for setting up the custom interactions

    For multiple click buttons:

     EB.clickthrough('Custom Interaction Name');

    For interactions:

    EB.userActionCounter('Custom Interaction Name');

    Please be aware that you have to use ‘single quotes’.

     

  • Build your ads within the Sizmek HTML5 Ad Builder

    The Sizmek Ad Builder for HTML5 authoring tool enables you to build HTML5 ads directly in the Sizmek MDX platform.

    The interface is easy to use and does not require any knowledge of HTML code. After you finish building your ad, you can test, preview, and upload your ads to one location in the platform.

    Click here to start (Login required)

  • Sizmek HTML5 shared libraries

    For creatives its important to keep the ad size as low as possible. Also you would like to ensure that all common libraries of your ad are hosted and served from a shared location, increasing the chances to be cached on user browsers, so that publishers do not include them in ad size calculations.

    The most common libraries are therefore available from the Sizmek server. Please make sure you always use the secured URL’s of the library you need.

    Click here to see all available libraries(Login required)

  • Build your ads within Adobe Edge

    When you are creating your ads in Adobe Edge, you have to make sure the Sizmek EBLoader and Sizmek clicktag is implemented.

    1. Include the Sizmek “EBLoader” within the HEAD section of the html file:

    <script src="https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js" type="text/javascript"></script>

    2. The Sizmek clicktag needs to be implemented within a button action on a button / hotspot created in Adobe Edge.

     EB.clickthrough();

    3. Before creating your ad in Sizmek make sure you remove the AN file.

    4. When creating your ads in Adobe Edge, please make sure you include the EBLoader (see above #1) below the Adobe Edge initializations
    Example: 1

  • Build your ads with any other authoring tool

    When you are creating your ads in an authoring tool, you have to make sure the Sizmek EBLoader and Sizmek clicktag is implemented.

    1. Include the Sizmek “EBLoader” within the <head> section of the html file:

    <script src="https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js" type="text/javascript"></script>

    2. The Sizmek clicktag needs to be implemented within a button action on a button / hotspot.

     EB.clickthrough();

     

  • Build HTML5 ads with video

    It is possible to measure the Video progression in your HTML5 ad by applying the following codes to your ad:

    1. Make sure you add the following code within the HEAD of your HTML file:
    <script> EBModulesToLoad = [‘Video’]; </script>


    2. Use the following code to approach the video object
    var player = document.getElementById(“videoObject”);


    3. Activate the tracker module in Javascript and add the video object.
    var videoTrackingModule = new EBG.VideoModule(player);

     

  • Convert your Flash file using Swiffy

    It is possible to convert your Flash ads to HTML5 using Swiffy.

    1. Within Swiffy export the ad to HTML5 by clicking Commands > Export as HTML5(Swiffy)

    2. Within the HTML file, make sure you include the Sizmek “EBLoader” in the HEAD section

    3. Add the Sizmek clicktag to the body or a container div

    Example: clicktag on body

    
    

     

  • Upload & assign your ads

    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 Sizmek platform, the ZIP’s files will automatically be extracted, creating a “Workspace” on the Sizmek platform.

    First upload your Workspace:

    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.

    1.Create a new asset by clicking New > Upload Creative Asset.
    2.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.

    Now you need to create an ad in the platform. Before creating an ad from your workspace you need to determine what ad format to use for your workspace.

    The most common ad format is the standard banner. However if your ad makes use of interactions, video, extra clicktags or if the largest asset of your ad is larger than 200kb, then your ad needs to be uploaded as an HTML5 polite ad.

    1.From the main menu, select Manage > Ads.
    2.On the toolbar, click New > Create New Ad.
    3.In the Ad Name field, enter a unique name for your ad.
    4.From the Ad Format drop-down list, select the HTML5 ad format.
    5.Expand the Creative section.
    6.In the HTML5 Banner area, in the Workspace Folder area, add the Workspace you just uploaded
    7.In the Default Image area, click Select, then search for the default image for your ad.

    Once you selected both your workspace and default image you can save your ad.

    To assign your ad:

    From the main menu, go to Manage > Ads.

    From the list of ads select the ad you are assigning and select Assign > Assign to Media Agency/Campaign.
    In the Assign Ads screen, from the Media Agency drop-down list, select the name of the media agency you are assigning your ad to.
    Once you select a media agency, all campaigns that are defined for the selected agency are displayed in the Campaign drop-down list.

    From the Campaign Name drop-down list, select the name of the campaign you are assigning your ad to.
    When you are done, click Assign.