Banner HTML5

Description

Banner HTML5 - serves as banner that displays arbitrary HTML/CSS/JS content or image. HTML code can be an ordinary HTML page with external scripts and styles. It is rendered in the iframe and has limited access to the contents of the parent window.

There are two ways of using "Banner HTML5 [loader]" template:
1. Upload only image and set banner parameters (dimensions, click tag, etc)
2. Upload zipped HTML5 creative. Documentation on preparing creatives can be found here: Adobe Animate CC or Google Web Designer.
If both image and HTML creative will be added, priority will be given to HTML.

Parameters that is being set in ADFOX interface:
- Width and height.
- CSS styles of the banner container.

Example

Banner with single click area

Banner with multiple click areas

Example of the published project in Adobe Animate CC format, source file.
Example of the published project in Google Web Designer format, source file.

HTML creative development

1. Check out HTML code prerequisites

  • Maximum HTML file size - 65 000 bytes.
  • It is preferrable to place JavaScript and CSS inside creative's HTML. If resulting HTML code exceeds maximum allowed size, JavaScript and CSS have to be placed in separate files: - file size can not exceed 300kb;

    Example of using external JS and CSS files:

    <script type="text/javascript" src="LINK_TO_THE_FILE"></script>
    
    <link rel="stylesheet" type="text/css" href="LINK_TO_THE_FILE" />
    
    Relative paths are not allowed in HTML code

  • Only one HTML file is allowed
  • Maximum amount of files is 50
  • Only following filetypes are allowed: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
  • Maximum size of each file:
    - 300Kb;
    - 1Mb for video files.
  • Only numbers, letters, underscore and English alphabet characters are allowed in filenames.
  • Only zip files are allowed for uploading.

Image files requirements

It's recomended to use high resolution images. It will dramatically improve visual quality on high resolution devices, although will decrease download speed.

Also it's good practice to reduce image filesize using special services. For example TinyPng.

SVG images are allowed. It's vector format, so it's lightweight and will fit any resolution.

Allowed image formats: png, gif, jpg, svg.
Maximum image filesize: 300Кб.

2. Choose the suitable instruction depending on editor that you use:

Adobe Animate CC — Banner with single clickable area

1. Download single clickable area banner template

2. Create Adobe Animate HTML5 canvas project or open already existing

3. Open publish settings File → Publish Settings and import template from item 1.

4. Publish project, selecting appropriate folder.

5. Now the whole banner area is clickable. URL adress will be taken from banner parameters.

Adobe Animate CC — Banner with multiple clickable areas

1. Download template for banner with multiple clickable areas

2. Create Adobe Animate HTML5 canvas project or open already existing

3. It's nesessary to set instance names to buttons or movieclips, so you can add click events to appropriate buttons. It's recommenden to use button1 - button9 instance names.

See also:

• Guide on creating buttons with instance names

Main scene button

1. Create an object on the scene for example using Rectangle Tool.
Then convert it to symbol using context menu "Convert to Symbol..."

2. In the following dialog box choose "Type: Button". "Name" can be left unchanged, press "Ok".

3. Set instance name of this button to add click event later.

4. Put the following code into "Actions" layer:

window.buttons.push( 
   //Type in comma separated instance names, adding "this" at the beginning
   this.button1
   //End of instance names 
);

Nested button

1. For example you button is nested inside movie clip, its name is "movieClip".

2. Doouble click on "movieClip", and then you will able to observe nested button.

3. If your button is nested to another symbol, for example movie clip, then it's nessary to represent it in "Actions" layer code:

window.buttons.push( 
   //Type in comma separated button instance names nested to parent movie clip instance adding "this" at the beginning
   this.movieClip.button1
   //End of instance names
);

• Guide on creating transparent buttons

1. Select appropriate element and convert it to symbol using context menu "Convert to Symbol..."

2. Set it's name and select "Type: Button".

3. Double click on symbol to step into it.

4. Insert keyframe into frame "hit" using context menu.

5. Remove contents of the frames up, over, down

6. Transparent button is ready:

4. Add "Actions" layer to the project (we wil add our JS code later).

5. Open "Actions" editor.

6. Then put in code to "Actions" layer after modifying it accordingly.

window.buttons.push( 
   //Type in comma separated instance names, adding "this" at the beginning

   //End of instance names 
);
setAdfox();

If button is in the main scene, then put it's instance name right after "this", for example:

this.button1

If button is nesten into another scene, then put in instance name of this scene and then instance name of the button:

this.scene_instance_name.button2

Final "Actions" layer code example:

window.buttons.push( 
   //Type in comma separated instance names, adding вначале this
   this.button1, this.scene_instance_name.button2
   //End of instance names 
);
setAdfox();

7. First comma separated instance name in "Actions" layer will match first event in banner parameters of ADFOX interface. First instance name will use URL from "Event 1", second instance name will use URL from "Event 2", etc.

Provide information about events and it's matching instance names together with creative archive to manager who will add banner to ADFOX.

8. Open "Publish Settings...", import appropriate template from item one and publish project, selecting suitable folder.

9. Use zip format for creative archive. Your creative is ready for adding to adfox.

Google Web Designer

1. Download Google Web Designer template.

You can use this code as basis for building your own banner.

This template includes adfox_HTML5.js library and set of parameters for proper event and click handling:
%reference%, %user1%, %eventN%, where N — event index from 1 to 30.

2. Click handling.

All events are set to the certain elements on the "Events" tab.

To invoke actions use "Intaeractive area" component. Add it and choose an event "Tap Area > Touch/Click"

Specify click function code on the "Code" tab.

2.1 If banner contains single button:

callClick();

2.2 It there are several buttons:

callClick(n);

where n is event index that has to be invoked.

2.3 If it's nesessary to invoke event from animation without click then use the following code:

callEvent(n);

where n is event index that has to be invoked.

Adaptive banner guide.

GWD responsive layout overview In order to make banner adaptive set postition and dimensions in percents on the Properties pane.

Also use "Align to container" and "Fluid layout" options.
Responsive design uses flexible – rather than fixed – layouts. For ads, this means creating a single ad that can restyle its elements as the orientation or size changes, rather than creating multiple similar ads. Keeping with standard responsive design principles, Google Web Designer uses CSS3 media queries to let you to apply different styling rules for different-sized ads. Final project example Google Web Designer, source file.

4. Publish your project.

Select the following publishing options:

Provide information about events and it's matching URLs to manager who will add banner to ADFOX.
  1. Specify the name for the .zip file or folder for the document and supporting files. By default Google Web Designer uses the same name you specified for the HTML file when you created the file.
  2. Choose the location where you want to save the .zip file or folder. You can enter the path to the location, or click the folder icon to browse your file system.
  3. Select or deselect publishing options. Some options may be unavailable for your document type.

Другие редакторы

1. Click tag

To add click tag use the following variable for the attribute href of а tag:

%banner.reference_user1%

Also you can use variable in target attribute %banner.target%.
If attribute is absent, than link will be opened in banner's iframe.

Click tag HTML example.

<a href="%banner.reference_user1%" target="%banner.target%">Сайт рекламодателя</a>   
Use the following variable for mobile app's HTML banners: %reference%@%banner.user1%

2. Banner with multiple click tags

If banner contains multiple clickable areas or buttons with different links. For example:

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

Use the following variables: %request.reference%@%banner.eventN%, where N is event number from 1 to 28.
Например:

<a href="%request.reference%@%banner.event1%" target="%banner.target%">First link</a>  
<a href="%request.reference%@%banner.event2%" target="%banner.target%">Second link</a>

Provide information about events and it's matching links to manager who will add banner to ADFOX.

First link - http://site.ru - %banner.event1% (Event 1).
Second link - http://site.ru/about/ - %banner.event2% (Event 2).

Adding banner to ADFOX

To add banner to ADFOX pick appropriate banner type and "Banner HTML5 [loader]" template.

Set banner parameters:

  1. Архив с HTML5 креативом — upload *.zip with your project, "HTML5 код креатива" have to be empty.

  2. HTML5 код креатива — paste banner code here if you want to make it this way instead of using zipped creative.

  3. URL перехода — specify the link to the advertiser's site. For correct operation of the transition, please check protocol in the link (http:// or https://).

If banner contains several links then add them on the events of the banner to the URL fields.
Ask developers how links should match events.
  1. "TARGET" ссылки - defines widow where link will be opened:
    _top - in the current window;
    _blank - in the new tab/window, depending on browser settings.

  2. Ссылка на промерочный пиксель — ADFOX tracking pixel will be used by default //banners.adfox.ru/transparent.gif, specify third-party link if it's nesessary to collect statistics there.

  3. Ширина креатива (px или %) — banner width.

  4. Высота креатива (px или %) — banner height.

  5. Изображение — upload image.
    Display priority:
    - both HTML code and image were added -- HTML code will be shown.
    - only image was added -- an image will be shown.
    - only image was added -- an image will be shown.

  6. Имя атрибута class контейнера баннера — additonal classes for banner container.

  7. Использовать SafeFrame (yes|no) — safeFrame - technology that wraps advertisment with special iframe with certain API. Safeframe blocks it's access to the page context and protects page from collecting it's data.
    yes - turn on safeFrame usage and block access to the page;
    no - don't turn on safeFrame and allow access to the page.

  8. Стили для блока баннера — custom CSS styles for banner container except "display" property. All invalid styles won't be used.