ワークスペースへ

導入ガイド

Ad Manager のバナー

Display ad slots (Google Publisher Tag)

Ad Manager の昔ながらの広告スペースです。Google パブリッシャー タグで作成し、固定サイズ、複数サイズ、レスポンシブに対応します。

  • Ad Manager
  • モバイルとデスクトップ
フォーマットを学ぶ自分のサイトを確認する
デスクトップ
スマートフォン

1分でわかる

Ad Manager のバナーとは

Ad Manager のバナーは、ページ内に固定された長方形の広告です。文章の途中、上部、横などに置きます。学校の壁に貼られたポスターのようなものです。決まった場所と決まった大きさがあり、そこを通る人は誰でも見ることができます。Ad Manager では、この確保された場所を「スロット」と呼びます。広告スペースを意味する英語です。このスペースに広告をリクエストして表示するのは GPT、つまり Google パブリッシャー タグという、サイトに設置する Google のコード ライブラリです。

手順はこうです。まず GPT に、Ad Manager のどの広告ユニットを使うか、そこにどのサイズが入るか、ページのどの小さな箱に表示するかを伝えます。この箱は div、つまり固有の名前を持つ HTML の一部です。次に GPT が広告をリクエストし、その箱の中に描画します。箱の名前は2か所で同じでなければなりません。違うと広告は表示されません。広告が表示されないときは、Google 自身もまずここを確認するよう案内しています。

サイズは3つの方法で選べます。固定サイズでは、300×250など、その大きさの広告だけが入ります。複数サイズでは、いくつかのサイズを並べると、Ad Manager がその中のどれでも選べます。レスポンシブでは、「サイズ マッピング」という表を作り、画面幅ごとに有効なサイズを指定します。大きい画面用のリストと小さい画面用のリストです。ほかに、ページの幅いっぱいに広がる流動サイズもありますが、現在はネイティブ広告専用だと Google は説明しています。

Google がこの方法を作ったのは、サイト側でコントロールできるようにするためです。各広告をどこに置くか、どのサイズを受け付けるか、いつ読み込むかを自分で決められます。ドキュメントには、ページ下部の広告を、ユーザーが近づいたときにだけ読み込む方法も載っています。これを遅延読み込みといいます。また、ページ全体を再読み込みせずに広告を更新する方法も、タイミングや宣言に関するルールとともに説明されています。Ad Manager のアカウントがあり、各スペースの場所とサイズを慎重に選びたい場合に、バナーを使う価値があります。

手順

実装の方法

  1. Ad Manager でタグを生成するAd Manager で「在庫」、「広告ユニット」の順にクリックします。広告ユニットを開いて「タグ」タブに進み、「Google パブリッシャー タグ(GPT)」を選んで「続行」をクリックします。ほかの項目を選び、「タグの結果」からタグをコピーします。
  2. head で GPT を読み込むGPT のスクリプトを、ページの head 部分に入れます。これにより、Google の広告ツールがサイトに読み込まれます。
  3. スロットを定義する同じく head で、GPT に広告ユニットのパス、受け付けるサイズ、div の名前を伝えます。レスポンシブのスロットにしたい場合は、サイズ マッピングを加えます。最後に、広告サービスを有効にします。
  4. スペースを確保した div を作るbody に、定義で使った名前と同じ div を作ります。広告が届いたときに画面が動かないよう、最大の広告を想定して、CSS で高さと幅を指定します。
  5. 広告をリクエストするdiv の直後に、div の名前を指定して表示を呼び出します。自社の在庫の広告を表示するには、ステータスが「準備完了」の有効な広告申込情報が必要です。
  6. 遅延読み込みと更新必要に応じて、ページ下部のスペースに遅延読み込みを有効にします。広告を更新する場合は、Ad Manager の［在庫］、［在庫ルール］、［パブリッシャー宣言］で宣言し、ページでも同じルールを使います。

実装例

コードと画面での表示

GPT とスロットの定義は head に入れ、表示を呼び出す div は、バナーを表示したい場所の body に入れます。
<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Tamanhos por largura de tela (slot responsivo).
    const mapping = googletag
      .sizeMapping()
      .addSize([1024, 768], [[728, 90], [300, 250]])
      .addSize([0, 0], [300, 250])
      .build();

    googletag
      .defineSlot(
        "/1234567/exemplo",
        [[728, 90], [300, 250]],
        "banner-exemplo",
      )
      .defineSizeMapping(mapping)
      .addService(googletag.pubads());

    // Carregamento lento para espaços longe da tela.
    googletag.setConfig({
      lazyLoad: {
        fetchMarginPercent: 500,
        renderMarginPercent: 200,
        mobileScaling: 2.0,
      },
    });

    googletag.enableServices();
  });
</script>

<!-- No <body>, onde o anúncio deve aparecer -->
<div id="banner-exemplo" style="min-height: 250px;"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("banner-exemplo");
  });
</script>
デスクトップ選んだ場所に、固定された長方形として表示されます。たとえば 728×90 や 300×250 です。ページと一緒にスクロールし、文章の一部と同じように動きます。
モバイルコンテンツの途中に、画面に収まる 300×250 などのサイズで表示されます。サイズ マッピングを使うと、モバイルには小さい画面用に許可したサイズだけが配信されます。

Googleのガイダンス

できることとできないこと

してよいこと

  • 固定サイズ、複数サイズのリスト、または画面幅ごとのサイズ マッピングを設定する。
  • CSS で、表示される可能性のある最大サイズ分のスペースを確保すること。Google は、これがページのガタつきを防ぐ最も効果的な方法としています。
  • 最初から見えるスペースは、優先して読み込まれるよう、head で定義する。
  • ユーザーがスクロールして初めて見える、ファーストビューより下のスペースには、遅延読み込みを使う。
  • ページ全体を再読み込みせずに、GPT の更新関数で広告を更新する。ただし、更新が Ad Manager で宣言されていることが条件です。
  • ユーザーの操作による更新では、最小間隔なしで更新する。最小間隔が必要なのは、時間またはイベントによる更新だけだと Google は定めています。

してはいけないこと

  • スロットの定義で渡した名前と違う名前を div に使う。
  • Ad Manager で宣言せずに、または誤って宣言して、広告を更新する。Google はこれを違反として扱います。
  • ウェブで、30秒未満の間隔で、時間またはイベントによる更新を行う。
  • 更新の前にスペースをクリアする。更新で広告はすでに入れ替わるので、クリアするとスペースが空白の時間が長くなるだけです。
  • ユーザーに一度も見えないスペースを更新する。視認可能率が大きく下がることがあると Google は注意しています。
  • サイズを確保せずに div を置く。広告が届いたときにコンテンツが動いてしまいます。

ヒント

正しく行うために

注意

よくあるエラー

div の名前が違う

スロットの定義と表示で渡す名前は、div の名前と同じにする必要があります。違うと、広告は単に表示されません。

広告とサイズが違う div

Google は、幅、高さ、div の名前がタグの内容と一致することを求めています。一致しないと、広告が表示されないことがあります。

準備完了の広告申込情報がない

ステータスが［準備完了］の有効な広告申込情報がないと、コードが正しくても、自分の在庫の広告は表示されません。

モバイルが空になるマッピング

Google の例では、640×480 より小さい画面には空のリストが渡され、広告が表示されません。調整せずにコピーすると、縦向きのスマートフォンでバナーが出ないことがあります。

よくある質問

複数サイズとレスポンシブの違いは何ですか？

複数サイズでは、リスト内のどのサイズも、どの画面にも表示される可能性があります。レスポンシブでは、サイズ マッピングが、画面幅ごとに有効なサイズを指定します。

通常のバナーに流動サイズを使えますか？

現在、Ad Manager が受け付ける流動タイプはネイティブ広告だけだと Google は説明しています。通常のバナーには、固定サイズ、複数サイズ、またはマッピングを使ってください。

広告を更新できる最短の間隔はどれくらいですか？

ウェブでは、時間またはイベントによる更新に最低30秒が必要です。ユーザーの操作による更新には最小間隔はありません。いずれの場合も、在庫ルールで宣言されている必要があります。

遅延読み込みは使う価値がありますか？

Google は、ファーストビューより下のスペースは後回しにすることを推奨しています。特にリソースの少ないモバイルで効果があります。上部のスペースは優先して読み込むべきです。

ライブラリ

Google の公式情報

このページの内容はすべて Google の公式ドキュメントに基づいています。原文で直接確認できます。

あなたのサイトは、このフォーマットを正しく使っていますか?

監査は、何もクリックせずに訪問者としてサイトを読み取り、修正すべき点を表示します。

監査を実行する