🤷🏼 👸 📇 Tinkoff.ruのマルチフォーマットバナーとGoogle AdWordsのアダプティブバナーのレイアウトへのアプローチ 🙏🏻 ✊🏽 👂🏼

今日は、Google AdWordsでアダプティブバナーがどのように配置されるか、広告キャンペーンでバナーが1つしか描かれていない場合の対処方法について説明します。

マルチフォーマットバナー、リーダーボード1テンプレートの実装。

レスポンシブバナーの問題は、AdWordsのディスプレイバナーで既に解決されていることに気づき、このテクノロジーを徹底的に調査しました。多くの興味深い詳細が見つかりました-カットの下で。

RTBテクノロジー（Eng。Real Time Bidding ）を使用したメディア広告キャンペーンの開始に少なくとも一度対処した人は誰でも問題に直面しました。クライアントはプレースメントに240x400バナーを提供しました。ただし、 IAB標準は、リーダーボード（728x90）、インライン長方形（300x250）、モバイルリーダーボード（320x50）、ハーフページ（300x600）、バナー、大きな長方形など、少なくとも15種類のフォーマットを提供しています。

デザイナーにいくつかのフォーマットを注文すると、オーディエンスとサイトの潜在的なリストを事前に絞り込むだけでなく、これらのフォーマット間のオークションでの競争を増やすことがわかります。したがって、1つのバナー形式の広告キャンペーンの1,000インプレッションのコストは、複数の形式のキャンペーンよりもはるかに高くなります。広告キャンペーンのコストを削減するためには、デザイナーにバナーの全体を描画するよう依頼する必要がありますが、これは私たちにとってもデザイナーにとっても退屈です。

RTBトラフィックのバナーフォーマットの数

それらの多くがあります：DataMindの広告プラットフォームによると、2016年末には約1700のフォーマットがあり、潜在的なインプレッションの数は月あたり10万を超えています。

以下は、広告ユニットサイズ間のトラフィック分布の図です。ポイントが大きいほど、トラフィックが多くなります。よく知られている形式は、320x50、240x400、728x90、300x250です。しかし、大規模な広告キャンペーンでは、これらの形式では十分ではありません。

広告ユニットサイズ間のトラフィック分布図

240x400形式のバナーを1つだけ使用して広告キャンペーンを開始した場合、広告主は利用可能なすべてのトラフィックの17.22％しかカバーしません。また、すべてのIAB形式のプロモーション資料を準備すると、カバレッジは77.2％に増加します。

バナー形式による広告トラフィックの分布。 広告インプレッションの22.8％は、IAB標準に含まれていない形式で可能です

しかし、すべてを100％取得してさらに節約したい場合はどうでしょうか。すべての広告主が800x90などの形式のバナーを作成するわけではないため、この形式のオークションは、形式240x400のオークションに比べて「ホット」ではありません。

バナー広告フォーマットの普遍的な分類

以下の図では、各ポイントは特定の形式に対応しており、バナーの幅と高さはそれぞれ横軸と縦軸に沿ってプロットされています。

ロシア領のRTBトラフィックで月に10万を超える潜在的なインプレッションがあるバナー形式の散布図。 分類されたフォーマットタワー、スクエア、リーダーボード

ここでは、平面全体が3つの大きな領域に分割されています。

タワーバナー（タワー）;
正方形バナー
バナーバナー（リーダーボード）。

ダイアグラム内のポイントの動作に注意してください。これらのポイントは、勾配係数を使用して4つのラインに沿って並んでいます。

k_{- 2} = f r a c h e i g h t w i d t h = 1.78 、 k_{- 1} = f r a c h e i g h t w i d t h = 1.33 、 k_{0} = f r a c h e i g h t w i d t h = 1 、 k_{1} = f r a c h e i g h t w i d t h = 0.75 、 k_{2} = f r a c h e i g h t w i d t h = 0.56

$k _ {-2} = \ frac {height} {width} = 1.78、k _ {-1} = \ frac {height} {width} = 1.33、k_0 = \ frac {height} {width} = 1、\\ k_ {1} = \ frac {height} {width} = 0.75、k_ {2} = \ frac {height} {width} = 0.56$

数式が表示されない場合はクリックします。

画面形式の歴史的発展に何らかの関係があると思われる興味深いべき法則依存性を見つけることができます（アスペクト比を参照）。

$$ display $$ \ begin {equation} k_ {i} = \ left（\ frac {3} {4} \ right）^ {i}、i = -2、-1,0,1,2 \ end {equation} $$表示$$

数式が表示されない場合はクリックします。

このテーマについて何かアイデアがあれば、コメントで教えてください。

Towers、Square、Leaderboarsのバナー形式の分類は直感的です。各フォーマットごとに3つのHTMLテンプレートをレイアウトするだけで十分なようであり、あらゆるサイズの広告ユニットで広告資料を表示できるようになります。これは部分的に真実です。

AdWordsレスポンシブバナーの仕組み

マルチフォーマットバナーの独自の技術を開発したTinkoff.ruでは、Googleが使用する技術を調査することにしました。彼女は、メディアクエリと組み合わせてラバー組版を使用しないことが判明しました。各広告ユニットについて、リモートで非常にトリッキーなサービスがHTMLバナーの各要素の位置を提供します。これにより、要素は広告ユニット内で厳密に固定されます。広告素材を特定のサイズの広告ユニットに適応させるためにどのアルゴリズムが使用されるのか興味がありました。

研究のために、実際のマルチフォーマット広告バナーがTinkoff.ru製品の1つの広告とともに広告されました。ブロックの幅を216から1,200ピクセルに変更し、高さを36から1,200ピクセルに1ピクセルずつ変更しながら、強制的に異なるサイズのブロックで表示しました。広告スペースの幅と高さの値が異なるマルチフォーマットバナーのレイアウトの動作を約1,145百万回観察しました。そして、Googleがバナーを表示するときに使用する9つの典型的なHTMLテンプレートを明らかにしました。それらを3つのクラスに分割し、名前を付けました。

Towerクラスの場合：Tower 1とTower 2（使用されるフォントのみが視覚的に異なるため、以下ではTower 2を個別に選択しません）;
クラスSquareの場合：Square 1、Square 2、Square 3、Square 4。
Leaderboardクラスの場合：Leaderboard 1（例は記事の最初の図にあります）、Leaderboard 2、Leaderboard 3

各HTMLテンプレートの使用領域を次の図に示します。境界が双曲線（Leaderboard 3およびその他の形式の場合）で記述される実質的に非線形の領域が見つかりました。

広告スロットの幅と高さに応じて、9つのHTMLテンプレートの使用領域。 平面上の各ポイントは、使用されるテンプレートの名前によって分類されます。

領域がタワー1として分類子によってマークされているという事実は、このテンプレートのみがこの領域に正しく表示されることを意味しません。タワー1テンプレートは、Square 2の一部の領域を正常に置き換えることができます。したがって、この写真の平面のレイアウトは適応性があり、インジケーターに応じて広告キャンペーン中に変更できます。

観測結果の処理

広告ユニットのサイズに応じてテンプレートを選択するアルゴリズムは、決定木を使用して簡単にインストールできます。次の機能セットを備えたrpart Rパッケージの再帰的パーティショニングツリーと回帰ツリーを使用しました。

広告ユニット領域 $S =幅\ cdotの高さ$ ;
傾斜角 $k = \ frac {高さ} {幅}$ ;
幅 $幅$ ;
身長 $高さ$ 。

数式が表示されない場合はクリックします。

結果の決定木は測定結果を完全に正確に説明し、見た目ほど複雑ではありませんでした。ここで、ルールの実装に慣れることができます。

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 } }

生の測定値の視覚化。

グラフの上部の線に注意してください。これは、測定プロセス中に発生したエラーに関連しています。

生の測定結果の可視化

パターンの概略図

これらのテンプレートは、広告資料を表示するためにどのように見えますか？それらをチャート表の形式で提示しました。

AdWordsで使用される9つのHTMLテンプレートの概略図

記事の冒頭で書いた1700の最も人気のあるサイズを考慮すると、どのパターンが最も頻繁に使用されるかを示すことができます。トラフィックのほとんどがバナーバナーで構成されていることが判明しました。

RTBトラフィックで検査された9つのパターンの存在の頻度

Leaderboardクラスのテンプレート

リーダーボード1は最も単純なテンプレートの1つです。資産-メイン画像、ロゴ、タイトル、説明、ボタン-は順番に配置されます。 Leaderboard 2は、会社に関する追加情報を表示する、より複雑なテンプレートです。上記のチャート表の追加の短縮名アセットです。 Leaderboard 3テンプレートは、多くの場合、モバイルデバイスの広告ユニットで使用されます。スペースが限られているため、タイトルと説明の変更をアニメーション化します。これらのパターンの実装を比較します。

	480x70広告ユニットのビッグバナー1
	400x125広告ユニットのビッグバナー2
	400x100広告ユニットのビッグバナー3。 2番目のフレームは説明付きで表示されます

スクエアクラステンプレート

正方形のパターンは最も需要が少ないですが、20.35％の最大のシェアを占めています。 Square 1とSquare 4のテンプレートには視覚的な違いはほとんどありませんが、取得した分類子によると、Square 1のテンプレートはトラフィックの約0.66％を占めています。なぜこれが起こるのかは謎のままです。おそらく、上で観察した誇張は、実験的なバナーに固有の適応アルゴリズムの結果です。


300x300広告ユニットの正方形1	広告ユニット150x215の正方形2	215x250広告ユニットの正方形3	250x250広告ユニットの正方形4

タワークラステンプレート

Tower 1とTower 2のテンプレートに大きな違いは見られなかったため、最初のテンプレートのみを実装しました。


Towerテンプレートの実装

RTBでマルチフォーマットバナーを使用する

調査後、あらゆるサイズの広告ユニットで正しく表示できるユニバーサルバナーの作成を開始できます。テンプレート自体のタイプに関する情報のみを開示しましたが、各テンプレートのレイアウトは非常にシンプルで、ランプテーブルレイアウトを使用して正常に実装されています。

マルチフォーマットバナーを提供する別の問題は、いわゆるスタブの作成です。多くの場合、各HTMLバナーには画像形式のスタブが必要です。これはHTMLバナーのコンパニオンであり、何らかの理由でHTML5をレンダリングできない場合に表示されます。したがって、広告ユニットのフォーマットごとに、HTMLコードだけでなく、対応する画像も作成できる必要があります。このために使用します

キャスパーこのモジュールを使用して、記事に記載されているテンプレートのスクリーンショットテストが編成されます。

おわりに

マルチフォーマットバナーテクノロジーは何を提供しますか？まず、デザイナーを巻き込むことなく、さまざまなサイズの広告ブロックの100％について、広告スローガンやその他の資産の大規模なA / Bテストを行うことができます。多腕バンディットの多様なメカニズムを使用して、アセットとバナーテンプレート自体の特定のバリエーションをテストできます。

残念ながら、AdWordsにはレビュー済みテンプレートのインプレッション統計がありません。 AdWordsシステムはテンプレートを自動的に選択します。この記事では、その仕組みを理解しようとしました。 AdWordsで使用されているフォントサイズの選択アルゴリズムを特定できませんでした。これは各テンプレートに特有のアルゴリズムです。また、テンプレート内の各アセットの高さ/幅を固定する方法を特定することは非常に困難でした。このために、独自のソリューションを考え出しましたが、これはまったく別の話です。

Tinkoff.ruのマルチフォーマットバナーとGoogle AdWordsのアダプティブバナーのレイアウトへのアプローチ

RTBトラフィックのバナーフォーマットの数

バナー広告フォーマットの普遍的な分類

AdWordsレスポンシブバナーの仕組み

観測結果の処理

パターンの概略図

Leaderboardクラスのテンプレート

スクエアクラステンプレート

タワークラステンプレート

RTBでマルチフォーマットバナーを使用する

おわりに

More articles: