How to add HTML5 banner ads in WordPress

Posted on Posted in Ads
How to add HTML5 banner ads in WordPress

The most common ads used on WordPress websites are static image ads which have a limited appeal to web visitors. This is since web users are used to encountering such ads on almost all websites that they visit every day, whether it is a blog, a social media page, or any other online asset.

Here, dynamic ads perform better than static image ads as they provide a fresh perspective to the advertised product. Dynamic ads, also known as HTML5 ads or dynamic content ads, provide users with more interactive content in ads, which results in better ad CTR.

What is an HTML5 ad?

HTML5 display banner ads or commonly known as ‘Rich Media’ ads, are defined by Google as,

“Rich media is a digital advertising term for an ad that includes advanced features like video, audio, or other elements that encourage viewers to interact and engage with the content.”

These typically are banner ads that help your ads stand out from the crowd with engaging and interactive content beyond the static graphics that seldom convert. A recent survey by Markinblog estimates that “54% of consumers want to see more video content from a brand or business they support”.

HTML5 banner ads are like web pages embedded on a webpage, as we can use scripting languages like JavaScript and CSS to create dynamic content. All of this can be done without the need for any third-party software like Adobe Flash Player.

Structure of HTML Ad 

HTML banner ads are small stand-alone web pages. Hence they contain a couple of HTML files.

These files have the .html file and other files that can be used to implement interactive banners on your WordPress website. 

The basic structure of the .html file consists of a ‘head’ tag and a ‘body’ tag and has the following form.

<!DOCTYPE html>

<html>

<head>

   <title>This is Page Title</title>

</head>

<body>

<h1>This is Main Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

We can use this file as a template and copy the ad codes into the head and body code area. Or else we can implement the .html file within a new iframe.

While it is a simple process to implement these different techniques using the WP AdCenter plugin, let us explore including these files.

Method 1: Inserting the HTML5 ad from the .html file using WP AdCenter

This is a method where you will need to locate the head and body tag within the .html file provided and use it to create an ad in the WP AdCenter plugin. This method is best implemented if you are experienced with HTML and general template logic.

  1. Download and access the .html file you have created/received for the banner ad.
  2. Open the .html file in a text editor like notepad, and locate the <head> and <body> code. You can ignore <title> and any <meta> description provided. 
  3. Login to your WordPress dashboard and click on WP AdCenter>>Settings>>Script Adder
  4. Insert the <head> code from the HTML file appropriately. Save it once done.
  5. Now create an ad in the WP AdCenter interface and insert the rest of the ad code pointing towards the <body> tag previously inserted.
  6. Upload all the files from the HTML5 ad bundle to your site’s directory and adjust the head and body ad paths.
  7. Publish the ad and place it on any of your web pages.

If your <body> tag includes a function call like init(), you will have to call this function manually.

Method 2: Working with iframes for HTML5 ads using WP AdCenter

This is a relatively straightforward method; you only need access to your website’s root directory, which uses FTP client software. 

  1. Upload the folder with your HTM5 banner ad files to your website using FTP software. 
  2. You can use the same directory path stated in FTP or create a new directory for your HTML5 banners. Once done, you can place the directory in wp-content/uploads so that they get uploaded in wp-content/uploads/html5/my-ad/ path.
  3. 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″>.

  1. Modify the path “https://yourdomain.com/wp-content/uploads/html5/my-ad/ad.html” to your actual path to include the name and parameters of your file.
  2. Adjust the values for the width and height parameters in the iframe code.
  3. Publish the ad and place it on any of your web pages.

Method 3: Inserting HTML5 ads on AMP pages using WP AdCenter

Since HTML5 ads do not appear on AMP pages, we need to modify the ad code to insert ads on the AMP pages.

There are two basic requirements to insert an HTML5 ad on an AMP page:

  • It needs to be at least 600px or 75% of the first viewport away from the top.
  • It can only request resources via HTTPS and should not be in the exact 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.

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>

The rest of the steps will be similar to adding ads with iFrames, as mentioned in the previous method.

HTML5 Banner Ad Sidebar Widget

Once the ad has been created and deployed, it is fairly easy to insert an HTML ad in the sidebar using a widget.

Follow the steps mentioned below to add an HTML5 ad to your sidebar:

  1. Create ad successfully using the WP AdCenter plugin
  2. Click on ‘Appearence>>Widget’ in your WordPress dashboard
  3. Under the Sidebar Tab, click on the ‘+’ icon to add a new widget
  4. Select the ‘WPAdCenter Widget’
  5. Click on update.

Final Thoughts

We are optimistic that showing dynamic, rich, and interactive ads using the combination of HTML5 ads and the WP AdCenter plugin will work wonders for your ad CTR. By following the article, and you should be able to implement and use HTML5 ads easily.

Let us know your thoughts in the comments section below.