HTML5 banners – Google Doubleclick – DCM

I am working on a banner project and just learning about this stuff. I did not create the banners, but I prepared them to be uploaded to DCM.

Here’s a tool to validate them – https://h5validator.appspot.com/dcm.

That is specifically for HTML5 banners.

There were a few issues starting out. First, the HTML files would not render running locally. This was not an issue when they were hosted on a server, or even a simple file server like Amazon’s S3. When run locally, there was a security issue with the JS that was creating the sprites. The banners were created using Adobe Animate, and the default setting is to use sprites to handle all the images. By turning this feature off, the files ran fine locally in most browsers. This was really just an issue for approval purposes. The client was not able to view them locally, so it was perceived as something was broken. The make that process smoother, I got rid of the sprites.

By removing the sprite functionality, it left behind the actual sprite image, which caused in issue when uploading to DCM, as it found a file that was not being used in the banner, and it didn’t like that. So, I went back and cleaned up the zip files, removing any unused files, which included files like thumbs.db, .DS_Store, etc.

the bigger problem was that the HTML had no clickTag functionality. It didn’t have any links to click on, and DCM requires the  use of a JS var (clickTag) to dynamically create the URL, which it later swaps out for the real URL.

I wrapped the <canvas> tag with an <a> tag like so:

<a href="#" onclick="window.open(window.clickTag);">
  <canvas id="canvas" width="160" height="600"></canvas>
</a>

I added the clickTag variable:

var clickTag = "https://www.google.com";

I was a little unsure about the wrapping a <canvas> tag with an <a>, but it worked in all modern browsers, and it validated using the validator.

 

It's only fair to share...Tweet about this on TwitterShare on FacebookEmail this to someoneShare on Google+
This entry was posted in HTML5 Banner Ads and tagged , , . Bookmark the permalink.