HTML5 adverts

Difficulty: Advanced | Updated: July 12, 2015

With AdRotate you can create HTML5 adverts. These are often responsive and mobile friendly. Which is great in todays market. HTML5 adverts often serve as a replacement for Flash adverts. AdRotate and AdRotate Pro of-course can handle these adverts just fine.

Uploading files and assets

If you have AdRotate Pro you can upload the files from your dashboard in the “Manage Media” dashboard.
If you have the free version of AdRotate you upload the files to the banners folder via your favourite (s)FTP client.

The files are then visible in the asset dropdown menu when creating your advert.
Here you select the primary HTML file. Which then loads the other assets.

adrotate-asset-manage

For the Adcode you can usually use the provided iframe example to get the advert working after selecting the html asset and uploading all relevant files.

You can store your assets anywhere of-course, this manual focuses on using the provided banners folder in AdRotate.

Preparing the banner

Your advertiser/adserver may advise you not to edit the files because it may disrupt tracking or break the advert completely. This is of-course a valid point, so make your edits with care!

HTML5 adverts often have several files; A HTML file, one or 2 Javascript files and sometimes one or more images. To make all this work together you have to make sure that all these files can be loaded properly, This sometimes involves editing the html file to use the correct path. This can be a bit tricky if you have no experience with HTML code but overall is not all that hard.

AdRotate by default stores it’s media files in //www.yoursite.com/wp-content/banners/. This means that if you use the Media manager you have to tell the advert to load the other assets from there. Most HTML5 adverts will be set up to load files from a directory with the same name as the advert campaign but this is not how AdRotate works. For convenience you may also want to change filenames.

For a small fee I can help you with these tweaks if you want. Contact me if you need help with this. Pricing information.

Duplicate assets

If you have multiple HTML5 banners from the same advertiser, chances are that they share a few files. For example the action file responsible for the animation. Or a generic javascript library.

If the advert uses files that are identical across all html5 banners you can change/edit your adverts to use that same single file. This also applies to images of-course. This saves space and keeps the Media Manager clean and usable in the long run.

There is no point in uploading the same file 5 times with different names if you can just share it between adverts.

Code Example

Keep in mind that the example is just that and is not guaranteed to work. This example is also available in your dashboard (Next to the adcode) to be used with one click.
The %image% tag refers to the file you selected in the dropdown menu for your advert. This can also be a full url to the file if you store the assets elsewhere.

<iframe src="%image%" height="250" frameborder="0" style="border:none;"></iframe>

Change the value for the height to match your advertor it will show distorted.