Getting started with HTML5 adverts
With AdRotate you can create HTML5 adverts. These are often responsive and mobile friendly. Which is great in todays market. AdRotate Banner Manager and AdRotate Pro of-course can handle these adverts just fine.
Uploading files and assets
If you have AdRotate Banner Manager or AdRotate Pro you can upload the files from your dashboard in the "Manage Media" dashboard. 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.
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 banners folder in AdRotate.
Preparing the banner
HTML5 adverts often have several files; A HTML file, one or 2 Javascript files and often 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 a different 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.
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 %asset% 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="%asset%" height="250" frameborder="0" style="border:none;"></iframe>Change the value for the height to match your advert or it will show distorted.
