September 21, 2017 at 15:09Tinkoff.ru multi-format banners and the approach to layout of adaptive banners in Google AdWords
Today I’ll talk about how amazingly adaptive banners are arranged in Google AdWords and what to do if only one banner was drawn for an advertising campaign.
Implementing a multi-format banner, Leaderboard template 1.
We noticed that the problem of responsive banner has already been solved for AdWords media banners, and we examined this technology in detail. Found a lot of interesting details - under the cut.
Anyone who at least once dealt with the launch of media advertising campaigns using RTB technology (Eng. Real Time Bidding ) was faced with a problem: the client provided a 240x400 banner for placement and that was all. However, IAB standards provide at least 15 different formats: Leaderboard (728x90), Inline rectangle (300x250), Mobile leaderboard (320x50), Half-page (300x600), Banner, Large rectangle and others.
It turns out that when we order several formats from a designer, we a priori narrow down 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 one banner format is much higher than for a campaign with several formats. To reduce the cost of the 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 there were about 1700 formats, the number of potential impressions for which exceeds 100 thousand per month.
Below is a diagram of traffic distribution between ad unit sizes. The larger the point, the more traffic it has. The well-known formats go to the top: 320x50, 240x400, 728x90, 300x250. But for a large-scale advertising campaign, these formats are not enough.
Diagram of traffic distribution between ad unit sizes
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, 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 more? Not every advertiser will make a banner of the format, for example, 800x90, therefore, the auction for this format will be less “hot” compared to the auction for the format 240x400.
In the diagram below, each point corresponds to a specific format, and the width and height of the banner, respectively, are plotted along the abscissa and ordinate axes.
Scatter chart for banner formats with potential impressions of over 100 thousand per month in RTB traffic for the territory of Russia. The formats Towers, Squares, Leaderboards
are classified here. The entire plane is divided into three large areas:
Notice how the points in the diagram behave: they line up along four lines with slope factors:
You can find an interesting power law dependence that seems to be somehow related to the historical development of screen formats (See Aspect Ratio ):
If you have any 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 is enough to lay out 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 true.
Developing our own technology of multi-format banners, we at Tinkoff.ru decided to investigate the technology that Google uses. It turned out that she does not use rubber typesetting 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, by which the element is rigidly fixed in the ad unit. We became interested in what algorithm is used to adapt advertising materials to an ad unit of a given size.
For research, a real multi-format advertising banner with advertising 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 the height from 36 to 1,200 px in increments of 1 pixel. 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 ad slot. And they revealed 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 for each HTML template are shown in the figure below. We found a substantially nonlinear region whose boundary is described by a hyperbola (for Leaderboard 3 and other formats).
Areas of use for nine HTML templates, depending on the width and height of the ad slot. Each point of the plane is classified by the name of the template 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 of Square 2. Therefore, the layout of the plane of this picture 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 easy to install using decision trees. We used Recursive Partitioning and Regression Trees from the rpart R-package with the following set of features:
The resulting decision tree absolutely accurately explained the measurement results and was not as complicated as it seemed. Here you can familiarize yourself with the implementation of the rules:
What do these templates look like for displaying advertising materials? We presented them in the form of chart tables.
Schematic representation of the nine HTML templates used in AdWords.
Considering the 1700 most popular sizes that I wrote about 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.
Frequency of presence of the nine patterns examined 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 - an additional Short Name asset in the chart table above. The Leaderboard 3 template is often used in ad units on mobile devices. Due to limited space, it animates a change of title and description. Compare the implementation of these patterns:
Square patterns are the least demanded, but they occupy their largest share of 20.35%. There are practically no visual differences between the Square 1 and Square 4 templates, however, according to the classifier, 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 some adaptive algorithm specific to our experimental banner.
We did not find significant differences between the Tower 1 and Tower 2 templates, so we only implemented the first one.
After the study, we can begin to create a universal banner that can correctly display in ad units of any size. We disclosed information only on the types of templates themselves, although the layout of each of them is quite simple and successfully implemented using a lamp table layout.
A separate problem of serving multi-format banners is the creation of so-called stubs. Often, each HTML banner must be accompanied by a stub in the form of a picture. It is a companion to the HTML banner and is displayed if rendering HTML5 for some reason is not possible. Therefore, for each ad unit format, you need to be able to create not only HTML code, but also the corresponding image. For this we use
CasperJs. Using this module, a screenshot-testing of the templates presented in the article is organized.
What gives the technology of multi-format banners? First of all, it allows large-scale A / B testing of advertising slogans and other assets for 100% of advertising blocks of different sizes without involving designers. The diverse mechanics of multi-armed bandits can be used to test specific variations of assets and banner templates themselves.
Unfortunately, AdWords doesn’t have impression statistics for the reviewed templates. The AdWords system selects a template automatically, and in this article we tried to figure out how it does it. We were unable to determine the font size selection algorithm used in AdWords - it’s 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.
Implementing a multi-format banner, Leaderboard template 1.
We noticed that the problem of responsive banner has already been solved for AdWords media banners, and we examined this technology in detail. Found a lot of interesting details - under the cut.
Anyone who at least once dealt with the launch of media advertising campaigns using RTB technology (Eng. Real Time Bidding ) was faced with a problem: the client provided a 240x400 banner for placement and that was all. However, IAB standards provide at least 15 different formats: Leaderboard (728x90), Inline rectangle (300x250), Mobile leaderboard (320x50), Half-page (300x600), Banner, Large rectangle and others.
It turns out that when we order several formats from a designer, we a priori narrow down 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 one banner format is much higher than for a campaign with several formats. To reduce the cost of the 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 there were about 1700 formats, the number of potential impressions for which exceeds 100 thousand per month.
Below is a diagram of traffic distribution between ad unit sizes. The larger the point, the more traffic it has. The well-known formats go to the top: 320x50, 240x400, 728x90, 300x250. But for a large-scale advertising campaign, these formats are not enough.
Diagram of traffic distribution between ad unit sizes
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, 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 more? Not every advertiser will make a banner of the format, for example, 800x90, therefore, the auction for this format will be less “hot” compared to the auction for the format 240x400.
Universal classification of banner ad formats
In the diagram below, each point corresponds to a specific format, and the width and height of the banner, respectively, are plotted along the abscissa and ordinate axes.
Scatter chart for banner formats with potential impressions of over 100 thousand per month in RTB traffic for the territory of Russia. The formats Towers, Squares, Leaderboards
are classified here. The entire plane is divided into three large areas:
- tower banners (Towers);
- Square banners
- banner banners (Leaderboards).
Notice how the points in the diagram behave: they line up along four lines with slope factors:
Click if the formula is not displayed.
You can find an interesting power law dependence that seems to be somehow related to the historical development of screen formats (See Aspect Ratio ):
Click if formula is not displayed.
If you have any 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 is enough to lay out 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 true.
How AdWords responsive banners work
Developing our own technology of multi-format banners, we at Tinkoff.ru decided to investigate the technology that Google uses. It turned out that she does not use rubber typesetting 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, by which the element is rigidly fixed in the ad unit. We became interested in what algorithm is used to adapt advertising materials to an ad unit of a given size.
For research, a real multi-format advertising banner with advertising 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 the height from 36 to 1,200 px in increments of 1 pixel. 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 ad slot. And they revealed nine typical HTML templates that Google uses when displaying a banner. We divided them into three classes and gave them names:
- for the Tower class: Tower 1 and Tower 2 (visually differ only in the fonts used, therefore, we will not select Tower 2 separately below);
- for the class Square: Square 1, Square 2, Square 3, Square 4;
- for the Leaderboard class: Leaderboard 1 (an example is in the first figure in the article), Leaderboard 2, Leaderboard 3.
The areas of use for each HTML template are shown in the figure below. We found a substantially nonlinear region whose boundary is described by a hyperbola (for Leaderboard 3 and other formats).
Areas of use for nine HTML templates, depending on the width and height of the ad slot. Each point of the plane is classified by the name of the template 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 of Square 2. Therefore, the layout of the plane of this picture can be adaptive and change during the advertising campaign depending on the indicators.
Processing Observation Results
The algorithm for selecting a template, depending on the size of the ad unit, is easy to install using decision trees. We used 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 absolutely accurately explained the measurement results and was not as complicated as it seemed. Here you can familiarize yourself with the implementation of the rules:
in 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.
Pay attention to the line at the top of the graph. It is associated with errors made during the measurement process.
Visualization of raw measurement results
Visualization of raw measurement results
Schematic representation of patterns
What do these templates look like for displaying advertising materials? We presented them in the form of chart tables.
Schematic representation of the nine HTML templates used in AdWords.
Considering the 1700 most popular sizes that I wrote about 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.
Frequency of presence of the nine patterns examined 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 - an additional Short Name asset in the chart table above. The Leaderboard 3 template is often used in ad units on mobile devices. Due to limited space, it animates a change of title and description. Compare the implementation of these patterns:
 | Leaderboard 1 for 480x70 ad unit |
 | Leaderboard 2 for 400x125 ad unit |
 | Leaderboard 3 for 400x100 ad unit. The second frame is shown with a description |
Square class templates
Square patterns are the least demanded, but they occupy their largest share of 20.35%. There are practically no visual differences between the Square 1 and Square 4 templates, however, according to the classifier, 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 some adaptive algorithm specific to our experimental banner.
 |  |  |  |
| Square 1 for 300x300 ad unit | Square 2 for ad unit 150x215 | Square 3 for 215x250 ad unit | Square 4 for 250x250 ad unit |
Tower Class Templates
We did not find significant differences between the Tower 1 and Tower 2 templates, so we only implemented the first one.
 |  |  |
| Implementations of the Tower template | ||
Using multi-format banner in RTB
After the study, we can begin to create a universal banner that can correctly display in ad units of any size. We disclosed information only on the types of templates themselves, although the layout of each of them is quite simple and successfully implemented using a lamp table layout.
A separate problem of serving multi-format banners is the creation of so-called stubs. Often, each HTML banner must be accompanied by a stub in the form of a picture. It is a companion to the HTML banner and is displayed if rendering HTML5 for some reason is not possible. Therefore, for each ad unit format, you need to be able to create not only HTML code, but also the corresponding image. For this we use
CasperJs. Using this module, a screenshot-testing of the templates presented in the article is organized.
Conclusion
What gives the technology of multi-format banners? First of all, it allows large-scale A / B testing of advertising slogans and other assets for 100% of advertising blocks of different sizes without involving designers. The diverse mechanics of multi-armed bandits can be used to test specific variations of assets and banner templates themselves.
Unfortunately, AdWords doesn’t have impression statistics for the reviewed templates. The AdWords system selects a template automatically, and in this article we tried to figure out how it does it. We were unable to determine the font size selection algorithm used in AdWords - it’s 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.