An HTML5/Rich media ad item is an IAB-compatible HTML5 ZIP archive. The archive contains an HTML file and any scripts or media that are used to display the ad. What does that even mean? Let's break it down into two parts.

HTML5

HTML is short for HyperText Markup Language, it is the standard language used by your browser to render webpages on the internet.  HTML5 is the newest version of this standard language, bringing increased functionality and better compatibility.

Rich Media

Rich media is described by Google as any digital advertising that goes beyond simple text and images, including advanced features like video, audio, animations, and interactive features. Rich media ads do a better job of capturing the attention of users.

Read More: Digital Advertising Glossary

How to Build an HTML5/Rich Media Ad Item

  1. Navigate to the relevant advertiser and campaign.
  2. Click Add Ad Item, the ad item type window will appear.
  3. Select HTML5 (Rich Media), the new ad item page will appear.
  4. Enter a name for the ad.
  5. Under Destination URL, enter the URL to which the viewer will be taken when they click on the ad.
    • You can leave this field blank if you do not want a click-through or if the ad item provides its own click-through.
    • If you do enter a URL, you can test it by clicking Open Destination URL to the right of the field.
  6. Upload the HTML5 ZIP file.
  7. Under Size, choose a preset or enter a dimension of the ad item.
    • You can choose the Dynamic size setting if you want the ad item to adjust to the dimensions dictated in the HTML file. However, you can assign an ad item with a dynamic size only to a zone that's also set to have a dynamic size.
  8. Add metadata (optional). 
  9. Click on the plus icon next to weighting and edit the Static Weight (optional).
  10. Click Save Ad Item. 

Tips for Building an HTML5/Rich Media Archive

Include Click Tracking Macros

If you want Indie Ads Manager to track clicks for the ad item, you will have to insert the applicable click-tracking macros into the HTML.

Check the File Name

Use only alphanumeric characters when naming the ZIP file.

Check the Dimensions

If you have multiple sizes of the same ad item, be sure to upload the correct one or match its dimensions in the Size field when creating the ad item.

Implementing Click Tracking in HTML5/Rich Media Ads

Indie Ads Manager uses a variety of macros to track clicks on HTML5/Rich media ads. When Indie Ads Manager serves an HTML5 ad, any macros present in index.html will be replaced with the corresponding value. In this case, [TRACKING_LINK] will be replaced with the tracking link.

HTML5 Supported Macros

  • [TRACKING_LINK] - Unescaped click tracking macro.
  • [TRACKING_LINK_ENCODED] - Escaped click tracking macro.
  • [RND] - A random number generator.
  • [TIMESTAMP] - The current timestamp.

Click Macro Implementation

JavaScript Method

The most common method of implementing click tracking in an HTML5 ad is inserting the click macro script into the index HTML file of your ad.

  1. In the head of the HTML file, add:
    <script>window.clickTag = '[TRACKING_LINK]';</script>
  2. In the click handler function of your ad, ensure that window.clickTag is used as the redirect URL:
    window.open(window.clickTag, '_blank');

Basic Link Method

This is a less common method to track clicks on HTML5 ads. This method can be used only if JavaScript is not being used for click redirection.

Here is a simple example:

<a href="[TRACKING_LINK]" target="_blank">Your Existing Ad Code Here</a>

You must place <a href="[TRACKING_LINK]" target="_blank"> just after the <body> tag, and

</a> just before the </body> tag.

Note: if you are using a third party application to create the ad, you can also implement click tracking by adding a click event or clickable region in the ad. Then, instead of using the ad team's destination URL as the target for the click, insert one of our click tracking macros. When you export the ad, the macro must be in index.html.