Windows

Html5 banners examples. Requirements for advertising materials

The format of the sent data is a ZIP archive.
The size of the archive should not exceed 150 kilobytes.
The archive can contain one HTML file and several files in JS, JSON, CSS, JPG, GIF, PNG, SVG formats.
Archives will ignore the contents of the __MACOSX folder and .DS_Store files. They are created when archiving on platforms Apple Mac OS X and promotional materials are not needed.
For the names of files and directories, it is permissible to use only the following character set:
-._~ , numbers and Latin alphabet.
All links in promotional materials must be relative paths in the ZIP archive. When working out advertising materials, there should be no external network calls. If necessary, all auxiliary JS libraries should be provided along with promotional materials.
It is necessary to minimize the number of files in the archive. The images are combined into a sprite sheet. If necessary, you can combine all JS / CSS / Image documents and include them in an HTML file. The maximum number of files is 50.
Advertising materials must work correctly in Internet browsers Explorer 9 and above, Firefox 14 and above, Safari 5 and above, Chrome 14 and above, Opera 14 and above, Yandex Browser 14 and above, Microsoft Edge. If necessary, the file should take into account the browser functionality necessary for its operation.
The advertised site should be opened in a new window only by clicking the user's left mouse button on the banner.
Transitions in the banner should receive the address of the transition to the advertiser's site by calling yandexHTML5BannerApi.getClickURLNum(1) for the first click, yandexHTML5BannerApi.getClickURLNum(2) for the second click, and so on.

// after declaring " " tags
// assign click handlers for them like this:

The transitions in the banner should use the value of the linkN parameter from the get parameters of the URL to the HTML document as follows: link1 for the first click, link2 for the second, and so on. You can use this code:
The banner file size is specified in the tag as follows:
Immediately after the tag, there should be an inclusion of the Yandex advertising library:
Allowed in promotional materials external links to some core libraries included in HTML5 development tools: Adobe Edge Animate CC , Adobe Flash CC HTML5 Canvas , CreateJS , GreenSock , Swiffy and more.
In order for external links to be valid in a banner, they must lead only to the website of the library manufacturer.
Separately, a placeholder image and ALT text (up to 100 characters) must be attached to the archive. The picture goes through a separate moderation, including the size. The image and text will be used for display in browsers that are not included in the list of supported ones from paragraph 7.
It is forbidden to use annoying malicious behavior of scripts: for example, calls to spontaneously open pop-up, change the page address, etc. It is forbidden to use browser extensions (flash / java, etc.).
advertising banner should not be reduced to a form that complicates the analysis (obfuscated).
It is assumed that the banner should behave the same, uniformly, in all environments, on all platforms, for all openings to all users, for the entire duration of the campaign.
The banner ad must meet the CPU usage requirements.
Advertising materials must comply with the requirements set forth in the document "", in paragraphs. 3-10.
Banner animation should not interfere with the user and complicate the perception of the main content of the site page (in the design it is forbidden to use abruptly moving and flashing graphic elements, flashing background, etc.).
When preparing a banner, it is not allowed to use low-quality graphic elements, including:
- deformed images and images with noise (artifacts) due to file compression,
- images with low resolution (pixels are visible on the image), images with low graphics definition.
In addition to advertising materials, MP4 videos may be uploaded (if allowed in the product). Maximum allowable size video file - 2 megabytes.
Referencing videos must be a URL JS call starting from 1. For example, for video 1
var url_video1 = yandexHTML5BannerApi.getVideoURLNum(1);
Playback must be explicitly initiated by the user. It should be possible to stop and resume playback at any time. The size of the video file must be specified. It is not allowed to play audio separately from video. For security purposes and to speed up downloading, the video file will be hosted on Yandex servers.
The advertiser can make a count of video viewing starts, for this, when the video playback button is pressed, the following javascript call should be processed:
For video 1: yandexHTML5BannerApi.reportVideoStart(1);
For video 2: yandexHTML5BannerApi.reportVideoStart(2);

With such testing, the banner should not consume more than 50% of the processor resources according to the data in the Performance tab in task manager(UpdateSpeed is set to High).
A banner is considered to be too resource-intensive if more than 50% CPU usage occurs for a noticeable amount of time (fractions/units of seconds) or peak CPU usage is more than 70%.
Usage optimization random access memory is not performed, additional utilities or resident programs are not loaded at startup. After logging in, the amount of memory occupied by various system processes, is about 62-63 MB according to Task Manager.

Friends, hello everyone. Today we will continue to create banners in Google Web Designer in HTML5 format, with a 3D effect.

And this is understandable, banners created on html5 and css3 are displayed on any screens, both on a computer, TVs, and on mobile devices. What can not be said about flash-banners.

In addition, these banners can be used enough and the banner will look great on any screen.

And given the fact that mobile devices are increasingly being used to view Internet resources, this is very important.

The main and its placement on the site, I have already told in the last article. So today I will pay attention to creating a 3D effect and cycling (replay) settings. And also consider a few settings for "events".

It is rather difficult to describe this whole process in detail, so I bring to your attention a video tutorial. So it will be much easier to master the material. And also download the archive with the project of my banner, as a good example.

Preparing to create a banner with a 3D effect.

The type of banner in the finished form ultimately depends on the preparation. The Google Web Designer editor allows you to create realistic 3D effects and all this will be written in the html code, you just need to assemble everything correctly in the visual editor.

To create a high-quality 3D effect, you must first cut blanks in Photoshop, which will later need to be joined in Google Web Designer.

As an example, I prepared the following blanks:

I made these blanks in Photoshop, but there are many similar images on the Internet. You can not strain, but take ready-made options.

Note: If you are interested in the process of creating such blanks, write about it in the comments.

It is also important to think over the overall composition of the banner and script. It depends on how the banner will be perceived in general.

Creating a 3D object in Google Web Designer.

So, by analogy with the last article, launch the editor, create a new project.

The 3D effect implies a composite image, that is, an image consisting of several pieces located in the desired projection.

These multiple images need to be combined either into a group or placed in a DIV block. And so it will be right. But, it is more convenient for me to work with the DIV side.

Step 1: Create a DIV block.

So, to create a DIV block, in the left panel, select "Tag Tool (D)".

Be sure to assign an ID. And adjust the dimensions with the section "Properties" in the right panel.

Now we need to select the block. To do this, in the left panel, select "selection tool (V)" and double-click the left mouse button on the frame of the DIV block. It will change color to red.

Step 2 Line up the images.

And now the most painstaking process begins. You need to expose all the elements of one single image.

I have the following items at my disposal:

- Upper side.

- Lateral side (consists of three separate parts).

First, place the reverse (back) side of the image and align it to the center and top edge of the banner.

In the same way, add the front side. Align and offset along the Z axis.

Since the width of the side is 4px (pixel), the front and reverse side I offset the z-axis by 2px and -2px. This will provide a gap between the images.

Note: see the screenshots for the exact offset numbers.

Next, add the side, all parts separately. For ease of placement, use the tools "3D workspace rotation" and "Scale". They will help you to accurately fit all the details.

To begin with, I propose to build all the images on the one hand, and then copy them and place them in a mirror projection on the other side.

The next step is to build the top left corner.

Now central part lateral side.

And the bottom corner on the left side.

Be sure to align all elements of the side along the Y axis by 90 0.

Now we need to copy the desired layer and paste it again, renaming and changing the location parameters, so we get the elements for the right side.

To do this, select the image in the bottom panel - press the key combination CTRL + C (copy) and paste the duplicate CTRL + V.

Let's start in the same way as the field side from top to bottom, but only for the right.

Top right cover.

I did not do the lower part, since it is not visible in the image.

The hardest work is over. Now we can start setting up the animation. As a visual demonstration, let's rotate the image.

Creating a rotation effect in Google Web Designer.

The first step is to exit the DIV block, which contains all the elements of the image. That is, we worked inside the block with specific images, and now we will need to work with all the images at the same time, controlling the DIV block.

To get started, click on the DIV button in the bottom bar.

So, on the chalet of time by clicking right button mouse, create two keyframes. It should turn out like this:

The location of the source frame on the Y scale is set to -90 0 .

The first key frame (the second in a row) is set on the Y scale to 0 0 .

The second key frame (the third one) is set on the Y scale to 90 0 .

You can check the result. To do this, click on the button play.

True, our image will make only one revolution. In order for the image to rotate constantly or make several revolutions, you need to adjust the cycling parameters.

Setting up cycling in Google Web Designer.

In the program, you can configure several options for cycling (repetitions). So you can set up repeat for all elements of the banner or for each element separately.

Also, cyclicity can be limited by the number of repetitions or made infinite.

On the bottom panel, next to each element, there are symbols "Lock", "Eye", "Reverse Arrow".

So, to set the cycle, you need to click on the symbol "Reverse Arrow". And choose either a limited number of repetitions, or an endless option.

I chose the infinite loop animation. Since I want to set up "Events" in such a way that the rotation will be stopped when the mouse cursor is hovered and will continue after the cursor is removed.

Stop rotation when hovering the mouse over the banner.

First of all on the first key frame(second in a row) set the shortcut. To do this, press the right mouse button over the frame and select the menu item "Add Label". Enter a label name and press the Enter key.

And in the next step, choose as the receiver « Page1". There will be no other options.

And the final step, choose the label that you created at the initial stage.

Save events and check. The rotation of the banner will stop when you move the mouse cursor over the frame where the label was made.

Resuming rotation after moving the mouse cursor.

In order for the rotation to continue after moving the cursor to the side, set up another event.

It is configured similarly to the previous one, with only two differences.

The event is selected "Mouse"— « mouseout".

Event - move mouse

But as an action "Timeline" — « toggleplay".

Action - Continue

So our banner with a 3D effect is ready. And you can come up with as many different effects as you like.

Just don't forget to make an event on mouse click and link opening. The banner was not created for the sake of beauty, after all.

Initially, this process may seem complicated, but after making a couple of banners, it will no longer seem so.

That's all for today, friends. I wish you all success, I look forward to your comments and see you in new articles and video tutorials.

Sincerely, Maxim Zaitsev.

HTML5 Banners

from 2 299 rub.

RUB

To order

Currently, HTML5 banners are the only actual format for full-fledged animated banner ads. This universal cross-platform format has replaced Flash-banners, which had a number of limitations and disadvantages.

The main reasons for this denial are as follows:

claims to Flash technology have accumulated in the field computer security and increased consumption of processor power of mobile devices;
some browsers have started blocking Flash by default;
on iOs mobile devices (iPhone, iPad), Flash was not provided by the manufacturer;
the popularity of Flash banner ad blockers;
refusal of further support and development of Flash technology by its owner, Adobe.

Animated HTML5 banners can be displayed without restrictions in any browser, on the screen of any device, including smartphones, tablets and media TV. This is their cross-platform and universality.

For the customer, the use of HTML5 banners means, first of all, expanding the reach of the audience without loss.

What can an HTML5 banner do?

Much. After all, this is the most advanced format that attracts the attention of the user and even interacts with him (interactive banner).

In terms of animation, such a banner can show vector animation (no scaling loss), animation of characters, photos, logos, graphs and charts, text, and even 3D animation. From an interactive point of view, an HTML5 banner can respond to user actions and offer additional content and features. In terms of media, an HTML5 banner can play videos, slides, and audio recordings. In terms of adaptability, an HTML5 banner can stretch to the full width of the page, reveal additional panels or expand to full screen.

Consider the main types of HTML5 banners.

Fixed size animated HTML5 banner.
The most popular format in most ad networks. The width and height of the required banners are selected from the list of banners accepted for placement. We will always suggest the most common sizes.

Stretching HTML5 banner (responsive, rubber).
This is a banner that can stretch to fill the entire width (sometimes height) of the screen. (More details can be found in this article)

Fullscreen HTML5 banner.
Banner that opens in full screen. As a rule, it contains a display timer and a “Close” button. Especially popular for display on mobile devices.

Often such a banner needs to be adaptive to accommodate different orientations and resolutions of the mobile device.

Expandable HTML5 banner (expand).
At first, only the start panel of such a banner (teaser) is present on the screen. When a given algorithm is executed (mouse pointing or clicking, timer or other events on the page), the second part of the banner opens with additional extended information.

HTML5 Video banner.

Depending on the settings and requirements of the advertising platform, it can show a video both with autostart and after pressing the “Play” button. May contain control and mute buttons. The video file is usually located on an external host and is loaded when shown.

Game interactive banners.
Banners that encourage the user to join the game by performing simple actions.

Such banners attract attention target audience, are of great interest, but at the same time have a number of limitations (for example, the absence of a mouseover event on mobile devices or restrictions on the use of additional scripts). We will always tell you about these features in case you are thinking of creating a gaming HTML5 banner.

“Smart” HTML5 banners (calculators).
They are used to engage and interact with the user, offering him an immediate calculation according to the required parameters and the formula specified by the internal algorithm (for example, calculating a loan, mortgage, building materials consumption, and other simple operations).

Editable HTML5 banners– in some cases, the customer needs to promptly make changes to the banners without resorting to the help of the developer (for example, frequently changing prices, percentages or quotes). We can cope with this task and display the necessary parameters directly in the banner's HTML code, where the customer can independently make changes. You can offer another solution convenient for you to output the data used by the banner to external files.

HTML5 banners that work with external data loading and API.
On the this moment many ad networks prohibit the banner from being accessed from external sources. However, if the banner is placed on a site that provides such an opportunity, the HTML5 banner can request the necessary information (text, numbers, quotes) through the site's API and, having processed them according to a given algorithm, show it to the user.

3D HTML5 banners.
Such banners attract the user's attention by creating three-dimensional models of images on the page.

An HTML5 3D banner can be implemented as a rotating object whose edges contain banner frames, as a pop-up book, or using other 3D effects.

Note that an HTML5 banner can include several of the described features at once. For example, a video banner might stretch across the full width of the page, but 3D animation expand on the page depending on the user's actions.

If you want to order an HTML5 banner on our website and creative idea requires a combination of different formats - this is always within the power of our specialists.

HTML5 banner - what is it technically?

It is best to think of an HTML5 banner as a mini website. Without exaggeration.

HTML5, which gave the name to this banner format, is a markup language for web pages, in other words, layout. And it is made up according to the same laws as any modern site. It can contain div-containers, included fonts, css styles and js scripts. The main element is a container for canvas animations. The animation itself is implemented using a java script, more often using js libraries specially designed for animation.

What's inside? Why archive? Why so many files?

That's right, because we are used to the fact that a banner is a single JPG image file or a “gif” or “flash drive”. But remember, as we wrote above, an HTML5 banner is, in fact, a mini-site. It contains many files and is delivered to the advertising platform in a zip archive. Inside the archive is the main HTML file, java script files, libraries, style sheets, and images used.

Note. In some cases, the advertising platform may require you to provide the entire banner in one file, including all used scripts and images in base-64 format. This is not a problem for an experienced developer. However, such a requirement increases the time it takes to make a banner and make changes to it. Fortunately, this requirement is rare.

How can I view the sent HTML5 banner on my computer?

Very simple. Unpack the zip archive and open the HTML file inside in your browser.

How can I check that the correct HTML5 banner was made to me?

If the banner is created for advertising Google services, then at your service is an excellent tool for checking the quality of a designer's work - an on-line HTML5 validator from Google. Using it is simple: upload your banner zip file and see if it passes the checklist. Errors will be marked with red icons. If they are not there, your developer did not work in vain and the banner is ready for placement in Google adWords or Double Click.

In the advertising networks Yandex, Mail.ru, Rambler, adFox, adRiver and others, the banner is also checked for compliance with the technical requirements after it is uploaded to the system website. In case of problems, you can get a comment from the moderator describing the error. Some sites provide the advertising customer with the ability to preview the banner on a test page.

Still, the best guarantee of the correct production of an HTML5 banner is the experience of the developer, his knowledge technical requirements advertising platforms and willingness to promptly correct errors.

Is a Java Script animation banner different?

Don't let yourself be confused. “Java Script banner”, “Canvas banner” – we are talking about what is usually called “HTML5 banner”. Depending on the developer tool, js libraries or layout rules may change, but the general assembly scheme remains the same.

How to create an HTML5 banner?

The most popular editor among designers for creating HTML5 animations is Adobe program Animate.

Google offers its own development tool - Google Web Designer. Among its advantages are the presence of many built-in templates and the ability to publish a banner directly for Google advertising services: adWords and Double Click. Among the minuses are the limited possibilities of animation.

Some designers, mostly American, use the Green Sock Animation Platform editor and libraries. However, they have not received significant distribution in our country.

Considering everything necessary components represent open source, a good specialist can create an HTML5 banner even in the simplest text editor. However, this method is not effective compared to using professional animation programs.

Technical requirements for HTML5 banners.

Requirements apply to:

total weight of the HTML5 banner in kb;
zip archive structures, number of folders and files;
list of allowed file formats;
a way to enable URL-links by clicking on a banner (banner firmware);
list of allowed js-libraries on external hostings;
the procedure and restrictions for connecting video and audio files;
requirements for the design of the frame, disclaimers, the frequency and number of animation cycles, the load on the device's processor.

And it's far from complete list requirements that our developers have to take into account in order to provide the customer with an HTML5 banner ready to be placed and start an advertising campaign without delay.

What should I do with my Flash banners created earlier?

See for yourself - the largest advertising networks no longer accept Flash banners for placement, Flash components are blocked in browsers and on iOs devices, Swiffy (the only adequate online converter of Flash banners to HTML5) has stopped working.

Automatic conversion of Flash-format to HTML5 is practically impossible - in fact, a complete manual reassembly in an HTML5 editor is required. In such a situation, the right decision would be to order the creation of a new set of animated banners, in a modern and universal format HTML5.

But what about "gifs"?

You need to understand that any GIF animation is a sequential set of picture frames, just like in video files. The GIF file may contain information about the frame rate and the number of repetitions. This limits its possibilities.

GIF banner can't work with vector graphics, create animations programmatically, adapt to the desired size, and much more that an animated HTML5 banner can easily handle.

What does this mean for the advertiser?

The problem of excess weight. Yes, even banners are subject to it. All major advertising platforms set strict limits on the weight of a banner in kilobytes.

A GIF banner is good for showing a few static frames, perhaps with a little animation of text, a button, or a photo change. In this case, the total weight of the GIF banner does not go beyond the requirements of advertising platforms.

If the animation affects the change of several hundred frames, then the weight of the gif-banner increases, as they say in English, “dramatically”, that is, dramatically. A 20-second GIF weighing several megabytes is a common thing. And I really don't like it advertising networks, who are rightly concerned about how much traffic a user will have to download to view a banner.

So, if you need a banner with a lot of animation effects, character animation, interactive, adaptive or video banner, the choice is made in favor of ordering an HTML5 banner.

Banner HTML5- a banner that displays arbitrary HTML content or an image. The HTML code can be a simple HTML page with styles and scripts. It is placed in an iframe and has limited access to the content of the site.

Using the "Banner HTML5" template, you can add a banner in two ways:
1. by preparing only the image. The presence of a link to go in the banner parameters controls the clickability of the image.
2. Having prepared an HTML creative in the editor according to the instructions: or .
If both HTML code and an image are added to the banner, then the HTML code will be displayed.

Parameters configured when adding to ADFOX:
- Width, height of the banner.
- Own css-styles for the banner container.

HTML creative development

1. Familiarize yourself with HTML code requirements

The maximum size allowed for an HTML file is 65,000 bytes.
JavaScript and CSS should preferably be placed inside the banner's HTML code. If the resulting HTML code exceeds the maximum allowable size, then you need to reduce the code by moving JavaScript and CSS into individual files:
- save js and css code into separate files with the extension .js or .css;
- files by weight should not exceed 300Kb;
- upload the files to the "Files" tab of the advertising campaign and connect the received links to the files in the HTML code.
An example of connecting js and css files:
Not allowed in HTML code relative paths to files.
There can only be one .html file per project.
Maximum allowable amount files in the project - 50;
Allowed file types in the project: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
Maximum size of each file (also valid for files inside the archive):
- 300Kb;
- 1Mb for video files.
File names must contain only numbers or letters of the English alphabet, underscores. It is not allowed to use Russian letters, spaces, quotation marks and special characters in the file name;
Russian letters cannot be used in the names of variables and objects.
The only exception is the text on the banner.
The format of the finished project - zip archive.

Image Requirements

Use high-resolution images, this will dramatically improve the quality of the banner on mobile device, although it will reduce the banner loading speed.

You can use SVG images. They are vector, which means they will look better on all devices - mobile and desktop. They also have a small file size and can be animated.

Acceptable image formats: png, gif, jpg, svg.
Maximum weight of one file: 300Kb.

2. Select the editor in which you will develop the HTML creative and click on the appropriate link. Prepare an archive with an HTML creative according to the instructions:

Adobe Animate CC Editor - Single Button Banner

Adobe Animate CC Editor - Multi Button Banner

1. Download banner template with multiple buttons

2. Create an HTML5 Canvas project in Adobe Animate (or open an existing one)

3. When adding buttons (buttons) or nested clips (movie clips) to the scene, it is important to set them instance name so that you can later add a click to the desired buttons. We recommend using names button1 - button9.

See also:

Instructions for adding a button and assigning an instance name

Button on the main stage

1. Create some object on the stage, for example, using the Rectangle Tool.
Then select it and context menu select "Convert to Symbol..."

2. In the dialog box that appears, select Type: Button, Name can be left unchanged, click Ok.

3. Give this button an Instance Name for the click to work.

4. Write the following code in Actions for this button:

Window.buttons.push(//Comma-separated paths for buttons, adding this this.button1 //End of space for buttons);

nested button

1. Let's say the button is inside another symbol, like inside a Movie Clip.
AT this example this Movie Clip is given Instance Name "name"

2. By double clicking go inside the name, there will be a nested button.

3. When specifying the path to such a button in Actions, you will need to add the Instance Name of the object after this, in which it is nested:

Window.buttons.push(//Comma-separated paths for buttons, adding this this.name.button1 //End of space for buttons);

Instructions for creating transparent buttons

1. Select the desired element and convert it to a symbol

2. Enter a name and select Type: Button

3. Double click on the symbol to navigate to it:

4. Make insert keyframe into hit frame

5. Delete contents of up, over, down frames

6. The transparent button is ready:

4. Add an Actions layer to the project (we will add the code for the buttons to it)

5. Open the coding window

Window.buttons.push(//Comma-separated paths for buttons, adding this first //End of space for buttons); setAdfox();

If the button is in the main scene, then write its instance name immediately after this, for example

This.button1

If the button is inside a nested scene, then after this, first write the instance name of the scene, and then the instance name of the button:

This.scene_instance_name.button2

An example of the resulting code in the Actions layer:

Window.buttons.push(//Comma-separated paths of buttons, adding this this.button1, this.scene_instance_name.button2 //End of space for buttons); setAdfox();

7. The first button on the line of code will call the first link from ADFOX, the second button will call the second, and so on.

Together with the HTML creative, pass the information about the correspondence between buttons and link numbers to the manager who will add the banner to ADFOX.

8. Open the publishing options and connect the template from the first paragraph and publish the project by selecting the desired directory.

9. After publishing the project, zip it in .zip format. Your creative is ready to be uploaded to the ADFOX banner.

Google Web Designer Editor

The code of this banner can be used as a basis for creating creatives in the editor.

Template contains script adfox_HTML5.js and a set of parameters for the correct operation of transitions and event counting:
%reference%, %user1%, %eventN%, where N is the event number from 1 to 30.

2. Click handling.

All events are assigned to specific animation elements through the Events tab.

To invoke actions, use the "Click Area" component.
Add it and select an event Hotspot → Tap/Click(or "Tap Area > Touch/Click" in the English version).

In the "Custom code" tab, specify the click function call.

2.1 If one jump button is used:

callclick();

2.2 If there are multiple navigation buttons:

callclick(n);

where n

2.3 If you need to trigger an event from an animation without a transition, use the following code:

CallEvent(n);

where n- number of the event to be called.

A feature of the implementation of a stretching (rubber) banner.

To make the banner stretch across the width of the container in which it will be located on the site, on the panel Properties for position and dimensions, specify percentages instead of pixels.

Also use options "Align to Container" and "Rubber layout" on the top panel tools.
If you enable Fluid Layout before using any of the alignment tools, then when the parent container is resized, all elements will align with each other and with the dimensions of the container.
In this case, you can simultaneously use both the relative sizes of elements in percentages and the absolute sizes - in pixels.

4. Project publication.

When adding a banner to ADFOX, the manager will need to know the correspondence between buttons and event numbers. For each event, the manager will prescribe its own transition link, which will then be passed to the banner code using a variable.

After publishing the project, zip it in the format .zip. Your creative is ready to be uploaded to the ADFOX banner.

Other editors

1. Banner click count

In order for ADFOX to calculate click statistics for a banner, you need to set a variable in the HTML code in the a tag for the href attribute:

%banner.reference_user1%

Also for links, use the target attribute with the %banner.target% variable in the attribute value.
If the attribute is missing, then the link will open inside the iframe, that is, the advertised site will open in the banner space.

An example of HTML code for counting clicks on a banner:

Advertiser website

In the HTML code of the banners that will be placed in mobile applications, to account for clicks, use the macro: %reference%@%banner.user1%

2. Counting clicks from multiple links in a banner

Let's say a banner has several clickable links leading to different pages advertised site, and for each of them you need to get the number of transitions.

First link Second link

Replace href attribute values with variables %request.reference%@%banner.eventN%, where instead of N there should be an event number from 1 to 28.
For example:

First link Second link

The correspondence of links and variables must be reported to the manager adding the banner to ADFOX. Since when adding a banner, you will need to specify the first link for Event 1 in the "Events" tab, and the second link for Event 2.

Adding a banner to ADFOX

To add a banner to ADFOX select desired type banner and template "HTML5 banner".

Specify banner parameters:

Archive with HTML5 creative- download the .zip archive with the project, field "HTML5 creative code" must remain empty (it will be filled with the content of your project's .html file after the banner has been added).

HTML5 creative code- download the zip-archive with the project, prepared in HTML editors or paste the HTML code.

If there are several links in the banner, add them in the tab Events at the banner, in the URL fields of the transition.
Check with the developers of the HTML creative for the correspondence between the numbers of links and events.

Reference to the measuring pixel- ADFOX pixel is used by default //banners.adfox.ru/transparent.gif, if you need to track impressions in a third-party system, delete the ADFOX pixel and provide a different link.

Creative width (px or %)- Specify the width of the banner.

Creative height (px or %)- Specify the height of the banner.

Image- upload image.
Conditions for displaying creatives:
- HTML code and image added - HTML code will be shown.
- added image - the image will be shown.
- HTML code added - HTML code will be shown.

Name class attribute container banner- specify a name (or several names separated by a space) for the class attribute of the container with the banner.

Use SafeFrame (yes|no)- safeFrame is a technology that wraps ads in a special iframe that has a strict API. SafeFrame prevents the ads it renders from collecting data and interacting with the rest of the page outside of safeFrame.
yes - enable the use of safeFrame and deny access to the web page;
no - do not include safeFrame. The banner code has access to the web page.

Styles for the banner block- custom styles for the banner container in one line. Besides style: display. For example, "border: 1px solid red;". Invalid values will be discarded by the browser.

The Internet is filled with advertisements. On many sites, this is an eye-catching advertisement for weight loss brushes, on others it is Yandex.Direct or Google AdSense. And only on some you can see beautiful banners that do not annoy users with their appearance alone. In my review, you will learn how to create a beautiful HTML5 banner yourself without any initial skills.

bannersnack is an online service for creating HTML5 and Flash banners of various formats that does not require knowledge of code and skills in working with image editors.

The service offers to create two types of banners: a regular or a random banner on page load. Also, with the help of banersnack, you can launch your advertising campaign on Google or Facebook. But first things first.

banner maker

It is in this section that you can create your first banner. The service offers banners in HTML5 or Flash format. Since everyone is trying to kill Flash, I will describe the HTML5 editor.

When you start the wizard, several ready-made templates are immediately offered:

Of course, the ability to create a banner from scratch does not disappear anywhere. At the top of the wizard, the size of the future banner is indicated:

When choosing a size, the patterns will also change. It's best to opt for a preset size rather than specifying your own, as bannersnack may eventually refuse to generate such a banner.

When creating your banner, the following editor opens:

On the left is a list of all banner slides, each of which will have its own picture and text. At the top are the tools for creating a banner, and on the right are the layer properties.

As a banner, you can add your picture, text, button, shape or video. I added an image and a button:

When you select any element, several templates will be offered, but, as always, the last word is yours:

Each layer has three property tabs. Position on the page, color, shape, etc.:

Layer click action:

You can specify a transition to the next slide or follow a link.

Animation properties when changing a slide:

When you have finished editing your banner, just click Save and choose a name for the future banner:

Then a list of all your banners will open with codes to embed on the site:

It is important to note that when you change the banner on the bannersnack site, it will also be updated on your site. You don't need to copy the embed code again.