HTML5 format allows you to use interactive content or link to multiple pages in your creative. The latter is often used in Private message ads. Please note, that we can track nubmer of clicks only for all links as a whole.
If you need to get your clicks tracked one by one, we recommend you tu use an URL shortener, like goo.gl or bit.ly.
To make sure, that HTML5 creatives will display correctly and everything will be fully functional, they have to be created according to this specification:
Each creative has fixed dimensions, in case of Private message ad, width is 730px and height anything bellow 3000px.
<![CDATA[
<head>
<meta name="ad.size" content="width=730,height=1000">
<style>
html,body{width: 300px; height: 1000px;}
</style>
.
.
.
</head>
]]>
There is a script definig each link's URL located in the page header.
<![CDATA[
<head>
<script>
var clickTag1 = "Link 1 URL";
var clickTag2 = "Link 2 URL";
var clickTag3 = "Link 3 URL";
.
.
.
</script>
.
.
.
</head>
]]>
clickTag variables may remain empty (var clicTag = "";) - in that case, value (URL) will be assigned to them when campaign is launched, but they always have to be present in creative's header:
<![CDATA[
<head>
<script>
var clickTag1 = "";
var clickTag2 = "";
</script>
.
.
.
</head>
]]>
There can be multiple hyperlinks in a creative body, but each of them has to have it's href parameter assigned by javascript window.open function and clickTag variable. Please, don't use href parameter - such links will not work with Firefox browser.:
<![CDATA[
<a onclick="javascript:window.open(window.clickTag1)">
Link 1 body
</a>
<a onclick="javascript:window.open(window.clickTag2)">
Link 2 body
</a>
<a onclick="javascript:window.open(window.clickTag3)">
Link 3 body
</a>
.
.
.
]]>
Example of a correctly prepared HTML5 creative
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="ad.size" content="width=730,height=1000">
<title>BUPI sa stará aj o mamičky</title>
<script>
var clickTag1 = "https://goo.gl/RWRrPD";
var clickTag2 = "https://goo.gl/qJQmPv";
var clickTag3 = "https://goo.gl/FDBZnt";
var clickTag4 = "https://goo.gl/Z43teG";
</script>
<style>
html,body{width: 300px; height: 1000px;}
</style>
</head>
<body bgcolor="#fef4fa">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#fef4fa">
<tbody>
<tr>
<td bgcolor="#fef4fa" colspan="4">
<img src="https://melior.cz/svoboda/bupi/top.jpg" width="730" height="639"
style="display: block;"/>
</td>
</tr>
<tr>
<td bgcolor="#fef4fa">
<a onclick="javascript:window.open(window.clickTag1)">
<img src="https://melior.cz/svoboda/bupi/citaj_skusenosti.jpg" width="229"
height="206" alt="Čítaj skúsenosti mamičiek s výrobkami Bupi mami"
style="display: block;"/>
</a>
</td>
<td bgcolor="#fef4fa">
<a onclick="javascript:window.open(window.clickTag2)">
<img src="https://melior.cz/svoboda/bupi/zisti_viac.jpg" width="154" height="206"
alt="Zisti viac o Bupi mami výrobkoch" style="display: block;"/>
</a>
</td>
<td bgcolor="#fef4fa">
<a onclick="javascript:window.open(window.clickTag3)">
<img src="https://melior.cz/svoboda/bupi/hodnotne_oleje.jpg" width="178"
height="206" alt="Hodnotné oleje v receptúrach a ich účinky na pokožku"
style="display: block;"/>
</a>
</td>
<td bgcolor="#fef4fa">
<a onclicks="javascript:window.open(window.clickTag4)">
<img src="https://melior.cz/svoboda/bupi/facebook.jpg" width="169" height="206"
alt="Vektorový inteligentní objekt" style="display: block;"/>
</a>
</td>
</tr>
<tr>
<td bgcolor="#fef4fa" colspan="4">
<img src="https://melior.cz/svoboda/bupi/bottom.jpg" width="730" height="56"
style="display: block;"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
]]>
When making creatives in Google Web Designer, make sure to follow these steps:
1. When creating a document, choose DoubleClick from Environment dropdown menu.
2. When creating links themself, choose Tap Area option:
3. Then choose Add event... -> Touch/Click -> Google Ad -> Exit ad -> gwd-ad -> and fill Metrics ID and URL itself.
4. Export creative (Publish -> Locally) and send us exported .zip file.
Newsletters from Mailchimp or other similar templates can be used in most cases, provided you fit into 3000px maximum creative height.
Though, in most cases, we can't track click-throughs in such creatives. That's because URLs are usually hard-coded.
If you want us to track click-throughts, it's necessary to define all URLs as clickTag variables to creative's header.
<![CDATA[
<head>
<script>
var clickTag1 = "Link 1 URL";
var clickTag2 = "Link 2 URL";
var clickTag3 = "Link 3 URL";
.
.
.
</script>
.
.
.
</head>
]]>
Afther that, you have to replace each href atribute by onclick and javascript window.open function. Please, don't use href parameter - such links will not work with Firefox browser.:
<![CDATA[
<a onclick="javascript:window.open(window.clickTag1)">
Telo prvého odkazu
</a>
<a onclick="javascript:window.open(window.clickTag2)">
Telo druhého odkazu
</a>
<a onclick="javascript:window.open(window.clickTag3)">
Telo tretieho odkazu
</a>
.
.
.
]]>
If you don't need us to track click-throughs, we can usually use "raw" creative directly from MailChimp as well.
Just make sure, that each link opens in a new window.
Easiest way to do this is to inset tag with target="_blank" atribute to creative's header. Of course, if you had attribute target="_self" added to each "a" tag in creative's body, this will not work.
<![CDATA[
<head>
<base target="_blank">
.
.
.
</head>
]]>
