HTML5 Template Specifications (+zip Support) - Geras

Technical Specification for Preparing
HTML5 Creatives
Gemius S.A.
18 B Postepu Street
02-676 Warsaw, Poland
www.gemius.com
Phone: + 48 22 390 90 90
Fax:
+ 48 22 378 30 50
+ 48 22 874 41 01
contact@gemius.com
www.gemius.com
HTML5 creative
Example of HTML5 creative
<html>
<head>
</head>
<body>
<a id="creativelink" target="_blank">
<img src="data:image/png;base64,..." />
</a>
</body>
</html
Click tags
In order for the creative parameters for measuring clicks to be sent, the advertiser should include
the following JS function in the HTML5 creative just before </body>:
<script type="text/javascript">
var parsed =
(document.location.href.split('#')[1]||'').split('&');
var params = parsed.reduce(function (params, param) {
var param = param.split('=');
params[param[0]] =
decodeURIComponent(param.slice(1).join('='));
return params;
}, {});
</script>
The clickable place in a banner should be surrounded by <a> tags:

<img src="..." />
</a>
The ID of the element is important. If modified, it also needs to be changed in the succeeding
functions.
Use the clickTag parameter to set href on the creative. The ID of the element (here: creativelink)
should be the same as in the <a> tags surrounding the clickable place. This code should be placed
after the JS function mentioned above but before </body>:
// change link href
document.getElementById('creativelink').href = params.clickTag;
Gemius S.A.
18 B Postepu Street
Phone: + 48 22 390 90 90
+ 48 22 378 30 50
Fax:
+ 48 22 874 41 01
contact@gemius.com
www.gemius.com
Example after applying all of the above:

<html>
<head>
</head>
<body>
</a>
var parsed =
params[param[0]] =
return params;
}, {});
// change link href
document.getElementById('creativelink').href =
params.clickTag;
</script>
</body>
</html>
IMPORTANT: This fragment depends on url fragment identifier. It means that your creative must
not depend on this property, at least not on document load.
Gemius S.A.
18 B Postepu Street
Phone: + 48 22 390 90 90
+ 48 22 378 30 50
Fax:
+ 48 22 874 41 01
contact@gemius.com
www.gemius.com
Multiple clicktags
In order to measure multiple clickTags you need to surround each clickable element with <a> tags,
as described above, and add appropriate JS functions remembering that the IDs should be the
same in the JS functions and <a> elements.
document.getElementById('creativelink1').href = params.clickTag1;
document.getElementById('creativelink2').href = params.clickTag2;
Interactions
With the following interaction definition in the gDE interface:
use the following code to trigger an interaction in your HTML file. Remember to add an appropriate
ID to the element you want to use as your interaction trigger. If you want to add more than one
interaction, you should do it for each one of them.
document.getElementById('interactiontrigger').addEventListener('mouseenter', function() {
window.parent.postMessage('my_interaction_function', '*');
});
Gemius S.A.
18 B Postepu Street
Phone: + 48 22 390 90 90
+ 48 22 378 30 50
Fax:
+ 48 22 874 41 01
contact@gemius.com
www.gemius.com
Example code with interactions:

<html>
<head>
</head>
<body>
<img id="interaction-trigger" src="data:image/png;base64,..." />
</a>
var parsed =
params[param[0]] =
return params;
}, {});
// change link href
var creativeLink = document.getElementById('creativelink');
creativeLink.href = params.clickTag;
// add interaction
document.getElementById('interactiontrigger').addEventListener("mouseenter", function() {
window.parent.postMessage('my_interaction_function',
'*');
});
</script>
</body>
</html>
IMPORTANT: The corresponding fragment is built into the creative code:
if (typeof window.addEventListener == "function") {

window.addEventListener("message", function(message) {
if (message.origin == "http://my.adocean.pl") {
if (typeof window[message.data] == "function") {
window[message.data]();
}
}
});
}
This is provided by the template of the creative.
Working templates
Gemius S.A.
18 B Postepu Street
Phone: + 48 22 390 90 90
+ 48 22 378 30 50
Fax:
+ 48 22 874 41 01
contact@gemius.com
www.gemius.com
Currently, there 3 templates available that can deliver HTML5 file. These are:
Toplayer [N] [ASYNC]

Expand [N] [ASYNC]
Billboard/Banner/Box [N] [ASYNC]
Creative assets
IMPORTANT: This limitation is temporary. It was valid until .ZIP file support was implemented.
There are several ways of attaching assets and additional JS files to a creative, e.g.:
Base64 encoded images,

Inline CSS, JS,
Content Delivery Network,
Use inliner (https://github.com/remy/inliner): It is a tool that inlines all assets of creatives; if
you use Windows, please install NodeJS first (https://nodejs.org/download/).
Please pay attention to the number of requests required to show your creative. The lower the
number, the sooner it will be visible to the end user.
Requirements for .ZIP files
Must have at least one HTML file

Should have index.html file
Main HTML file must be at top level or in root folder
Can have root folder
Must not have multiple root folders
Can have multiple HTML files
Example ZIP folder structure with root folder:

+ creative.zip
+-+ /rootfolder
+-+ index.html
+ image.png
+ style.css
Example ZIP without root folder:
+ creative.zip
+-+ index.html
+ image.png
+ style.css
Gemius S.A.
18 B Postepu Street
Phone: + 48 22 390 90 90
+ 48 22 378 30 50
Fax:
+ 48 22 874 41 01
contact@gemius.com
www.gemius.com
Example of invalid ZIP with multiple root folders:

+ creative.zip
+-+ /rootfolder1
| +-+ index.html
|
+ image.png
|
+ style.css
|
+-+ /rootfolder2
+-+ index.html
+ image2.png
+ style2.css
Gemius S.A.
18 B Postepu Street
Phone: + 48 22 390 90 90
+ 48 22 378 30 50
Fax:
+ 48 22 874 41 01
contact@gemius.com
www.gemius.com
Gemius S.A.
18 B Postepu Street
Phone:
+ 48 22 390 90 90
+ 48 22 378 30 50
Fax:
+ 48 22 874 41 01
contact@gemius.com
www.gemius.com
Gemius S.A.
18 B Postepu Street
Phone: + 48 22 390 90 90
+ 48 22 378 30 50
Fax:
+ 48 22 874 41 01
contact@gemius.com
www.gemius.com

HTML5 Template Specifications (+zip Support) - Geras

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML5 Template Specifications (+zip Support) - Geras

Загружено:

Авторское право:

Доступные форматы

Technical Specification for Preparing

The clickable place in a banner should be surrounded by <a> tags:

Example after applying all of the above:

Example code with interactions:

IMPORTANT: The corresponding fragment is built into the creative code:

if (typeof window.addEventListener == "function") {

Toplayer [N] [ASYNC]

Base64 encoded images,

Requirements for .ZIP files

Must have at least one HTML file

Example ZIP folder structure with root folder:

Example of invalid ZIP with multiple root folders:

Вам также может понравиться