以下に、パソコンおよびモバイル向けの Google パブリッシャー タグ（GPT）を作成するためのコード例を示します。Google タグ生成ツールを使用すると、タグを自動生成できます。
デベロッパーや、GPT の高度な実装が必要な場合は、API リファレンスと実装例（遅延読み込みなど）をご覧ください。
Google パブリッシャー タグのサンプルコード
GPT には、次の 2 つのセクションのコードを実装します。
- GPT の設定はウェブページの
<head>に記述します。 - 個々の広告スロットの呼び出しは、
<body>の関連セクションに配置します。
このサンプルは情報提供のみを目的としています。ウェブサイトへのコード実装については、デベロッパーに依頼することをおすすめします。
GPT の設定
次のコード例には、GPT JavaScript ライブラリの呼び出し、広告スロットの定義、Key-Value ターゲティングなどが含まれています。
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
3 ～ 6 行目: アド マネージャーで使用される Google パブリッシャー タグ（GPT）ライブラリを、SSL/HTTPS を使用して非同期で読み込みます。これにより、非同期で処理する必要のある関数（通常は広告の呼び出し）のリストを処理するコマンドキューが作成されます。コードのこの部分を編集する必要はありません。 |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
9 行目:
|
|
10 |
.addService(googletag.pubads()) |
11 |
.setTargeting("interests", ["sports", "music", "movies"]); |
12 |
googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1") |
13 |
.addService(googletag.pubads()) |
14 |
.setTargeting("gender", "male") |
| 15 | .setTargeting("age", "20-30"); |
|
11、14、15 行目: GPT でターゲティングとサイズを設定する方法もご覧ください。 |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
16 行目: ページレベルで設定されている Key-Value ターゲティングは、すべての広告スロットに継承されます。スロットレベルの Key-Value と同様に、1 つのキーに複数の値を関連付けることができます（ |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
17 行目: |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
23 行目（省略可）: 複数サイズのタグを使用している場合は省略することをおすすめします（その場合、この要素のサイズにはレンダリング時のクリエイティブのサイズが設定されます）。省略しない場合は、配信の対象となる最も大きなクリエイティブが収まるサイズにしてください。広告タグのサイズが 1 つの場合は、クリエイティブの読み込みまでこのパラメータを使ってコンテナ要素を展開表示しておくと、クリエイティブのレンダリング時に他のページ要素が移動することがありません。 |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
8、25、32 行目: 関数呼び出しをコマンドキューに追加して、ページの読み込み時に非同期で処理します。 |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
9、12、23、26、30、33 行目: ここでは名前に乱数が使用されていますが、これは Google パブリッシャー タグで広告リクエストを個々に識別するためのものではありません。広告リクエストの識別は Google パブリッシャー タグ ライブラリを使って自動的に行われます。また、同じページに同じ名前の div 要素が何度も出現しないように注意すれば、複数のページで同じ名前を使用してもかまいません。 アド マネージャーの広告枠構造、広告ユニットの階層、広告ユニットでターゲット設定が継承される仕組みの詳細については、広告枠の概要をご覧ください。 |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
ウェブページのヘッダーを編集できない場合
ウェブサイトの <header> を変更せずに GPT を使用することもできます。
方法 1: インライン GPT
ページのヘッダーで広告ユニットを定義するのではなく、インラインタグを使用して、広告ユニットが表示されるページ上の場所に広告ユニットを定義します。インラインタグでは、GPT 広告スロットの定義とリクエスト（GPT ライブラリの読み込みなど）全体を 1 つの <script> タグ内に含めます。
広告タグでは Google パブリッシャー タグ JavaScript ライブラリが使用されるため、広告タグのコードを追加する前にこのライブラリを読み込むコードを追加する必要があります。
このインライン Google パブリッシャー タグの例は、SRA には対応していません。
Google サイト運営者タグ JavaScript ライブラリを呼び出す
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
インライン広告タグのサンプル
<div id="div-gpt-ad-1234567891234-0">
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
.addService(googletag.pubads())
.setTargeting("Gender", "Male");
googletag.enableServices();
googletag.display('div-gpt-ad-1234567891234-0');
});
</script>
</div>
方法 2: すべてのコードをウェブページの本文に配置する
従来の GPT の実装方法を使用します。ただし、広告スロットの定義は HTML のヘッダーではなく本文に配置します。
ライブラリを読み込んで広告スロットを定義するコードは、そのスロットで広告をリクエストする前に呼び出す必要があります。このコードはページのヘッダーと本文に分かれておらず、順序を正しく指定する必要があるため、実装はより複雑になる可能性があります。しかし、この方法には SRA を使用できるという利点があります。
JavaScript を使用せずにタグなしリクエストを作成する
広告タグの代わりにタグなしリクエストを使用して、アド マネージャーで入稿されたエンコード前のクリエイティブ コードをリクエストできます。タグなしリクエストは通常、セットトップ ボックスや、Google タグ設定および SDK がサポートされない環境など、カスタムの解析と表示が必要な場合に使用します。