This tutorial describes how to implement an ad written in HTML5 into your site using the free version of Advanced Ads.

Basic structure

HTML5 ads are like small web projects on their own, including a couple of files.

When you receive a bundle of these files, you also have an HTML file included. You can either use that file as a template and copy the ad specific codes into a head and body ad, or you implement the .html file within a new iframe. I am going to explain both methods below.

1. Copy from the .html file

This method works best for users who are experienced with HTML and general template logic. Choose the second method if you are less experienced.

  1. Open the .html file you received for the ad
  2. Create a new ad in Advanced Ads and put everything that is located between the <head> tags from the .html file there. Remove <title> and any <meta> though.
  3. Publish this ad in a head placement in Advanced Ads > Placements.
  4. Create another ad and put everything that is located between the <body> tags from the .html file there.
  5. Publish this ad wherever you want it to show up.
  6. Upload all referenced files from the HTML5 ad bundle to a directory of your site and adjust the paths in the head and body ad.
  7. The ad should show up correctly now.

Additional notices:

When your <body> tag includes a call to a function like <body onload=”init();”>, you might need to call this function manually since you are not copying the body tag. Just add a line like this into the body ad:

<script>jQuery( document ).ready( function(){ init(); })</script>

You should also make sure to rename the init() function in this call and the head ad to something more specific or it might conflict with a function that has the same name.

2. Using an iframe

  1. Upload the folder with the HTML5 ad details to your site using FTP. You could create a new directory like html5 for all HTML5 ads in wp-content/uploads so that they are located in wp-content/uploads/html5/my-ad/
  2. Create a new ad of the Plain Text and Code ad type and include the following code: <iframe src=”/wp-content/uploads/html5/my-ad/ad.html” width=”300″ height=”250″></iframe>
  3. Adjust the path/wp-content/uploads/html5/my-ad/ad.html to your actual path. Especially the name of the .html file might be different.
  4. Adjust all paths to files within the .html file to use the correct path.
  5. Adjust the values for the width and height parameters in the iframe code above to match the size of your ad.
  6. Publish this ad wherever you want it to show up.

Responsive iframes

If your HTML5 ad is responsive, you need to implement your iframe code like this:

<div class="html5-container"> 
<iframe class="html5-content" src="https://www.mayenerleben.de/area51/mylive/testanzeige/index.html" width="100%" height="100%"></iframe>
</div>
<style>
.html5-container {
background-color: red;
width: 100%;
padding-top: 83.33%; /* 300:250 Aspect Ratio */
position: relative;
}

.html5-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>

You might need to adjust the padding-top value and classes if you have ads with different ratios.

What else you might need to know

If the ad is covering other elements: Enter the size and enable the Reserve this space checkbox in the Size options on the ad edit page.