How to add HTML5 banner ads to WordPress

This tutorial describes how to implement HTML5 ads into your site using the free version of Advanced Ads.

Table of Contents

Basic structure of HTML5 banner ads

HTML5 banner 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 have two options. You can 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.

Method 1: Copying the HTML5 ad 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.

Open the .html file you received for the ad.
Create a new ad in Advanced Ads and put the code that is located between the <head> tags from the .html file there. Remove <title> and any <meta> though.

HTML5 ad header code — Copy the code between the <head> tags into a new ad unit

Publish this ad in a head placement in Advanced Ads > Placements.
Create another ad and put everything located between the <body> tags from the .html file there.
Publish this ad wherever you want it to show up.

HTML5 ad body code — Copy the code between the <body> tags into another ad unit

Upload all referenced files from the HTML5 ad bundle to your site’s directory and adjust the paths in the head and body ad.
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 conflict with a function with the same name.

Method 2: Using iframes for HTML5 ads

Upload the folder with the HTML5 ad details to your site using FTP. You could create a new directory like html5 for all HTML5 banner in wp-content/uploads so that they are located in wp-content/uploads/html5/my-ad/
Create a new ad of the Plain Text and Code ad type and include the following code:

<iframe src="http(s)://yourdomain.com/wp-content/uploads/html5/my-ad/ad.html" width="300" height="250"></iframe>

Adjust the path http(s)://yourdomain.com/wp-content/uploads/html5/my-ad/ad.html to your actual path. Especially the name of the .html file might be different.
Adjust all paths to files within the .html file to use the correct path.
Adjust the values for the width and height parameters in the iframe code above to match your ad’s size.
Publish this ad wherever you want it to show up.

Example of an HTML5 ad code — Example for an HTML5 ad embedded via iframe

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.

HTML5 ads on AMP pages

HTML ads with iframes do not appear on AMP pages.

For such cases, AMP offers customized HTML tags, for example, the amp-iframe.

There are two requirements for amp-iframes:

need do be at least 600px or 75% of the first viewport away from the top (except for iframes that use a placeholder)
can only request resources via HTTPS and must not be in the same origin as the container unless they do not specify allow-same-origin

To display an HTML5 ad on your AMP page, create a new ad and copy the following code into it. Don’t forget to adjust the URL so that it points to your HTML5 ad.

<amp-iframe
sandbox="allow-scripts allow-same-origin" src="http(s)://yourdomain.com/wp-content/uploads/html5/my-ad/ad.html" width="300" height="250"></amp-iframe>Code language: HTML, XML (xml)

In some cases, errors occurred with this integration. The problems could be solved more often by masking and redirecting the link to the HTML file in the code above with a service like Tinyurl.

<amp-iframe
sandbox="allow-scripts allow-same-origin" src="https://tinyurl.com/b3test9k" width="300" height="250"></amp-iframe>Code language: HTML, XML (xml)

Additional notices

Keep in mind this ad will only show on AMP sites since the tag amp-iframe is no common HTML tag.

If you want to display your HTML5 ad on both regular and AMP pages, we recommend creating a separate ad for each version and targeting each with the AMP Display Condition for that display type.

You could then add these ads to an ad group, ensuring that Advanced Ads displays the correct HTML5 ad on the same placement on both AMP and regular pages.

What else you might need to know about HTML5 ads

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

If your iframe has unwanted borders or scrollbars, you can add the attribute frameborder="0" to your iframe-tag or its CSS class.