HTML5 banners are a type of digital advertisement created using HTML5, CSS3, and JavaScript. They are a modern alternative to older, static image ads (like JPGs or PNGs) and animated GIF or Flash banners. They are versatile, interactive, and can be displayed on a wide range of devices, including desktops, tablets, and smartphones. They can be added using My Creative tool.
Awin ClickTag / ClickTracker
It’s important that you declare a clickTag or click tracker URL to a string in the part of the source code which is hosted in our interface. You then use this string to prefix the final landing page with.
In the source code hosted in the Awin interface, you can use:
var awinClickTracker = 'https://www.awin1.com/awclick.php?mid=1001&id=!!!affid!!!&gid=!!!gid!!!&linkid=!!!linkid!!!&clickref=!!!clickref!!!&p=';The awin clickTag should always be:
https://www.awin1.com/awclick.php?mid=XXXX&id=!!!affid!!!&gid=!!!gid!!!&linkid=!!!linkid!!!&clickref=!!!clickref!!!&p=where the value in mid=XXXX needs to be replaced with your merchant Id.
Example in the externally hosted JS file:
var searchUrl = awinClickTracker + 'https://www.advertiser-domain.com/result.php?utm_source=awin';
searchUrl += '&search=' + document.productSearch.product.value;
window.open(searchUrl, '\_blank');How to add the HTML5 creatives
There are two main methods to add HTML5 creatives.
Method 1: direct HTML embedding (no iframe)
This method is used when you paste the banner’s full HTML code. The ad is served directly on the partner’s page, so all external assets must be referenced with full, absolute URLs. The platform’s system will directly override the placeholders within the clickTag variable you define.
HTML code to paste
You will need to host your styles.css and script.js files, along with any images, on a public server or CDN. Then, you’ll copy and paste the following HTML snippet into Awin creative UI.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Banner</title>
<style>
body { margin: 0; padding: 0; }
#banner-container {
width: 300px;
height: 250px;
cursor: pointer;
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<div id="banner-container">
<a href="javascript:void(0);" onclick="window.open(clickTag, '_blank')">
<img src="https://my-cdn.com/my-banner-ad/images/ad.jpg" alt="advertisement" style="width:100%;height:100%;">
</a>
</div>
<script type="text/javascript">
// The affiliate platform will find and override this variable.
var clickTag = "https://www.awin1.com/awclick.php?mid=1001&id=!!!affid!!!&gid=!!!gid!!!&linkid=!!!linkid!!!&clickref=!!!clickref!!!&p=https://my-website.com";
</script>
<script src="https://my-cdn.com/my-banner-ad/script.js"></script>
</body>
</html>Note
If you use
<a href=""></a>tag, the clicktag will be automatically added. This only demonstrates the use of clicktag.
Method 2: iframe method
You host your entire banner package (including the index.html file) on an external server and pass the click-through URL as a URL parameter.
Step 1: the script in your banner
Your script.js file (which is also hosted externally) needs to be able to read the clickTag from the URL. The clickTag is not a variable you declare in your HTML; it’s a value passed to the iframe’s URL.
// Function to get a URL parameter by name
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
// Get the clickTag from the URL parameter.
var clickTag = getUrlParameter('clickTag');
// Add a click listener to the banner container
var banner = document.getElementById('banner-container');
banner.addEventListener('click', function() {
if (clickTag) {
window.open(clickTag, '_blank');
}
});Step 2: the HTML snippet for Awin
You’ll provide Awin with an iframe tag that points to your externally hosted index.html file. You will append the dynamic click-through URL as a GET parameter.
<iframe
src="https://my-cdn.com/my-banner-ad/index.html?clickTag=https%3A%2F%2Fwww.awin1.com%2Fawclick.php%3Fmid%3D1001%26id%3D!!!affid!!!%26gid%3D!!!gid!!!%26linkid%3D!!!linkid!!!%26clickref%3D!!!clickref!!!%26p%3D"
frameborder="0"
scrolling="no"
width="300"
height="250">
</iframe>The Awin platform processes this code and replaces the placeholders (!!!affid!!!)etc. in the iframe src. When the banner loads, the JavaScript inside it reads the clickTag value from its own URL and uses it to redirect the user upon a click.