Coding up Html5 banners

Note: To implement this advanced feature, we advise that you fetch a developer to help set this up for you.

Using HTML5 is a great way to create beautiful, rich banners for your affiliates. Tapfiliate allows you to upload your custom HTML5 banners. In order for us to keep your banners nice and trackable, we have put in place a couple of rules that should be followed strictly when coding up banners for use with Tapfiliate.

Tapfiliate follows the IAB recommendations for HTML5 for Digital advertising as much as possible.

Click tags

In order for Tapfiliate to handle links correctly, your are required to use Click tag (conforming to the IAB recommendation).

Important: when formatting your Click tag block, please adhere to the following rules:

Each Click tag should get its own, individual line
Each Click tag var should be pressed by the var keyword; no multiple declarations
The url in the Click tag declaration should be conveyed in double quotes (“)
The assignment operator (=) should have 1 space on each side
The Click tag declaration should have a trailing semicolon (;)
There should be no additional whitespace beyond the trailing semicolon

This might seem like a lot of rules, however; it basically just boils down to a clean assignment line:

  var clickTag = "https://yoursite.com";

Single link banners

For banners that have a single link, a clickTag var is used.

<a id="click" target="_blank">home</a>

How you handle the final click is up to you, as long as the Click tag variable is used.

Multi-link banners

For banners that have multiple links, the Click tag variables are enumerated, starting at clickTag0:

var clickTag0 = "https://yoursite.com";
var clickTag1 = "https://yoursite.com/pricing/";

var clickTag2 = "https://yoursite.com/signup/";

<a id="click0" target="_blank"></a>Home
<a id="click1" target="_blank"></a>Pricing
<a id="click2" target="_blank"></a>Signup

Dimension Meta Tag

Optionally, you can add a meta tag stating the dimensions of the ad. Please use this exact format (conform IAB recommendation) when adding the meta tag:

<meta name="ad.size" content="width=300,height=250">

If this tag is omitted, the banner will be considered responsive, so its width and height will be set to 100%

Other important guidelines

Any assets, like images, non-inlined css and non-inlined javascript, should be hosted by you externally. Refer to them using an absolute URL.
At least the click tag script block should be “inlined” in the HTML. This means that the script block should be part of the HTML you input when creating the HTML5 Banner asset in Tapfiliate

Sample code

  <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <meta name="ad.size" content="width=300,height=250">
          <title>Banner</title>

          <script>
              var clickTag = "https://yoursite.com";
          </script>

      </head>
      <body>
          <div style="height: 250px; width:300px; background-color:#37d1b3; color: white; padding: 20px; text-decoration: underline">
              <a id="click" style="cursor: pointer;" target="_blank">Go!</a>
          </div>
      </body>
  </html>