検索
検索をクリア
検索終了
Google アプリ
メインメニュー

Google サイト運営者タグの例

ここでは、パソコンとモバイル向けの Google サイト運営者タグの例を紹介します。Google サイト運営者タグを自動的に生成するには、Google タグ生成ツールの使用方法をご確認ください。

この記事の内容は以下のとおりです:

非同期 Google サイト運営者タグの例

非同期 Google サイト運営者タグの作成に使用する完全なコード例を以下に示します。このタグには、非同期 GPT 広告リクエストで使用する一般的な機能や構文が数多く含まれています。

Google サイト運営者タグの作成方法の詳細については、DFP でのタグの作成に関する記事をご覧ください。

1 <html>
  • 3~8 行目: DFP が使用する Google サイト運営者タグ(GPT)ライブラリを SSL / HTTPS で非同期に読み込む定型文です。これにより、非同期で処理される関数(通常は広告の呼び出し)のリストを処理するコマンドキューが作成されます。サイト運営者がコードのこの部分を変更する必要はありません。

  • (省略可)9~13 行目: AdSense を配信する広告スロットのページレベルの属性を設定します。ここでの設定は、DFP や AdSense で設定されたスタイルよりも優先されます。これは DFP で設定できるため、あまり使用されません。GPT で AdSense のパラメータを設定する方法について詳しくは、デベロッパー向けドキュメント.set() 関数に関する説明をご覧ください。

  • 10、15、32、39 行目: 非同期レンダリングを使用する場合は、最初の定型スクリプトの後のすべてのスクリプトを googletag.cmd.push 関数(10 行目)でラップします。そうすると、この関数がコマンドキューに追加され、ページ読み込みが非同期で処理されるようになります。詳しくは、同期レンダリングと非同期レンダリングの違いに関する記事をご覧ください。

  • 16 行目: "/1234/travel/asia" は、ネットワーク コード(1234)とターゲット広告ユニット(travel/asia)を指定します。ネットワーク コードは、DFP の [管理者] タブで確認できます。

    [728, 90] は、広告スロットのクリエイティブ サイズを設定します。これは、この広告スロットにどのサイズのクリエイティブが配信可能かを示します。複数のサイズを指定するには構文 [[width1, height1], [width2, height2], [width3, height3]] を使用します。また、ここで指定したすべてのサイズは、ターゲットに設定される広告ユニットと関連付けておく必要があります。そうすると、特定のスロットに基づいてリストを絞り込むことができます。複数サイズの広告スロットを使用する場合は、DFP に表示される順序と同じ順序でスロットサイズを宣言する必要があります。詳しくは、スロットの定義と順序に関する記事をご覧ください。

  • 16、19、30、33、37、40 行目: "div-gpt-ad-123456789-0" は、head 要素で定義された広告スロットとページ上の広告スロット(クリエイティブ配信先の body 内の div タグ)のマッチング方法を示します。広告スロットには同じ名前であればどのような名前でも指定できますが、タグ生成ツールでは "div-gpt-ad-[乱数]-0""div-gpt-ad-[乱数]-1" のような名前が使用されます。この方法で、広告スロットを同じような名前でまとめつつ区別しています。ページの特定位置には一貫して同じ <div> ID を使用することが重要です。この ID は、さまざまな分野の最適化に使用されます。

    ここでは名前に乱数が使用されていますが、これは Google サイト運営者タグで広告リクエストを個々に識別するためのものではありません。広告リクエストの識別は Google サイト運営者タグ ライブラリを使って自動的に行われます。また、1 つのページ上に同じ名前の div 要素が何度も出現するのでなければ、ページ間で同じ名前を使用してもかまいません。

    DFP の広告枠構造、広告ユニットの階層、広告ユニットでターゲット設定が継承される仕組みの詳細については、広告枠の概要をご覧ください。

  • 18、21、22、23 行目: .setTargeting() 関数を使用してスロットレベルの Key-Value ターゲティングを設定します。1 つのキーに対して複数の値を関連付けることができます。最初の例("key", ["value1", "value2", "value3"])をご覧ください。複数のキーをターゲットに設定する場合は、関数を複数回呼び出します。2 番目の例(gender=maleage=20-30)をご覧ください。Google サイト運営者タグで Key-Value パラメータを設定する方法の詳細については、.setTargeting() 関数についてのドキュメントと、「Google サイト運営者タグでターゲティングとサイズを設定する」をご覧ください。

  • 23 行目: googletag.pubads().setTargeting("topic","basketball"); は、ページレベルの Key-Value ターゲティングを設定します。ページレベルで設定されている Key-Value ターゲティングは、すべての広告スロットに継承されます。スロットレベルの Key-Value と同様に、1 つのキーに複数の値を関連付けることができます("key", ["value1", "value2", "value3"])。GPT で Key-Value パラメータを設定する方法について詳しくは、デベロッパー向けドキュメント.setTargeting() 関数に関する説明と、GPT でのターゲティングとサイズの設定に関する記事をご覧ください。

  • 24 行目: googletag.pubads().enableSingleRequest(); は、シングル リクエスト アーキテクチャ(SRA)を有効にします。1 回の呼び出しでページ上のすべての広告スロットを呼び出す場合はこの行を追加します(これにより、保証型ロードブロッキングが可能になります。また、1 回の呼び出しで広告をまとめて呼び出すので、ページのパフォーマンス向上が見込めます)。残念ながら現時点の SRA では、Google のプログラム可能な広告(GPA)はサポートされていません。

  • 30 行目:(省略可)style="width: 728px; height: 90px" はクリエイティブがレンダリングされる前の要素に設定されるサイズです。複数サイズのタグを使用している場合は省略することをおすすめします(その場合、レンダリング時には選択したクリエイティブのサイズがこの要素のサイズに反映されます)。指定する場合は、配信の対象となる最も大きなクリエイティブが収まるサイズにしてください。ただし、広告タグのサイズが 1 つの場合は、この要素をコンテナ要素としてエキスパンドして、クリエイティブの読み込みに備えることができます。そうすると、クリエイティブのレンダリング時に他のページ要素が移動することがありません。

2 <head>
3 <script async="async" src="https://www.googletagservices.com/tag/js/gpt.js">
4 </script>
5 <script>
6   var googletag = googletag || {};
7   googletag.cmd = googletag.cmd || [];
8 </script>
9 <script>
10   googletag.cmd.push(function() {
11     googletag.pubads().set("adsense_background_color", "FFFFFF");
12   });
13 </script>
14 <script>
15   googletag.cmd.push(function() {
16     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")
17       .addService(googletag.pubads())
18       .setTargeting("interests", ["sports", "music", "movies"]);
19     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
20       .addService(googletag.pubads())
21       .setTargeting("gender", "male")
22       .setTargeting("age", "20-30");
23     googletag.pubads().setTargeting("topic","basketball");
24     googletag.pubads().enableSingleRequest();
25     googletag.enableServices();
26   });
27 </script>
28 </head>
29 <body>
30   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
31     <script>
32       googletag.cmd.push(function() {
33          googletag.display("div-gpt-ad-123456789-0");
34       });
35     </script>
36   </div>
37     <div id="div-gpt-ad-123456789-1">
38     <script>
39       googletag.cmd.push(function() {
40          googletag.display("div-gpt-ad-123456789-1");
41       });
42     </script>
43   </div>
44 </body>
45 </html>
 

同期 Google サイト運営者タグの例

同期 Google サイト運営者タグの作成に使用するコード全体の例を以下に示します。このタグには、同期 GPT 広告リクエストで使用する一般的な機能や構文が数多く含まれています。

同期広告タグを使用するとページ コンテンツの読み込みが遅くなる可能性があるため、同期リクエストは無効にしておき、代わりに非同期タグを使用することをおすすめします。非同期タグの詳細と、同期広告タグを引き続き使用した方がよいケースについてご確認ください。
document.write() を使用して外部スクリプトを動的に読み込む場合、2G などの低速接続でアクセスするユーザーには、メインページのコンテンツが表示されるまでに数十秒の遅れが生じる可能性があります。この理由からも、同期レンダリングではなく非同期タグを使用することをおすすめします。2G と document.write() に関する問題について
1 <html>
  • 3~4 行目: DFP が使用する Google サイト運営者タグ JavaScript ライブラリを非同期に読み込む定型文です。必要に応じて SSL / HTTPS が使用されます。これにより、非同期で処理する必要のある関数(通常は広告の呼び出し)のリストを処理するコマンドキューが作成されます。サイト運営者がコードのこの部分を変更する必要はありません。

  • (省略可)5~7 行目: AdSense を配信する広告スロットのページレベルの属性を設定します。ここでの設定は、DFP や AdSense で設定されたスタイルよりも優先されます。これは DFP で設定できるため、あまり使用されません。GPT で AdSense のパラメータを設定する方法について詳しくは、デベロッパー向けドキュメント.set() 関数に関する説明をご覧ください。

  • 9~12 行目: "/1234/travel/asia"は、ネットワーク コード(1234)とターゲット広告ユニット(travel/asia)を指定します。ネットワーク コードは、DFP の [管理者] タブで確認できます。

    [728, 90] は、広告スロットのクリエイティブ サイズを設定します。これは、この広告スロットにどのサイズのクリエイティブが配信可能かを示します。複数のサイズを指定するには構文 [[width1, height1], [width2, height2], [width3, height3]] を使用します。また、ここで指定したすべてのサイズは、ターゲットに設定される広告ユニットと関連付けておく必要があります。そうすると、特定のスロットに基づいてリストを絞り込むことができます。複数サイズの広告スロットを使用する場合は、DFP に表示される順序と同じ順序でスロットサイズを宣言する必要があります。詳しくは、スロットの定義と順序に関する記事をご覧ください。

    9、12、23、25、28、30 行目: "div-gpt-ad-123456789-0" は、head 要素で定義された広告スロットとページ上の広告スロット(クリエイティブ配信先の body 内の div タグ)のマッチング方法を示します。広告スロットには同じ名前であればどのような名前でも指定できますが、タグ生成ツールでは "div-gpt-ad-[乱数]-0""div-gpt-ad-[乱数]-1" のような名前が使用されます。この方法で、広告スロットを同じような名前でまとめつつ区別しています。ページの特定位置には一貫して同じ <div> ID を使用することが重要です。この ID は、さまざまな分野の最適化に使用されます。

    ここでは名前に乱数が使用されていますが、これは Google サイト運営者タグで広告リクエストを個々に識別するためのものではありません。広告リクエストの識別は Google サイト運営者タグ ライブラリを使って自動的に行われます。また、1 つのページ上に同じ名前の div 要素が何度も出現するのでなければ、ページ間で同じ名前を使用してもかまいません。

    DFP の広告枠構造、広告ユニットの階層、広告ユニットでターゲット設定が継承される仕組みの詳細については、広告枠の概要をご覧ください。

  • 11、14、15、16 行目:(省略可) .setTargeting() 関数を使用してスロットレベルの Key-Value ターゲティングを設定します。1 つのキーに対して複数の値を関連付けることができます。最初の例("key", ["value1", "value2", "value3"])をご覧ください。複数のキーをターゲットに設定する場合は、関数を複数回呼び出します。2 番目の例(gender=maleage=20-30)をご覧ください。Google サイト運営者タグで Key-Value パラメータを設定する方法の詳細については、.setTargeting() 関数についてのドキュメントと、「Google サイト運営者タグでターゲティングとサイズを設定する」をご覧ください。

  • 16 行目: googletag.pubads().setTargeting("topic","basketball"); は、ページレベルの Key-Value ターゲティングを設定します。ページレベルで設定されている Key-Value ターゲティングは、すべての広告スロットに継承されます。スロットレベルの Key-Value と同様に、1 つのキーに複数の値を関連付けることができます("key", ["value1", "value2", "value3"])。GPT で Key-Value パラメータを設定する方法について詳しくは、デベロッパー向けドキュメント.setTargeting() 関数に関する説明と、GPT でのターゲティングとサイズの設定に関する記事をご覧ください。

  • 17 行目: googletag.pubads().enableSingleRequest(); は、シングル リクエスト アーキテクチャ(SRA)を有効にします。1 回の呼び出しでページ上のすべての広告スロットを呼び出す場合はこの行を追加します(これにより、保証型ロードブロッキングが可能になります。また、1 回の呼び出しで広告をまとめて呼び出すので、ページのパフォーマンス向上が見込めます)。多くのメリットがある SRA ですが、残念ながら現時点の SRA では、Google のプログラム可能な広告(GPA)はサポートされていません。

  • 18 行目: クリエイティブを同期でレンダリングするために、googletag.pubads().enableSyncRendering(); を追加します。これは、各広告リクエストの完了を待ってからページのレンダリングを継続するようサービスに指示するものです。

  • 23 行目:(省略可)style="width: 728px; height: 90px" はクリエイティブのレンダリング前に要素に設定されるサイズです。複数サイズのタグを使用している場合は省略することをおすすめします(その場合、レンダリング時には選択したクリエイティブのサイズがこの要素のサイズに反映されます)。指定する場合は、配信の対象となる最も大きなクリエイティブが収まるサイズにしてください。ただし、広告タグのサイズが 1 つの場合は、この要素をコンテナ要素としてエキスパンドして、クリエイティブの読み込みに備えることができます。そうすると、クリエイティブのレンダリング時に他のページ要素が移動することがありません。

2 <head>
3 <script src="https://www.googletagservices.com/tag/js/gpt.js"> 
4 </script>
5 <script type="text/javascript">
6     googletag.pubads().set("adsense_background_color", "FFFFFF");
7 </script>
8 <script>
9     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")
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");
16     googletag.pubads().setTargeting("topic","basketball");
17     googletag.pubads().enableSingleRequest();
18     googletag.pubads().enableSyncRendering();
19     googletag.enableServices();
20 </script>
21 </head>
22 <body>
23   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
24     <script type="text/javascript">
25       googletag.display("div-gpt-ad-123456789-0");
26     </script>
27   </div>
28   <div id="div-gpt-ad-123456789-1">
29     <script type="text/javascript">
30       googletag.display("div-gpt-ad-123456789-1");
31     </script>
32   </div>
33 </body>
34 </html>
 

ウェブページのヘッダーを編集できない場合

ウェブページのヘッダーを修正せずに Google サイト運営者タグを使用することもできます。

オプション 1: ページのヘッダーではなく広告ユニットが表示されるページ上の場所に広告ユニットを定義します。これをインラインタグと言います。インラインタグでは、GPT 広告スロットの定義とリクエスト(GPT ライブラリの読み込みなど)全体が 1 つの <script> タグ内に含められます。主な制限事項として、インラインタグでは SRA がサポートされていません。広告スロットをインラインで定義するには、次の例を使用します。

非同期インライン Google サイト運営者タグの例

このインライン Google サイト運営者タグの例では、SRA はサポートされていません。

Google サイト運営者タグ JavaScript ライブラリを呼び出す

<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
 var googletag = googletag || {};
 googletag.cmd = googletag.cmd || [];
</script>

広告タグの例 1: 非同期インラインタグ

<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: 非同期の短縮インラインタグ(この方法では広告スロットレベルのターゲティングはサポートされていません)

<div id='div-gpt-ad-1234567891234-0'>
  <script>
    googletag.cmd.push(function() {
      googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
    });
  </script>
</div>
同期インライン Google サイト運営者タグの例

このインライン Google サイト運営者タグの例では、SRA はサポートされていません。

Google サイト運営者タグ JavaScript ライブラリを呼び出す

<script type="text/javascript">
 (function() {
   var useSSL = 'https:' == document.location.protocol;
   var src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js';
   document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
 })();
</script>

広告タグの例 1: 短縮インラインタグ(この方法では広告スロットレベルのターゲティングはサポートされていません)

<div id='div-gpt-ad-1234567891234-0'>
  <script type='text/javascript'>
    googletag.pubads().enableSyncRendering();
    googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
  </script>
</div>

広告タグの例 2: 同期インラインタグ

<div id='div-gpt-ad-1234567891234-0'>
  <script type='text/javascript'>
    googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
      .addService(googletag.pubads())
      .setTargeting("Gender", "Male");
    googletag.pubads().enableSyncRendering();
    googletag.enableServices();googletag.display('div-gpt-ad-1234567891234-0');
  </script>
</div>

広告タグでは Google サイト運営者タグ JavaScript ライブラリが使用されるため、広告タグのコードを追加する前にこのライブラリを読み込むコードを追加する必要があります。例には、このライブラリを読み込むコードも含まれています。

オプション 2: 従来の GPT の実装方法を使用します。ただし、広告スロットの定義は HTML のヘッダーではなく本文に配置します。この場合、コードを正しい順序で配置する必要があります。ライブラリを読み込んで広告スロットを定義するコードは、そのスロットで広告がリクエストされる前に呼び出す必要があります。コードをページのヘッダーと本文に分けて配置するのではなく、コードの順序を管理する必要があるため、この方法では実装がより複雑になる可能性がありますが、SRA を柔軟に使用できるようになります。

ページレベルで AdSense フォーマットをオーバーライドする(省略可)

ほとんどの場合、AdSense 広告用のフォーマットは DFP や AdSense で設定済みです。個々のページでこのフォーマットを上書きする場合は、タグに次のコードを挿入します。

非同期タグの場合:

<script>
  googletag.cmd.push(function() {
    googletag.pubads().set("adsense_background_color", "FFFFFF");
  });
</script>

 

同期タグの場合:

<script>
  googletag.pubads().set("adsense_background_color", "FFFFFF");
</script>

JavaScript ではない Google サイト運営者タグを使用して 1x1 のトラッキング ピクセルを作成する

GPT で使用するインプレッション トラッカーを作成するには:

  1. インプレッション数をトラッキングする広告ユニットとして、新しい広告ユニットを作成するか、既存の広告ユニットを選択します。

  2. 1x1 の広告申込情報を作成し、透明ピクセルのイメージ クリエイティブを追加します。

  3. トラッキング広告ユニットを 1x1 の広告申込情報のターゲットに設定します。

  4. インプレッション ピクセルを呼び出す非 JavaScript の GPT タグを作成します。

    非 JavaScript のタグ形式を使用して 1x1 インプレッション トラッキング ツールを作成するためにクリエイティブ コードに追加するコードの例を次に示します。

    <img src='http://pubads.g.doubleclick.net/gampad/ad?iu=/1234/ad_unit&sz=1x1&t=&c=12345678'/>
  5. インプレッション ピクセルタグは、次の 2 つのうちいずれかの方法で使用します。

    • 該当のページに配信されるカスタム クリエイティブまたは第三者クリエイティブにタグを追加します。その場合は、クリエイティブの [設定] タブで、[コード] ボックスの一番上にタグを追加します。

    • ウェブページに直接タグを追加します。

JavaScript 以外を使って URL を作成する方法の詳細については、非 JavaScript 環境で広告を配信する方法についての記事をご覧ください。

この記事は役に立ちましたか?
改善できる点がありましたらお聞かせください。