吐き出されるタグはどういう使い分けなのかというのをざっくり捉えるためのざっくりまとめ
参考元
Google サイト運営者タグの概要 - Google アド マネージャー ヘルプ
サイト上ではGoogleサイト運営者タグことGooglePublisherTagことGPTという表記で説明されている。
前提としての広告表示の動き
ページ上に広告が出される場所のことを「広告枠」と表現し、その中の広告が表示されるウェブページまたはモバイルページ上のスペースのことを「広告スロット」という。またこの広告スロットを構成するコードのことを「広告タグ」と表現する。
この広告タグにどのように広告が表示されるかは以下のとおり（前述の概要から引用）
1.ユーザーのブラウザから広告サーバーに対して、タグを設定している JavaScript の gpt.js がリクエストされます。
2. タグ設定 JavaScript により、ページのタグに設定されている広告のリクエストが作成され、広告サーバーに送信されます（SRA が有効かどうかによってリクエスト数は異なります）。
3. リクエストに含まれている広告ユニットと Key-Value が広告サーバーで認識されます。
4. 広告サーバーで最適な広告が選択され、その広告が返されます。
5. 広告タグに関連付けられた JavaScript コードにより、ページに広告が表示されます。
- Google サイト運営者タグの概要 - Google アド マネージャー ヘルプ
要約すると、「ページ上にKey-Valueと呼ばれる予備情報とセットで広告サーバに広告取得のリクエストが送信され、その結果を広告スロットに表示する」というもの。
では実際のタグがどのように関係していくかを次では説明していきます。
今回取り上げる対象のタグ
ツールより以下のようなタグが吐き出される
タグその1
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script> <script> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; </script> <script> googletag.cmd.push(function() { googletag.defineSlot('/hoge/huga/2020', [[336, 280], [300, 250], [320, 100], [320, 50], [336, 340], [300, 310]], 'div-gpt-ad-1119991111333-0').addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.pubads().setTargeting(); googletag.enableServices(); }); </script>
タグその2
<div id='div-gpt-ad-1119991111333-0'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1119991111333-0'); }); </script> </div>
考え方
大きく3つのタグ群にわかれるのでその要素ごとに説明する
1.GooglePublisherTag自体の読み込み（タグその1の前半）
下記のその1に含まれる1つ目のタグ郡はGAMの設定用のjsとなり、ライブラリを読み込み初期設定を行う。
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script> <script> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; </script>
2.スロット情報のリクエスト部分（タグその1の後半）
ここでは具体的に個々の広告スロットの情報を読み込んでいる。メソッドごとに内容を説明していく。
<script> googletag.cmd.push(function() { googletag.defineSlot('/hoge/huga/2020', [[336, 280], [300, 250]], 'div-gpt-ad-1119991111333-0').addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().setTargeting("topic","basketball"); googletag.enableServices(); }); </script>
2-1. スロット情報の設定
該当コードは以下
googletag.defineSlot('/hoge/huga/2020', [[336, 280], [300, 250]], 'div-gpt-ad-1119991111333-0').addService(googletag.pubads());
ページ内に高校を表示するための情報を取得する。メソッドとしては googletag.defineSlot(adUnitPath, size, opt_div) となっており、広告のユニット情報パス、表示する広告の表示サイズパターンの配列、実際に操作をするdivタグの名前、というような並びになっている。
2-2. シングルリクエストモードの有効化
該当コードは以下
googletag.pubads().enableSingleRequest();
シングルリクエストモードと呼ばれるものを有効化する。どういうものかは公式ドキュメントがわかりやすいので抜粋
シングル リクエスト モードを使用すると、ブラウザでは広告リクエストを 1 つずつアド マネージャー サーバーに送信する代わりに、1 回のリクエストでページ上のすべての広告ユニットの情報をサーバーに送信できるようになります。これにより保証型ロードブロッキング表示が可能になり、ページの読み込み時間が短縮されます。 - 広告タグを作成する - Google アド マネージャー ヘルプ
2-3. Key-Valueを設定する
該当コードは以下
googletag.pubads().setTargeting("topic","basketball");
Key-Valueと呼ばれる、ターゲティングするための値を設定する。こちらも公式ドキュメントがわかりやすいので抜粋
各広告呼び出しでは、setTargeting() 関数を使用してキーを渡すことができます。それぞれのキーに値を指定できます。各広告呼び出しでは、下記のとおりネットワークのニーズに応じて、スロットレベルまたはページレベルのカスタム ターゲティング パラメータを使用できます。 - GPT でターゲティングとサイズを設定する - Google アド マネージャー ヘルプ
要するに枠に対して、動的に変わる情報をセットすることで、広告の出し分けを実現する。
例では keyが "topic" valueが "basketball" としているが、これを "age" と "24" のようなユーザー属性をJSに設定できるようにすることでそれごとの出し分けなどが実現できるようになる
2-4. GPTのタグを有効化する
該当コードは以下
googletag.enableServices();
これは単純明快で ページ上の広告スロットに定義されているすべてのGPTサービスを有効にする という趣旨のタグとなる
3.表示させる場所の明示（タグその2）
header部で取得リクエストを送った広告を実際に表示させる箇所の記述.
divタグのidで指定する方式をとっているので、divのidは合わせる。
<div id='div-gpt-ad-1119991111333-0'>
そのあと、実際のレンダリングを指示するのが以下の <script> 内の記述になります。
<script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1119991111333-0'); }); </script>
display のメソッドで記述されたdivタグに対してレンダリングをするようにしています。
