BannerLine HTML5

Description

BannerLine HTML5 is a stretching banner in the form of an HTML5 creative or images that expand at certain events.

It's displayed on top of site content and fixed to one of the browser sides. It doesn't change its position when the user scrolls.

Using a BannerLine HTML5 template, you can add a banner to a site in two ways:

Prepare images and a click link. In this case, you can add two images that expand or one image No. 1 (before the expansion).
Prepare an HTML creative.

When developing an HTML creative, be sure to follow the technical requirements for one of the editors:

Adobe Animate CC

Place two symbols on different layers that will correspond to the banner in the expanded and collapsed states.

If you need the Close button, add it to the Movie clip of the collapsed state.

Specify instance names.

We recommend using instance names expanded, collapsed, and closed for the expanded, collapsed states, and the Close button accordingly. You can then transfer the code samples from this manual to Animate without changes.

See also:
Instructions for adding a button and assigning an instance name
Button on the main scene
1. Create an object on the scene, for example, using Rectangle Tool. Then select the object and select Convert to Symbol... in the context menu.
2. In the window that appears, select Type: Button. You can leave Name unchanged. Then click Ok.
3. For the click to work, assign an Instance Name to this button.
4. Write the code for this button in Actions:
  window.buttons.push( //Separate the buttons paths with a comma, adding this first this.button1 //End of button space );
Nested button
1. Let's say that the button is inside another symbol, for example, Movie Clip. In this example, this Movie Clip has the Instance Name “name”.
2. Double-click to go inside name. The nested button is there.
3. When you specify the path to this button in Actions, you need to add the object's Instance Name after this where it's nested:
  window.buttons.push( //Separate the buttons paths with a comma, adding this first this.name.button1 //End of button space );
Select one of the templates depending on the scenario in the banner.

Download the template and connect it to the project:
Templates for Animate version 15 and below:

Depending on the scenario of the banner, add one of the code samples to the Actions layer:

One clickable area and expand on hover

//Change instance name if needed
expanded = this.expanded;
collapsed = this.collapsed;
setAdfox();

Multiple buttons and expand on hover

//Change instance name if needed
expanded = this.expanded;
collapsed = this.collapsed;
window.buttons.push(
//Separate the buttons paths with a comma, adding `this` first
this.expanded.button1, this.expanded.button2, this.expanded.button3, this.expanded.button4
//End of button space
);
setAdfox();

One clickable area and expand/collapse on click

//Change instance name if needed
expanded = this.expanded;
collapsed = this.collapsed;
close = this.expanded.close;
setAdfox();

Multiple buttons and expand/collapse on click

//Change instance name if needed
collapsed = this.collapsed;
expanded = this.expanded;
close = this.expanded.close;
window.buttons.push(
//Separate the buttons paths with a comma, adding `this` first
this.expanded.button1, this.expanded.button2
//End of button space
);
setAdfox();

Publish the project and package it in a ZIP archive.
If you use the option with multiple buttons, make sure to keep track of instance names of the buttons and their corresponding purpose. You'll need this information when adding an HTML creative to the Adfox interface.

For example:

this.expanded.button1: A link to the product page.

this.expanded.button2: A link to contacts.

After adding the banner in the Adfox interface, specify the links on the Events tab.

The first instance in the line of code will correspond to the Event 1 parameter of the banner. You can use any name for the event.

Google Web Designer

Download a banner template for Google Web Designer.

You can use this banner code as a basis for making creatives in the editor. Put the contents of the archive into the folder with the program templates, for example:
```
/Users/[USER_NAME]/Documents/Google Web Designer/templates
```
The template contains an adfox_HTML5.js script and a set of parameters for clicks and event counters to work correctly:

%request.reference_mrc%, %user1%, %eventN%, where N is the event number from 1 to 30.
Click processing.

All events are assigned to animation elements on the Events tab.

The Tap area component is used for calling actions.

Add it and select the Tap Area → Touch/Click.

On the Custom code tab, select the call of the click function.
- If a single button is used: callClick();
- If multiple buttons are used: callClick(n); where n is the number of the event to be called.
- If you need to call an event from an animation without a click, use the following code:callEvent(n); where n is the number of the event to be called.
How to use a stretching banner.

To make the banner stretch across the width of the container on the site, specify percentages instead of pixels for the banner location and dimensions on the Properties panel.

Use the Align by container and Fluid layout options on the top toolbar.

If you enable Fluid layout before using any alignment tools, when you change the parent container size, all elements are aligned relative to each other and relative to the container size.

You can simultaneously use both the relative sizes of elements in percentages and absolute sizes in pixels.

Sample ready-made project in Google Web Designer, source file.
Publish the project.

The project has to be published with the following settings:
- Collect files enabled;
- Create ZIP archive enabled;
- Groups unpacking enabled;
- CSS prefix enabled for WebKit and Mozilla.

Note

When adding a banner to Adfox, the manager needs to know the button and event number correspondence. For each event, the manager adds its own click link, which is then passed to the banner code using a variable.

You can use the following banner features in Adfox:

Set up the Close button display and add your own button.
Set the background color for images.
Set the banner location, that is, select which side of the browser window the banner is fixed to.
Redefine function names for the banner expand and collapse (the container and creative).
Write your own CSS styles for a container with a banner.
Set up the banner expand lifetime, after which the banner automatically collapses.
Set up two types of banner expand:
- Automatic banner expand: Expand during initialization where you can specify the time of banner collapse.
- Session banner expand: Expand occurs a specified number of times for each individual user.

Tip

Based on the international media standards recommendations on high-quality ads, we recommend the following settings:

1. If you place the format at the bottom of the browser, the banner height should be no more than 250 px.

2. If you place the format at the top of the browser, the banner height should be no more than 200 px.

Sample banner

Image requirements

Images. Prepare one or two images: first, an independent stretching banner or a collapsed banner (with a smaller height), and second, an expanded banner (with a larger height).
The Close button. If you want to replace the standard Close button with your own, prepare the image. It's inserted into the banner without changing its size.
Use high-resolution images. This substantially improves banner quality on mobile devices, though it reduces banner loading speed.
Acceptable image formats: PNG, GIF, and JPG.
Maximum file size: 300 KB.
Format features for a banner with an image:
- On touch devices: The first tap opens the banner, and the second tap opens the link.
- Banner background: You can specify the background color for the container with the image if it's larger than the image. This may occur if you set one of the banner size values to 100% and the other value is in pixels, or if the fixed size of the banner is smaller than the screen size. In this case, the container proportions are violated, but the image proportions remain unchanged. The free space is filled with a color that you specify in the banner settings. You can set different colors for collapsed and expanded banners.

HTML5 creative requirements (for code developers)

The maximum allowed number of characters in the HTML code is 65,000.
It's best to place JavaScript and CSS inside the HTML code of the banner. If the final HTML code exceeds the maximum allowed size, reduce it by splitting JavaScript and CSS into separate files:
1. Save the JS and CSS code in separate files with the .js or .css extension.
2. File weight can't be more than 300 KB.
3. Upload the files to the Files tab of the ad campaign and embed the resulting links to the files in the HTML code.
  - If absolute links (src="js/script.js", src="css/style.css") are included in the project, then when the project is uploaded, Adfox recognizes the file paths, automatically uploads them to the Files tab, and replaces all links to these files in the uploaded project.
  - If relative links (for example, src="../js/script.js") are included in the project, use one of the following methods:
    - Replace the links to the .js and .css files with absolute links: Adfox parsing will work and all of the links will be replaced automatically.
    - Manually upload the .js and .css files to the Files tab. Then get links to these files in Adfox and replace the relative links with them in the HTML code.
  Example of connecting JS and CSS files:
```
<script type="text/javascript" src="LINK_TO_FILE"></script><link rel="stylesheet" type="text/css" href="LINK_TO_FILE" />
```
The project can contain only one file with the .html extension.
The maximum allowed number of files in a project is 50.
File types allowed in the project: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WEBM, AVI, and SWF.
The maximum size of each file (this applies to archived files as well):
- 300 KB.
- 1 MB for video files.
File names must only contain numbers or Latin letters and an underscore character. You can't use spaces, quotation marks, and special characters in the file name.
The completed project is a ZIP archive.

Functions and variables for banner collapse and expand

Banner expand/collapse means an increase or decrease of the size of the HTML code container.

Because of this, the content that's displayed in the container for the expand or collapse is changed by the banner's HTML code developer.

Note

If you use the mouseover and mouseout events, we recommend that you assign them to the iframe element, which contains the HTML content of the banner. Call the collapse (collapseBanner) and expand (expandBanner) functions at the level of this element. This is because, in some cases, the events assigned to the elements inside iframe may not be triggered when they occur.

The functions are available in the global viewable area. We recommend that you use the window. prefix before calling each function.

Option	Description
`expandBanner`	When this function is called, the frame expands.
`collapseBanner`	When this function is called, the frame collapses.
`onBannerCollapse`	If it's in the global viewable area, it's called by the Adfox code to notify the banner code of the collapse.
`onBannerExpand`	If it's in the global viewable area, it's called by the Adfox code to notify the banner code of the expand.

If the banner code needs to know about the expand state changes that occurred outside the frame, use the onBannerCollapse and onBannerExpand functions.

To see whether the banner is currently collapsed or expanded, you can use the global isBannerExpanded variable that returns the expand state:

true: The banner is expanded.
false or not declared: The banner is collapsed.

Sample code for the expand button in the Adobe Animate editor:

function expandCreative()
{
    console.log('expandCreative');
    this.main_banner.visible = false;
    this.exp_banner.visible = true;
    window.expandBanner();
}

Tips for preparing your creative

In the banner, you can implement buttons that lead to different pages of the advertiser's site.
When you change the canvas size, its contents are cleared in webkit browsers. Because of this, if you wrote the creative code yourself without using an editor like Adobe Animate, redraw the canvas after changing its size.

The window.destroyBanner() method is available in the HTML frame. It completely destroys (closes) BannerLine.

Sample code for the Close button:

this.close.addEventListener("click", function(e) {
        var t = e.nativeEvent;
        if(t.which == 1 || t.button == 0) {
                window.destroyBanner();
        };
});

Event count

The banner counts events automatically:

How many times the banner is closed.
How many times the banner is expanded.

Add a banner to Adfox

To add a banner to Adfox, select the necessary banner type and the BannerLine HTML5 [context] template.

Set the banner parameters:

Archive with HTML5 creative: Upload a ZIP archive with the project. Leave the Creative HTML5 code box empty (it's filled with the contents of your project's HTML file after you add the banner).
Creative HTML5 code: The content of the HTML code from the archived project (loaded from the archive automatically).
Click URL: Enter the link to the advertiser's site. For the click to work correctly, make sure that the link includes the protocol (http:// or https://).
Link TARGET: Determines the window where the link opens:
- top: Current window.
- _blank: New window or tab, depending on the browser settings.
Tracking pixel link: By default, the Adfox //banners.adfox.ru/transparent.gif pixel is used. If you want to count impressions in a third-party system, delete the Adfox pixel and specify another link.
image No. 1 (before the expand): The image for the banner with the image before the expand (in the collapsed state). You can specify just image No. 1 (without loading Image No. 2). In this case, BannerLine is a stretching banner that doesn't expand.
Image No. 2 (after the expand): The image for the banner with the image after the expand (in the expanded state).
Show the "Close" button (yes|no): Decide whether the close (delete) cross button is always shown.
Custom "Close" button image: Upload an image for the Close button.
Background color after the expand (#fff): The background color of the container with the image expanded. For example, #fff, #f0f0f0, or rgba(0,0,0,0.4). Transparent by default.
Background color before the expand (#fff): The background color of the container with the image collapsed. For example, #fff, #f0f0f0, or rgba(0,0,0,0.4). Transparent by default.
BodyPadding: Specify the indentation value for the body tag in pixels.

A banner that's at the top or bottom (the Position parameter is set to top or bottom) automatically adds margins to the body element (the Padding property value is set equal to the banner height), so that the banner doesn't cover the page content.

The default value isn't specified. The banner height is used.

To disable indentations, set the value to zero (0 or 0 px).
Expand time (seconds): The time in seconds after which the banner will be automatically collapsed after an automatic or user-triggered expanding.
Banner block z-index: z-index CSS property for the banner block. By default, it's 999996.
Width before the expand (in px or 100%): Set the banner width before the expand (in the collapsed state).
Height before the expand (in px or 100%): Set the banner height before the expand (in the collapsed state).
Width after the expand (in px or 100%): Set the banner width after the expand (in the expanded state).
Height after the expand (in px or 100%): Set the banner height after the expand (in the expanded state).

Position: Select which side of the browser window the banner is fixed to. This parameter also determines where the banner expands. The expand is always directed to the center of the browser window.

Available position options:

Option	Description
`top`	The banner is fixed to the top of the browser window and expands down.
`left`	The banner is fixed to the left side of the browser window and expands to the right.
`bottom`	The banner is fixed to the bottom of the browser window and expands up.
`right`	The banner is fixed to the right side of the browser window and expands to the left.

Number of banner expands: The number of session banner expands per session.
Session time for banner expand: The time of the session banner expand (in hours). After this time, the banner is displayed in the expanded state again if the Number of banner expands parameter is greater than 0.

Always autoexpand: Whether or not the banner will expand during initialization. The parameter has priority over the session expand. Acceptable values:

yes: Display the banner expanded. For the creative prepared in the Adobe Animate CC editor to work correctly, be sure to add the code to the source file:


window.global_exp_banner = this.exp_banner;
window.global_main_banner = this.main_banner;
window.global_exp_banner.visible = false;
if (window.isBannerExpanded) {
window.global_exp_banner.visible = true;
window.global_exp_banner.btnCollapse.visible = true;
window.global_main_banner.visible = false;
window.global_main_banner.btnExpand.visible = false;
}
else{
window.global_exp_banner.visible = false;
window.global_exp_banner.btnCollapse.visible = false;
window.global_main_banner.visible = true;
window.global_main_banner.btnExpand.visible = true;
}
window.global_main_banner.btnExpand.addEventListener("click", expandBanner.bind(this));
window.global_exp_banner.btnCollapse.addEventListener("click", collapseBanner.bind(this));
window.onBannerExpand = function()
{
window.callEvent(2);
window.global_exp_banner.visible = true;
window.global_exp_banner.btnCollapse.visible = true;
window.global_main_banner.visible = false;
window.global_main_banner.btnExpand.visible = false;
}
window.onBannerCollapse = function()
{
window.callEvent(3);
window.global_exp_banner.visible = false;
window.global_exp_banner.btnCollapse.visible = false;
window.global_main_banner.visible = true;
window.global_main_banner.btnExpand.visible = true;
}

no: Show the banner in the regular mode, without the automatic expand.

Function name to call the container expand: The name of the function that's called by the banner code to make the container change its size to expanded.
Function name to call the container collapse: The name of the function that's called by the banner code to make the container change its size to collapsed.
Function name to call the creative expand: The name of the function that's called to inform the banner code that the banner must expand.
Function name to call the creative collapse: The name of the function that's called to inform the banner code that the banner must collapse.
Styles for the banner container: Custom styles for the banner container in one string, except for the following styles: position, z-index, top, left, right, bottom, width, height, and display. For example, border: 1px solid red;. Invalid values are ignored by the browser.
Name for the class attribute of the banner container: Enter a name (or multiple names separated by a space) for the class attribute of the banner container.
Under Advertising label settings:
- In the Ad label list, select “Ad” or “Social ad”, and the label will be added to the banner. If the creative's design already includes the label, you can keep Disabled" in the drop-down list.
  
  Note
  
  Adding the Social ad label doesn't automatically define the creative content as social ad. To label creative content as a social advertisement in the state register, select Social ads contract for the corresponding contract with the end advertiser.
- In the Domain field, specify the advertiser domain, and it will be added to the label: Ad | example.com or Social ad | example.com (only if you select “Ad” or “Social ad" in the drop-down list).
To add a token to a non-clickable banner, enable the Show banner menu option in the banner settings. When the banner is served, the menu icon will be displayed in the upper right corner of it. When a user clicks this icon, the advertiser information and the copy token button appear (if ad register is enabled for the banner and a third-party token is specified).

The banner menu contains a link to the rules for using recommendation technologies. That is necessary to comply with paragraph 3, section 1, article 10.2-2 of Federal Law No. 149-FZ On information, information technologies, and information protection", dated July 27, 2006.

Note

If a banner is non-clickable (the Transition URL field is not filled in) and it is to be added to the ad register, be sure to show the banner menu. This is the only way to make the token available when serving the banner.
Settings for Russian ad register: The section is only available if the Submit data to state register procedure is selected in the campaign settings. Fill in the fields in this section to register the creative in the Yandex advertising data operator. The creative is assigned a token automatically.

Note

If a specific banner doesn't need to be added to the ad register, select Do not submit data to state register.

Contact support

Send an email