HTML5 Banners as a Media Type

by Zack Cilia

Last updated: 14-Sep-2026

HTML5 banners are interactive banners built using HTML, CSS, JavaScript, and image files. Unlike traditional image banners such as JPG, PNG, or GIF files, HTML5 banners can contain animations, interactive elements, and other dynamic content.
What Is an HTML5 Banner?
An HTML5 banner is essentially a small HTML webpage containing all the files required to display the banner. These can include:

• HTML files
• CSS files
• JavaScript files
• Images and other media assets

For example, tools such as Adobe Edge Animate can export a banner as HTML5, creating a folder containing the main HTML file and all associated assets.
The main HTML file normally references these assets using relative paths, rather than complete URLs. Because of this, HTML5 banners cannot be loaded in MyAffiliates in the same way as standard media using %FETCH%%.
Instead, HTML5 banners are displayed inside an iframe.

How Are HTML5 Banners Displayed in MyAffiliates?
When an HTML5 banner is configured in MyAffiliates, it is displayed inside an iframe using the banner's configured width and height.
MyAffiliates also passes the banner's destination URL to the HTML5 banner using the ClickID parameter.
The HTML5 banner must then retrieve this parameter and use it as the click destination when the banner is clicked.

For example:

<iframe src="https://media.clientname.com/HTML5/Mobile-250_250/index.html?clickTag=http%3A%2F%2Frecord.clientname.com%2F_ieQz0IK_kMKUcyqUL4Bc9OczOJF5HN5O%2F1%2F"
width="250"
height="250"
frameborder="0"
scrolling="no">
</iframe>

In this example, the clickTag contains the MyAffiliates tracking URL that should be used when the banner is clicked.

Configuring HTML5 Banners in MyAffiliates

For an HTML5 banner to work correctly in MyAffiliates, the client must make a few modifications to the banner files.

1. Create a Directory for the Banner

Create a separate directory for each HTML5 banner.
Upload all files required by the banner into this directory, including:

• .html files
• .css files
• .js files
• Images
• Any other required assets

The files should maintain the directory structure expected by the main HTML file.

2. Add the MyAffiliates Media Assist Script
   At the top of the main index.html file, add the following JavaScript include:

   <script src="https://assets.myaffiliates.com/media-assist-v1.js">
   </script>

3. Replace the Static Click Destination
   The banner's original click destination will normally contain a fixed URL.
   This URL must be replaced with:

   getParameterByName('clickTag')

   This ensures that the banner uses the tracking URL supplied by MyAffiliates rather than a hard-coded destination.

Example: Adobe Edge
An Adobe Edge banner might originally contain:

​Symbol.bindElementAction(compId,symbolName,"__ct__","click",function(sym,e){
    window.open("http://www.google.com","_blank");
});

This should be changed to:

​Symbol.bindElementAction(compId,symbolName,"__ct__","click",function(sym,e){
    window.open(getParameterByName('clickTag'),"_blank");
});

Example: Custom Banner System
A banner generated by another system may contain a fixed URL such as:

var bannerJson = {
    "hash":"bc9qoaysh",
    "banner":{
        "properties":{
            "status":"publish",
            "name":"250x250- Adwordsv4",
            "width":250,
            "height":250,
            "loop":true,
            "imageQuality":95,
            "bannerUrl":"http://www.clientsite.com/sportsbook",
            "urlTarget":"_blank"
        }
    }
};

The fixed bannerUrl should instead use the clickTag:

var bannerJson = {
    "hash":"bc9qoaysh",
    "banner":{
        "properties":{
            "status":"publish",
            "name":"250x250- Adwordsv4",
            "width":250,
            "height":250,
            "loop":true,
            "imageQuality":95,
            "bannerUrl":getParameterByName('clickTag'),
            "urlTarget":"_blank"
        }
    }
};

The exact implementation may differ depending on how the banner was created.

Secure Sites (HTTPS)
HTML5 banners must also be able to load correctly when they are placed on secure HTTPS websites.
Some banner-generation tools may produce code that references external assets using http://. If an affiliate places the banner on an HTTPS website, the browser may block these resources or display a security warning.
Where supported, the client should change the protocol from:
http://
to:
//
This allows the browser to use the protocol of the page where the banner is displayed.
Example
Original:

<script type="text/javascript" charset="utf-8"
src="https://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js">
</script>

If the generated code specifically uses http://, it can be changed from:

src="http://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"

to:

src="//animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"