Google Ad Managerでは、複数の広告枠を「広告ユニット」を通じて設定できます。
同一ページ内に、複数の広告ユニットを設定する方法について記述しておきます。
headタグに [defineSlot] を広告ユニット数に合わせて設定する
同一ページ内に、Google Ad Managerを利用して複数の広告を表示する手順は
- 複数の広告ユニットを生成する
- <head>タグ内に、広告ユニットの数に応じて [deineSlot] メソッドを利用して広告枠の定義を行う
- ページ内の任意の場所に、広告枠の設定を行う
例として、以下のような2つの広告ユニットを設定したとします。
ユニットA
headタグ
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag.defineSlot('/22890521746/adtech-side', [240, 400], 'div-gpt-ad-1687321644356-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
bodyタグ
<!-- /22890521746/adtech-side -->
<div id='div-gpt-ad-1687321644356-0' style='min-width: 240px; min-height: 250px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1687321644356-0'); });
</script>
</div>
ユニットB
headタグ
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag.defineSlot('/22890521746/adtech-entry', [468, 60], 'div-gpt-ad-1687321824286-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
bodyタグ
<!-- /22890521746/adtech-entry -->
<div id='div-gpt-ad-1687321824286-0' style='min-width: 468px; min-height: 60px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1687321824286-0'); });
</script>
</div>
このようなケースの場合、ユニットA、Bの [defineSlot] 行をまとめてheadタグに記述します。今回の例の場合、以下のような形になります。
まとめたheadタグ
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag.defineSlot('/22890521746/adtech-side', [240, 400], 'div-gpt-ad-1687321644356-0').addService(googletag.pubads());
googletag.defineSlot('/22890521746/adtech-entry', [468, 60], 'div-gpt-ad-1687321824286-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
headタグの設定が完了したら、ページ内の任意の場所に、ユニットA、ユニットBの本文用タグを掲載箇所に設定します。
設定に成功すると、以下のようにページ内に複数の画像が表示されます。
defineSlot とは
Google Ad ManagerのdefineSlotメソッドは、広告スロット（Ad Slot）を定義するためのメソッドです。広告スロットは、ウェブページ上の特定の場所に広告を表示する領域を指定します。
以下のような記述形式となります。
googletag.defineSlot(adUnitPath, size, divId)
adUnitPath:- 広告ユニットのパスを指定します。広告ユニットは、広告を配置する特定の場所を識別するための一意の識別子です。
size:- 広告スロットのサイズを指定します。サイズは、広告の横幅と高さをピクセル単位で指定します。
divId広告を表示するためのHTML要素（div要素）のIDを指定します。
defineSlotメソッドは、広告スロットを定義するだけで表示される広告自体を作成するものではありません。
広告スロットを定義した後、Ad Managerの他のメソッドや機能を使用して、広告をロードし、表示する必要があります。