How to insert code for HTML 5 ad

HTML5 ads or commonly known as Rich Media ads, are usually defined as 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. HTML5 ads are like small web projects on their own – small stand-alone web pages. When you receive a bundle of these files (usually compressed in a zip file) there should be an HTML file included. This is the main file that will display the ad when loaded in the browser. You can use Ad Inserter to insert codes to display HTML 5 ads but the process requires few additions steps as the code for such ad is not a single code that you put in the code window.

1. The first step is make sure all the files are located in a folder. If you received a zip file then you need to unzip it to some temporary folder – name it according to the ad. Once the files are there you can try to open the HTML file (for example ad.html) in the browser – you should see your ad.
2. The next step is to upload this folder to your WordPress website using FTP software. You can upload the ad folder to the wp-content/uploads or create a new subfolder for all HTML5 banners and upload the ad folder there – place this folder in wp-content/uploads so that the ads get uploaded, for example, to wp-content/uploads/html5/ad-1/ path.
3. The last step is to configure Ad Inserter block with the actual code that will load the HTML 5 ad. We’ll use iframe tag to embed HTML document (HTML 5 ad) into the page. Adjust the URL so that it points to your HTML5 ad:

<iframe src="http://yourwebsite.com/wp-content/uploads/html5/ad-1/ad.html" width="300" height="250" title="ad"></iframe>

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 to 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 use the following code (the AMP separator is needed to insert the code only on AMP pages):

[ADINSERTER AMP]
<amp-iframe sandbox="allow-scripts allow-same-origin" src="https://yourwebsite.com/wp-content/uploads/html5/ad-1/ad.html" width="300" height="250"></amp-iframe>