HTML code, HTML5 code

"Русская версия"

Description

It might be any HTML code, as well as HTML5 - code.

Your code might be html layout of banner with CSS styles and JavaScript, or it might be a code of another ad serving system.

Requirements for HTML code

Writing a code you have to follow our requirements:

1. Your code shouldn't contain opening and closing tags:

html, head, meta, title, body, doctype

2. It might be no more than 65 000 symbols in code.

More preferable is to place JavaScript and CSS into HTML code.

If your final code consists more than acceptable quantity of symbols, it might be reduced by using JavaScript and CSS in standalone files:

- save js and css in standalone files (not more than 5 files) with .js and .css extensions;

- file size must not be more than 300 kb;

3. Attaching files to HTML code:

You have to use variables instead of links on files if HTML code contains attaching files ( js, css, images, flash):

%user1%
%user2%
%user3%
%user4%
%user5%
File 1 - File 5. Manager will upload files to appropriate variables when adding a banner in ADFOX. File links will be replaced by user variables.

Example of attaching js and css files:

<script type="text/javascript" src="%user1%"></script>

<link rel="stylesheet" type="text/css" href="%user2%" />
If there is more that 5 files, it might be used absolute links on files. Files must be available. Its not permitted to use relative links on files.

4. Counting clicks in banner

If you need to collect statistics on clicks in ADFOX, direct links have to be replaced to variable:

%reference%

To specify location where linked document is opened use a target attribute. If that attribute is not consists linked document is opened inside an iframe, i.e. at banner place.

Example:

<a href="%reference%" target="%target%">Advertiser's site</a>

5. Counting clicks with several buttons in HTML banner

There are several links that offers different pages of advertising site, and you need to have statistics on each of them.

<a href="http://site.ru" target="_blank">First link</a>

<a href="http://site.ru/about/" target="_blank">Second link</a>

1. Replace direct links to vaiable %reference% - so system will count common quantity of clicks.

2. By using @%event1%-@%event30% redirecting user to a necessary page. After this we have links as:

<a href="%reference%@%event1%" target="%target%">First link</a>

 <a href="%reference%@%event2%" target="%target%">Second link</a>

Manager, who adds a banner in ADFOX, have to be notified about Compliance of used links and variables.

First link - http://site.ru - event1

Second link - http://site.ru/about/ - event2

6. Information about container, which will be used for HTML code:

If it's used synchronous code on site:

<div id="AdFox_sync_banner_html5_[rnd]">

<div id="AdFox_pseudo_iframe_[rnd]">

HTML code

</div>

</div>

You may use variable %random% if you need to get [rnd] in HTML code.

If it's used an asynchronous code on your site:

<div id="AdFox_banner_pseudo_ph_[rnd]">

<iframe id="AdFox_iframe_[rnd]" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">

HTML code

</iframe>

</div>

You may use variable %random1% if you need to get [rnd] in HTML code.

To a manager who adds banner:

1. There is have to be specified a common link in "URL link" field, that link will not be called.

2. Links have to be specified in tab Banners -> Events in "URL link" field corresponding to it's event.

Statistics includes common quantity of views and clicks on tab Events also you can get data on transition directly for each reference.

Preparing HTML5, which received through Swiffy

Swiffy is a google flash convertor to HTML.

1. You have to use this requirements when preparing Flash banner:

- Flash banner;

- Flash banner with several buttons and events

2. Follow the link and convert Flash to HTML5 code:

3. You have to copy such part of code which is inside of the second script without script tags :

swiffyobject = {...}

and save it as swiffyobject.js file

4. Add an attributes to a tag, which content was saved in a file:

type="text/javascript" src="%user1%"

5. To count clicks add following code:

- before string "var stage=" :

    var flashvars = "link1=%REFERENCE_ENCODED%&target=%target%&event_1=%eventEncoded1%&event_2=%eventEncoded2%&event_3=%eventEncoded3%&event_4=%eventEncoded4%&event_5=%eventEncoded5%&event_6=%eventEncoded6%&event_7=%eventEncoded7%&event_8=%eventEncoded8%&event_9=%eventEncoded9%&event_10=%eventEncoded10%&event_11=%eventEncoded11%&event_12=%eventEncoded12%&event_13=%eventEncoded13%&event_14=%eventEncoded14%&event_15=%eventEncoded15%&event_16=%eventEncoded16%&event_17=%eventEncoded17%&event_18=%eventEncoded18%&event_19=%eventEncoded19%&event_20=%eventEncoded20%;";

- after string "var stage=" :

 stage.setFlashVars(flashvars);

6. Delete strings:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Swiffy Output</title>

and

<style>html, body {width: 100%; height: 100%}</style>

</head>

<body style="margin: 0; overflow: hidden">

and

</body>

</html>

Finally we have:

- swiffyobject.js file;

- HTML5 banner code:

Preparing HTML5, which received through Adobe Edge Animate.

Adobe Edge Animate - is a software for making HTML5 banners by Adobe.

Information about the program.

Settings for publishing the project:

Adobe project includes the next files:

  • - HTML file ([Project's_name].html);

  • - Images;

  • - JS file ([Project's_name]_edge.js).

In these files you should make several changes:
Learn more

1. Open the main HTML file [Project's_name].html with Notepad.

For clicks' counting wrap the < div id="Stage">...< /div > element in <a> tag like that:

<a href="%reference%" target="%target%"><div id="Stage" class="EDGE-18124829"></div></a>

2. Open the next file [Project's_name]_edge.js with Notepad. Inside there are relative paths to the images. You should change it to absolute. You may upload it to your file server and use absolute links from it. Or you can upload images to the «Files» section of the campaign settings. After uploading the file you will receive absolute link for it. You should put it instead the relative one inside the [Projet's_name]_edge.js file.

For example, you had images.jpg inside your project's folder, after uploading it to our interface you will see the link:

http://banners.adfox.ru/150923/adfox/507542/1420837_3.jpg 

Then you should find image.jpg inside [Projet's_name]_edge.js and change it to:

http://banners.adfox.ru/150923/adfox/507542/1420837_3.jpg

After you make all the changes save the [Projet's_name]_edge.js file and also upload it to the «Files» section of the campaign. You will get a link like:

http://banners.adfox.ru/000000/adfox/000000/[Projet's_name]_edge.js

Inside the HTML code of the [Projet's_name].html change the Project's name with the link you have received during the last step:

AdobeEdge.loadComposition(‘Project's name’, 'EDGE-18124829', {

Then remove the _edge.js postfix and the line should look like:

AdobeEdge.loadComposition(‘http://banners.adfox.ru/000000/adfox/000000/Project's name’, 'EDGE-18124829', {

The whole code should look like that:

3. Then put the final HTML code inside «HTML5 (css,html,js)» field during adding the banner to the system.

Example code

HTML code written by developers of banner:

<a href="http://www.site.ru/" target="_blank"><img src="/img/img1.png"></a>

The code was changed to:

<a href="%reference%" target="%target%"><img src="%user1%"></a>

Then Manager has to specify values in variables in parametres of banner:

"URL link" - http://www.site.ru/

"TARGET" - _blank

File 1 (choose a file) - upload img1.png. Link is created automatically

Adding in ADFOX

When you add a banner to ADFOX it's necessary to get the following information on banner:

1. Folder with project which includes HTML code. Additionally it might be presented another attaching files , in this case it's required "File name" - "Variable number".

2. Banner sizes (width, height).

3. Link to an advertiser's site.

If there are several links it's required "Link to an advertiser's site" - "Variable number"

If you need to count views at another ad serving system it might be used tracking pixel link.

To add a banner in ADFOX choose necessary Type of banner and HTML код [Sync_Async] temlpate. If there is no template at you template list it might be added from pre-defined.

Values for parametres in "Content" section have to be specified:

URL link - specify a link to advertiser's site.

If you don't need to count clicks or if code of another ad serving system is used then fill the field randomly.

"Target" - is used to specify the location where linked document is opened.

_blank - Opens the linked document in the parent frame.

_parent - Opens the linked document in a new window or tab.

Tracking pixel link - link to a tracking pixel if you need to count views at another ad serving system.

To insert a random number of links use macro %random% established in ADFOX

File 1 - File 5 - if there any ad materials attached to a code it might be uploaded in variables.

Make sure there are variables %user1% - %user5% in your code.

Width ( dimesion in px or %) - specify width of banner in px or % . For example: 240px or 100%.

Height ( dimesion in px or %) - specify height of banner in px or % . For example: 240px or 100%.

HTML code - insert HTML code

Styles for banner's block - specify styles for div block, in which code is. Format of styles is inline CSS. For example, to position banner in center: margin: 0 auto;