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

Google サイト運営者タグの例

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

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

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

非同期 Google サイト運営者タグの例を以下に示します。ここでは、GPT の非同期広告リクエストでよく使われる機能と構文の多くについて説明しています。DFP でのタグの作成方法について

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

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

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

  • 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 タグ)を照合するための名前です。両方の広告スロットで一致していれば、どのような名前でも付けることができます。Google のタグ作成ツールの場合、「div-gpt-ad-[乱数]-0」、「div-gpt-ad-[乱数]-1」のように名前が付けられます。ページの特定位置にある <div> には一貫して同じ ID を使用してください。これはさまざまな分野の最適化に使用されます。

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

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

  • 18、21、22、23 行目: .setTargeting() 関数を使用してスロットレベルの Key-Value ターゲティングを設定します。1 つのキーに対して複数の値を関連付けることができます。最初の例("key", ["value1", "value2", "value3"])をご覧ください。複数のキーをターゲットにするには、2 番目のケース(gender=maleage=20-30)のように関数を複数回呼び出します。

    GPT で Key-Value パラメータを設定する方法については、デベロッパー向けドキュメントの .setTargeting() 関数の説明をご覧ください。GPT でターゲティングとサイズを設定する方法もご覧ください。

  • 23 行目: googletag.pubads().setTargeting("topic","basketball"); は、ページレベルの Key-Value ターゲティングを設定している部分です。ページレベルで設定されている Key-Value ターゲティングは、すべての広告スロットに継承されます。スロットレベルの Key-Value と同様に、1 つのキーに複数の値を関連付けることができます("key", ["value1", "value2", "value3"])。

  • 24 行目: googletag.pubads().enableSingleRequest(); は、シングル リクエスト アーキテクチャ(SRA)を有効にしています。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 タグ)を照合するための名前です。両方の広告スロットで一致していれば、どのような名前でも付けることができます。Google のタグ作成ツールの場合、「div-gpt-ad-[乱数]-0」、「div-gpt-ad-[乱数]-1」のように名前が付けられます。ページの特定位置にある <div> には一貫して同じ ID を使用してください。これはさまざまな分野の最適化に使用されます。

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

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

  • 11、14、15、16 行目:(省略可) .setTargeting() 関数を使用してスロットレベルの Key-Value ターゲティングを設定します。1 つのキーに対して複数の値を関連付けることができます。最初の例("key", ["value1", "value2", "value3"])をご覧ください。複数のキーをターゲットにするには、2 番目のケース(gender=maleage=20-30)のように関数を複数回呼び出します。

    GPT で Key-Value パラメータを設定する方法については、デベロッパー向けドキュメントの .setTargeting() 関数の説明をご覧ください。GPT でターゲティングとサイズを設定する方法もご覧ください。

  • 16行目: googletag.pubads().setTargeting("topic","basketball"); は、ページレベルの Key-Value ターゲティングを設定している部分です。ページレベルで設定されている Key-Value ターゲティングは、すべての広告スロットに継承されます。スロットレベルの Key-Value と同様に、1 つのキーに複数の値を関連付けることができます("key", ["value1", "value2", "value3"])。

  • 17 行目: googletag.pubads().enableSingleRequest(); は、シングル リクエスト アーキテクチャ(SRA)を有効にしている部分です。1 回の呼び出しでページ上のすべての広告スロットを呼び出す場合はこの行を追加します(これにより、保証型ロードブロッキングが可能になり、ページのパフォーマンス向上が見込めます)。現時点で、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> タグ内に含めます。以下で、インラインで広告スロットを定義する例をご覧ください。

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

非同期インライン 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.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>

広告タグの例 2: 短縮インラインタグ(広告スロットレベルのターゲティングには対応していません)

<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: 従来の GPT の実装方法を使用します。ただし、広告スロットの定義は HTML のヘッダーではなく本文に配置します。ライブラリを読み込んで広告スロットを定義するコードは、そのスロットで広告をリクエストする前に呼び出す必要があります。このコードはページのヘッダーと本文に分かれておらず、順序を正しく指定する必要があるため、実装はより複雑になる可能性があります。しかし、この方法には SRA を使用できるという利点があります。

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

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

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

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

  3. 1x1 の広告申込情報のターゲットに、ステップ 1 で作成した広告ユニットを設定します。

  4. インプレッション ピクセルを呼び出し、ステップ 1 で作成した広告ユニット指定する GPT タグ(JavaScript 以外のタグ)を作成します。次の例をご覧ください。

    <img src='http://pubads.g.doubleclick.net/gampad/ad?iu=/1234/ad_unit&sz=1x1&t=&c=12345678'/>

    JavaScript 以外の URL を生成する方法について

  5. 次のいずれかの方法でインプレッション ピクセルタグを使用します。

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

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

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