HTML5 Polite Banner Specs HTML5 allows you to create ads for desktop, mobile and in-app devices. MediaMind’s HTML5 solution supports multimedia and extended application development without the need for third-party plug-ins, such as Flash. You can start creating a HTML5 ad from a MediaMind template or write the code yourself using the MediaMind API for tracking outlined in this document. IMPORTANT: You must ensure your publisher is certified before creating HTML5 ads and campaigns. Please contact your Creative Account Manager for more information.

Ad Components Ø HTML file – Contains the whole ad experience Ø Javascript – Controls the ad behaviour, playback and functionality Ø CSS – Defines the styles and animations Ø Assets folder – Contains any images and video assets Ø MediaMind Tracking Code – Tracks user interactions with your ad

Ad Specifications Ø Default Image (max file size 40kb) – the ad’s dimensions are determined according to the size of the default image Ø Workspace folder (max file size 10mb) – contains all the ad components

Creating a HTML5 ad To create a HTML5 ad, you must use an application that supports authoring of HTML, such as Adobe Dreamweaver or any text editor. Write the code for the ad, compress all your ad files to a ZIP, and then upload your ad to the MediaMind platform. Once you upload your ad, the MediaMind platform will

 

 

 DG MediaMind | 1

scan your files for all custom interactions and then added to the MediaMind platform.

Implementing the MediaMind API 1. To use the API the following code must be added to the HTML header:

2. Then to initialize the API add the following code: function onInit() { // show the creative and start the flow } if (!EB.isInitialized()) { EB.addEventListener(EBG.EventName.EB_INITIALIZED, onInit); } else { onInit(); }

Click Tracking Clickthrough interactions measure events that click through to another URL defined in the MediaMind platform. // General click interaction EB.clickthrough(); // Custom click interaction EB.clickthrough("myClickInteraction");

User action counter measure user action events, such as clicking on a button, playing with an ad part, etc. // Tracks a user action custom interaction EB.userActionCounter("myUserActionInteraction");

Uploading to MediaMind To upload your HTML5 ad to the MediaMind platform, you upload a ZIP file to create a workspace rather than uploading separate asset files as with other MediaMind formats.

 

 

 DG MediaMind | 2

A workspace is a folder that contains all of the assets that are used by the ad. It includes all of your ad's files. 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 MediaMind platform, the ZIP's files will automatically be extracted, creating a workspace on the MediaMind platform. Step-by-step: 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. Create a new asset by clicking New > Upload Creative Asset. 4. Click Add, and then browse for and select the ZIP file that you are uploading. You can use the Shift key to select multiple files. 5. Click Upload. 6. 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:

Creating the Ad The HTML5 Polite banner format is similar to the Polite Banner but instead of selecting an swf file, you select a workspace (created when you upload a ZIP to MediaMind). Step-by-step: 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 HTML5 Polite Banner.

 

 

 DG MediaMind | 3

5. Expand the Creative section. 6. In the HTML5 Polite Banner area, in the Workspace Folder area, add a workspace to your ad. Once a workspace is selected, you will be able to see and preview all of the assets and files in the Ad Assets List area. 7. In the Default Image area, click Select, then search for the default image for your ad. By default, the workspace you previously selected opens up automatically. 8. In the Clickthrough URL field, enter the ad clickthrough URL. 9. Click Save to save your ad.

Assign to Campaign Once you have created your HTML5 ad, you can now assign it to a campaign and placements. This allows you to decide when and where your ad will run and will apply all targeting and delivery group settings to the ad. NOTE: HTML5 ads can be attached to any In-Banner placements with the same banner dimensions. 1. From the main menu, go to Mange > Ads. 2. From the list of ads select the ad you are assigning and select Assign > Assign to Media Agency/Campaign. 3. 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. 4. From the Campaign Name drop-down list, select the name of the campaign you are assigning your ad to. 5. When you are done, click Assign. Or If you want to move on to the attachment step, click Assign & Attach.

 

 

 DG MediaMind | 4

Attaching the Ad Step-by-step: 1. From the main menu, select Manage > Campaigns. 2. From the list of campaigns, select the campaign you have assigned your ads too and select Edit > Ads > Attachment 3. To attach an ad to a placement, select the desired ad from the available master ads on the left side. From the list of placements on the right, select the placements to which you want to attach this ad, and click Attach. Once you have attached your master ad, an ad copy is created for each placement selected and attached to it.

Publishing the Ad Once the ad is attached to placements and approved, to give publisher access to generate code package and serve it live. Right click on the ad and select Review Process > Publish

Additional Help: HTML5 Polite Banner template HTML5 Polite Banner with Video template HTML5 API Documentation

Contact Us: If you have any questions or issues, please feel free to contact your Creative Account Manager or [email protected]

 

 

 DG MediaMind | 5