Wiki source code of Nasazení HTML5 banneru do iBB Ad Server

Last modified by ZdVo on 2019/04/09 11:00
Content · Comments (0) · Attachments (12)
Hide line numbers
 1: = What is necessary to know in case of HTML5 banners and which tools use? =
 2: 
 3: __To handle HTML 5 banners and HTML banner generally, we should know two basic things:__
 4: 
 5: * (% style="font-size: 14px;" %)The basics of structure HTML and CSS
 6: * (% style="font-size: 14px;" %)To have some editor for writing of HTML language (pspad, notepad ++ ...)
 7: 
 8: __From administrator point of view it is important to know, that HTML 5 banner can be use with similar effect like in classic flash banner and except of this fact it has many advantages:__
 9: 
10: * (% style="font-size: 14px; " %)Displaying on devices, which don't support flash (mobile devices)
11: * (% style="font-size: 14px; " %)No additional plugin of browser is necessary.
12: 
13: __HTML banners have disadvantages, too, which are manifested when they are inserted into Ad systems:__
14: 
15: * (% style="font-size: 14px; " %)Most of the (% style="font-size: 14px; font-size: 14px" %)HTML 5 and CSS3(% style="font-size: 14px; " %) functions are not supported by older browsers and in new updated browsers is support of their funcionality, within compatibility, different.
16: * (% style="font-size: 14px; " %)It is still new thing, in spite of the fact,  that HTML 5 has been supporting for some years by new browsers. Is put bigger emphasis on the person, who is responsible for creation of html 5 banner = each html 5 banner differs from another one. Unification is harder there. 
17: * (% style="font-size: 14px;" %)HTML 5 banner, which is created in bad way, might have negative influence on whole web page. From such reason is in Ad system prefered implementation through the iframe.
18: 
19: __HTML banner most often consists of following files:__\\
20: 
21: 1. (% style="font-size: 14px; " %)Index.html, which is source code of whole banner construction.
22: 1. (% style="font-size: 14px; " %)CSS file - necessary for proper display and design of banner. It could be external file, or inserted directly in head of html document, or banner designer can use inline write for particular html tag.
23: 1. (% style="font-size: 14px;" %)External image pictures in GIF/PNG/JPG format
24: 
25: (((
26: = (% style="line-height: 19.6000003814697px;" %)Preparation phase of insertion of HTML 5 banner in iBB Ad Server interface(%%) =
27: )))
28: 
29: (((
30: 1. (% style="font-size: 14px; line-height: 19.6000003814697px;" %)**Checking of delivered source files:**
31: Before, than we start with insertion into Ad Server system, we need to check whole files, which client sends to us. Main source file is mostly named as index.html. By click on index.html banner we check, if banner is displayed properly and all necessary files are available. If everything seem all right we can carry on with further step.  
32: \\(% style="font-size: 14px; line-height: 19.6000003814697px; " %)[[image:http://help.billboard.cz/xwiki/bin/download/AdServer+v2/HTML5Implementation2/2015%2D05%2D04_112341.jpg?width=1580||alt="2015-05-04_112341.jpg"]]
33: 1. (% style="font-size: 14px; line-height: 19.6000003814697px;" %)**Pack the HTML files to zip format and upload it to iBILLBOARD Ad Server banner.**
34: (%%)\\
35: 1. (% style="font-size: 14px; line-height: 19.6000003814697px;" %)**Uploaded zip archive is automatically extracted into individual files and folders.
36: **(% style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: 700; text-align: left; font-size: 14px; line-height: 19.6px" %)**[[image:http://help.billboard.cz/xwiki/bin/download/AdServer+v2/HTML5Implementation2/2018-02-15_144803.jpg||alt="2018-02-15_144803.jpg" style="font-size: 14px;"]]**(% style="font-size: 14px; line-height: 19.6000003814697px;" %)**
37: **
38: 1. (% style="font-size: 14px; line-height: 19.6000003814697px;" %)**Insert following javascript code, which secure REDIRECTION: 
39: **It's necessary to insert it between tags ** **//<script type=text/javascript> </script>//, anywhere in banner HTML code:
40: \\(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0)" %)//function//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// getParameterByName(name) {
41:   //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0)" %)//var//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// match //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102)" %)//=//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0)" %)//RegExp//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//(//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33)" %)//'[?&]'//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102)" %)//+//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// name //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102)" %)//+//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//
42: //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33)" %)//'=([^&]*)'//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//).exec(//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0)" %)//window//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//.location.search);
43: //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0)" %)//return//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// match //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102)" %)//&&//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0)" %)//decodeURIComponent//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//(match[//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102)" %)//1//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//].replace(//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136)" %)///\+/g//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//, //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33)" %)//' '//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//));
44: }
45: //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0)" %)//document//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//.addEventListener(//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33)" %)//"DOMContentLoaded"//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//, //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0)" %)//function//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//(event) { 
46: //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0)" %)//var//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// aClickTag //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102)" %)//=//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0)" %)//document//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//.getElementsByTagName(//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33)" %)//'a'//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//);
47: //(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0)" %)//for//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// (//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0)" %)//var//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// i//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102)" %)//=//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102)" %)//0//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//; i//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102)" %)//<//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//aClickTag.length; i//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102)" %)//++//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//){
48:   aClickTag[i].href//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102)" %)//=//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// getParameterByName(//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33)" %)//'clickTag'//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//);
49:   aClickTag[i].target//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102)" %)//=//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)// getParameterByName(//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px; font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(187,102,136); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(0,128,0); font-size: 14px; color: rgb(186,33,33); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; font-weight: bold; color: rgb(0,128,0); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33); font-size: 14px; color: rgb(102,102,102); font-size: 14px; color: rgb(186,33,33)" %)//'bbtarget'//(% class="box code" style="font-size: 14px; line-height: 19.6px; font-family: sans-serif; font-size: 14px; font-weight: 400; text-align: left; font-size: 14px" %)//);
50: }
51: }); //(% style="font-size: 14px; line-height: 19.6000003814697px;" %)//
52: \\//Now(% style="font-size: 14px; line-height: 19.6px; font-size: 14px; line-height: 19.6px" %) the banner(% style="font-size: 14px; line-height: 19.6000003814697px;" %) is ready from technical point of view.
53: 
54: = Implementation phase into iBB Ad Server: =
55: 
56: Variable name is clickTag (IAB standard name) It exists two option how to secure displaying of HTML banner through Ad Server
57: 
58: 1. (% style="font-size: 14px;" %)**Into javascript version of banner we insert following template for iframe:
59: **//
60: document.write ('<iframe src="%%URL%%index.html?clickTag=%%~_~_REDIRECT_ENCODED%%&bbtarget=%%~_~_TARGET%%" width="970" height="310" scrolling="no" style="margin:0px; border:0px" seamless></iframe>');
61: \\//For width and height params set appropriate dimensions and by click on "insert" button we save it.
62: \\\\[[image:2019-03-26_124806.jpg]]
63: And that is all. We check in the real preview if the is displayed properly. Check with fiddler or firebug if redirect URL is performed and clicks are counted in Ad Server system.
64: 
65: 1. **The second option is to use in-page script form IBB creative library**. In in-page template is necessary to set dimensions of banner and eventually edit the name of main HTML banner file (Normally a name is index.html). It is necessary to secure, that value in 'use' option is set to 'page' as well.
66: [[image:2019-03-26_125216.jpg]]
67: )))
Wiki source code of Nasazení HTML5 banneru do iBB Ad Server

Navigation

AdServer v2
