Multiformat banners in Tinkoff.ru and the approach to the layout of responsive banners in Google AdWords
Today I will talk about how adaptive banners in Google AdWords are amazingly arranged and what to do if only one banner was drawn for an advertising campaign.
The implementation of a multi-format banner template Leaderboard 1.
We noticed that the problem of an adaptive banner has already been resolved for AdWords media banners, and we have investigated this technology in detail. Found a lot of interesting details - under the cut.
Anyone who has dealt with the launch of media advertising campaigns using RTB technology (eng. Real Time Bidding ) faced a problem: the client provided a banner of 240x400 for placing and that’s it. However, the IAB standards provide for at least 15 different formats: Leaderboard (728x90), Inline rectangle (300x250), Mobile leaderboard (320x50), Half-page (300x600), Banner, Large rectangle and others.
')
It turns out, when we order several formats from the designer, we a priori narrow not only our audience and potential list of sites, but also increase competition at the auction among these formats. Therefore, the cost of a thousand impressions for an advertising campaign with a single banner format is much higher than for a campaign with several formats. To reduce the cost of an advertising campaign, you need to ask the designer to draw a whole bunch of banners, but this is boring for us and for the designer.
There are a lot of them: according to the DataMind advertising platform, at the end of 2016 - about 1,700 formats, the number of potential impressions for which exceeds 100,000 per month.
Below is a diagram of the distribution of traffic between the size of ad units. The larger the point, the more traffic it accounts for. In the top go well-known formats: 320x50, 240x400, 728x90, 300x250. But for a large-scale advertising campaign of these formats is not enough.
Diagram of the distribution of traffic between the size of ad units
If an advertising campaign is launched with only one banner of 240x400 format, the advertiser covers only 17.22% of all available traffic. And if you prepare promotional materials for all IAB-formats, the coverage will increase to 77.2%.
Distribution of advertising traffic by banner formats. 22.8% of ad impressions are possible for formats that are not included in the IAB standard
But what if you want to get all 100% and save? Not every advertiser will make a banner format, for example, 800x90, so the auction for this format will be less “hot” compared to the auction for the format 240x400.
On the diagram below, each point corresponds to a specific format, and the width and height of the banner are plotted along the abscissa and ordinate, respectively.
Scatter diagram for banner formats with potential displays of over 100 thousand per month in RTB traffic for the territory of Russia. Classified formats Towers, Squares, Leaderboards
Here the whole plane is divided into three large areas:
Notice how the points of the diagram behave: they line up along four lines with slope coefficients:
You can find an interesting power dependence, which seems to be somehow related to the historical development of screen formats (See Aspect Ratio ):
If you have ideas on this subject, please tell us about them in the comments.
The classification of banner formats on Towers, Squares, Leaderboars is intuitive. It seems that it suffices to impose three HTML templates for each format, and we will be able to display advertising materials in an ad unit of any size. This is partly the case.
In developing our own technology of multi-format banners, we at Tinkoff.ru decided to explore the technology that Google uses. It turned out that she does not use rubber layout in combination with media queries. For each ad unit, a remote and very tricky service gives the position of each element of the HTML banner, according to which the element is rigidly fixed in the ad unit. We wondered what algorithm was used to adapt advertising materials to an ad unit of a given size.
For the research, a real advertising multi-format banner with an advertisement for one of the Tinkoff.ru products was “caught”. It was forcibly displayed in blocks of different sizes, with the block width varying from 216 to 1,200 px, and its height from 36 to 1,200 px in 1 pixel increments. We conducted about 1.145 million observations of the behavior of the layout of a multi-format banner with different values ​​of the width and height of the advertising space. And they identified nine typical HTML templates that Google uses when displaying a banner. We divided them into three classes and gave them names:
The areas of use of each HTML template are depicted in the figure below. We found a substantially non-linear region, the boundary of which is described by hyperbole (for Leaderboard 3 formats, etc.).
Areas of use of nine HTML templates, depending on the width and height of the advertising space. Each point of the plane is classified by the name of the pattern used.
The fact that the area is marked by our classifier as Tower 1 does not mean that only this template is correctly displayed in this area. The Tower 1 template can successfully replace some areas from Square 2. Therefore, the marking of the plane of this figure can be adaptive and change during the advertising campaign, depending on the indicators.
The algorithm for selecting a template, depending on the size of the ad unit, is set up simply by using decision trees. We used the Recursive Partitioning and Regression Trees from the rpart r package with the following set of features:
The resulting decision tree accurately explained the measurement results and was not as complicated as it seemed. Here you can see the implementation of the received rules:
What do these templates look like for displaying advertising materials? We presented them in the form of schema-tables.
A schematic representation of the nine HTML templates used in AdWords
Considering the 1700 most popular sizes, which I wrote at the beginning of the article, we can indicate which of the templates are used most often. It turned out that most of the traffic consists of banner banners.
The frequency of the presence of the nine templates considered in RTB traffic
Leaderboard 1 is one of the simplest templates. Assets - the main picture, logo, title, description, button - are arranged sequentially. Leaderboard 2 is a more complex template that displays additional information about the company - the additional Short Name asset in the diagram above. The Leaderboard 3 template is often used in ad units on mobile devices. Because of the limited space, it animates the change of title and description. Compare the implementation of these templates:
Square patterns are in demand the least, but they occupy their larger share of 20.35%. The differences between the Square 1 and Square 4 templates are visually practically absent, but according to the classifier obtained, the Square 1 template accounts for about 0.66% of the traffic. Why this happens remains a mystery. Perhaps, the hyperbole that we observed above is the result of the work of some adaptive algorithm specific to our experimental banner.
We did not find significant differences between the Tower 1 and Tower 2 templates, so we implemented only the first one.
After the research, we can start creating a universal banner that can be correctly displayed in ad units of any size. We have disclosed information only about the types of templates themselves, although the layout of each of them is quite simple and is successfully implemented using a lamp table layout.
A separate problem of servicing multiformat banners is the creation of so-called stubs. Often each HTML banner must be accompanied by a blank in the form of a picture. It is a companion to the HTML banner and is displayed if HTML5 rendering is for some reason impossible. Therefore, for each format of the ad unit, you need to be able to create not only the HTML code, but also the corresponding image. For this we use
CasperJs . Using this module, screen-testing of the templates presented in the article is also organized.
What does the technology of multi-format banners give? First of all, it allows for large-scale A / B testing of advertising slogans and other assets for 100% of ad units of various sizes without attracting designers. The various mechanics of multi-armed bandits can be applied to test specific variations of assets and the banner templates themselves.
Unfortunately, in AdWords, impression statistics are not available in the context of the considered templates. The AdWords system automatically selects a template, and in this article we tried to figure out how it does it. We were unable to determine the font size algorithm used in AdWords - it is special for each template. It was also extremely difficult to identify the method of fixing the height / width of each asset in the template. For this, we came up with our own solution, but this is a completely different story.
The implementation of a multi-format banner template Leaderboard 1.
We noticed that the problem of an adaptive banner has already been resolved for AdWords media banners, and we have investigated this technology in detail. Found a lot of interesting details - under the cut.
Anyone who has dealt with the launch of media advertising campaigns using RTB technology (eng. Real Time Bidding ) faced a problem: the client provided a banner of 240x400 for placing and that’s it. However, the IAB standards provide for at least 15 different formats: Leaderboard (728x90), Inline rectangle (300x250), Mobile leaderboard (320x50), Half-page (300x600), Banner, Large rectangle and others.
')
It turns out, when we order several formats from the designer, we a priori narrow not only our audience and potential list of sites, but also increase competition at the auction among these formats. Therefore, the cost of a thousand impressions for an advertising campaign with a single banner format is much higher than for a campaign with several formats. To reduce the cost of an advertising campaign, you need to ask the designer to draw a whole bunch of banners, but this is boring for us and for the designer.
How many banner formats in RTB traffic
There are a lot of them: according to the DataMind advertising platform, at the end of 2016 - about 1,700 formats, the number of potential impressions for which exceeds 100,000 per month.
Below is a diagram of the distribution of traffic between the size of ad units. The larger the point, the more traffic it accounts for. In the top go well-known formats: 320x50, 240x400, 728x90, 300x250. But for a large-scale advertising campaign of these formats is not enough.
Diagram of the distribution of traffic between the size of ad units
If an advertising campaign is launched with only one banner of 240x400 format, the advertiser covers only 17.22% of all available traffic. And if you prepare promotional materials for all IAB-formats, the coverage will increase to 77.2%.
Distribution of advertising traffic by banner formats. 22.8% of ad impressions are possible for formats that are not included in the IAB standard
But what if you want to get all 100% and save? Not every advertiser will make a banner format, for example, 800x90, so the auction for this format will be less “hot” compared to the auction for the format 240x400.
Universal classification of advertising banner formats
On the diagram below, each point corresponds to a specific format, and the width and height of the banner are plotted along the abscissa and ordinate, respectively.
Scatter diagram for banner formats with potential displays of over 100 thousand per month in RTB traffic for the territory of Russia. Classified formats Towers, Squares, Leaderboards
Here the whole plane is divided into three large areas:
- banners towers (Towers);
- square banners (Squares);
- banners banners (Leaderboards).
Notice how the points of the diagram behave: they line up along four lines with slope coefficients:
Click if the formula is not displayed.
You can find an interesting power dependence, which seems to be somehow related to the historical development of screen formats (See Aspect Ratio ):
$$ display $$ \ begin {equation} k_ {i} = \ left (\ frac {3} {4} \ right) ^ {i}, i = -2, -1,0,1,2. \ end {equation} $$ display $$
Click if the formula is not displayed.
If you have ideas on this subject, please tell us about them in the comments.
The classification of banner formats on Towers, Squares, Leaderboars is intuitive. It seems that it suffices to impose three HTML templates for each format, and we will be able to display advertising materials in an ad unit of any size. This is partly the case.
How AdWords responsive banners work
In developing our own technology of multi-format banners, we at Tinkoff.ru decided to explore the technology that Google uses. It turned out that she does not use rubber layout in combination with media queries. For each ad unit, a remote and very tricky service gives the position of each element of the HTML banner, according to which the element is rigidly fixed in the ad unit. We wondered what algorithm was used to adapt advertising materials to an ad unit of a given size.
For the research, a real advertising multi-format banner with an advertisement for one of the Tinkoff.ru products was “caught”. It was forcibly displayed in blocks of different sizes, with the block width varying from 216 to 1,200 px, and its height from 36 to 1,200 px in 1 pixel increments. We conducted about 1.145 million observations of the behavior of the layout of a multi-format banner with different values ​​of the width and height of the advertising space. And they identified nine typical HTML templates that Google uses when displaying a banner. We divided them into three classes and gave them names:
- for the class Tower: Tower 1 and Tower 2 (they are visually distinguished only by the fonts used, therefore we will not allocate Tower 2 separately later);
- for the class Square: Square 1, Square 2, Square 3, Square 4;
- for the class Leaderboard: Leaderboard 1 (an example is in the first figure in the article), Leaderboard 2, Leaderboard 3.
The areas of use of each HTML template are depicted in the figure below. We found a substantially non-linear region, the boundary of which is described by hyperbole (for Leaderboard 3 formats, etc.).
Areas of use of nine HTML templates, depending on the width and height of the advertising space. Each point of the plane is classified by the name of the pattern used.
The fact that the area is marked by our classifier as Tower 1 does not mean that only this template is correctly displayed in this area. The Tower 1 template can successfully replace some areas from Square 2. Therefore, the marking of the plane of this figure can be adaptive and change during the advertising campaign, depending on the indicators.
Processing the results of observations
The algorithm for selecting a template, depending on the size of the ad unit, is set up simply by using decision trees. We used the Recursive Partitioning and Regression Trees from the rpart r package with the following set of features:
- Ad unit area ;
- Tilt angle ;
- Width ;
- Height .
Click if formulas are not displayed.
The resulting decision tree accurately explained the measurement results and was not as complicated as it seemed. Here you can see the implementation of the received rules:
on javascript
template_names = ['leaderboard1', 'leaderboard2', 'leaderboard3', 'square1', 'square2', 'square3', 'square4', 'tower1']; function getTemplate(w, h) { var wdh = w/h, wh = w*h; if (wdh >= 0.7000456) { if (wdh >= 2.499373) { if (wh >= 32399) { if (wdh >= 4.501131) { return template_names[0]; //leaderboard1 - bannerA } else { return template_names[1]; //leaderboard2 - bannerB } }; return template_names[2]; //leaderboard3 - smallBanner } else { if (wdh < 1.200121) { if (wdh >= 0.8999545) { if (w < 781.5) { if (wh < 32399.5) { return template_names[5];// "square3"; //smallSquare } else { return template_names[6];//"square4"; //square191 } } else { if (wdh >= 0.9995005) { return template_names[5];//"square3"; //smallSquare } else { return template_names[7];//"tower1"; //towerB } } } else { if (wh < 32399) { return template_names[5]; //"square3"; //smallSquare } else { return template_names[4]; //"square2"; //squareC } } } else { if (h< 174.5) { if (wdh >= 2.002874 && wh >= 32392.5) { return template_names[1];//"leaderboard2"; //bannerB } return template_names[5];//"square3"; //smallSquare } else { if (w < 601.5 && wdh < 1.531339) { return template_names[3];//"square1"; //squareA } return template_names[4];//"square2"; //squareC } } } } else { return template_names[7];//"tower1"; //towerA + towerB } } and visualization of raw measurements.
Notice the line at the top of the graph. It is associated with errors made in the measurement process.
Visualize raw measurement results
Visualize raw measurement results
Schematic representation of templates
What do these templates look like for displaying advertising materials? We presented them in the form of schema-tables.
A schematic representation of the nine HTML templates used in AdWords
Considering the 1700 most popular sizes, which I wrote at the beginning of the article, we can indicate which of the templates are used most often. It turned out that most of the traffic consists of banner banners.
The frequency of the presence of the nine templates considered in RTB traffic
Templates from the Leaderboard class
Leaderboard 1 is one of the simplest templates. Assets - the main picture, logo, title, description, button - are arranged sequentially. Leaderboard 2 is a more complex template that displays additional information about the company - the additional Short Name asset in the diagram above. The Leaderboard 3 template is often used in ad units on mobile devices. Because of the limited space, it animates the change of title and description. Compare the implementation of these templates:
 | Leaderboard 1 for ad block 480x70 |
 | Leaderboard 2 for ad block 400x125 |
 | Leaderboard 3 for ad block 400x100. A second frame is shown with a description. |
Patterns from the Square class
Square patterns are in demand the least, but they occupy their larger share of 20.35%. The differences between the Square 1 and Square 4 templates are visually practically absent, but according to the classifier obtained, the Square 1 template accounts for about 0.66% of the traffic. Why this happens remains a mystery. Perhaps, the hyperbole that we observed above is the result of the work of some adaptive algorithm specific to our experimental banner.
 |  |  |  |
| Square 1 for ad unit 300x300 | Square 2 for ad unit 150x215 | Square 3 for ad unit 215x250 | Square 4 for ad unit 250x250 |
Templates from the Tower class
We did not find significant differences between the Tower 1 and Tower 2 templates, so we implemented only the first one.
 |  |  |
| Tower Pattern Implementations | ||
Using a multi-format banner in RTB
After the research, we can start creating a universal banner that can be correctly displayed in ad units of any size. We have disclosed information only about the types of templates themselves, although the layout of each of them is quite simple and is successfully implemented using a lamp table layout.
A separate problem of servicing multiformat banners is the creation of so-called stubs. Often each HTML banner must be accompanied by a blank in the form of a picture. It is a companion to the HTML banner and is displayed if HTML5 rendering is for some reason impossible. Therefore, for each format of the ad unit, you need to be able to create not only the HTML code, but also the corresponding image. For this we use
CasperJs . Using this module, screen-testing of the templates presented in the article is also organized.
Conclusion
What does the technology of multi-format banners give? First of all, it allows for large-scale A / B testing of advertising slogans and other assets for 100% of ad units of various sizes without attracting designers. The various mechanics of multi-armed bandits can be applied to test specific variations of assets and the banner templates themselves.
Unfortunately, in AdWords, impression statistics are not available in the context of the considered templates. The AdWords system automatically selects a template, and in this article we tried to figure out how it does it. We were unable to determine the font size algorithm used in AdWords - it is special for each template. It was also extremely difficult to identify the method of fixing the height / width of each asset in the template. For this, we came up with our own solution, but this is a completely different story.
Source: https://habr.com/ru/post/335952/
All Articles