ワークスペースへ

導入ガイド

サイドレール広告

Side rail ads

幅の広いパソコン画面で、コンテンツの横の空きスペースに、画面の左端または右端に固定して表示される広告です。

  • AdSense
  • Ad Manager
  • デスクトップのみ
デスクトップ
スマートフォン

1分でわかる

サイドレール広告とは

サイドレール広告は、画面の左側または右側に貼りついて表示されます。文章の横に余った空きスペースを使います。教室の横の壁に掲示板があるところを想像してみてください。生徒は前の黒板を見ていて、掲示板は邪魔にならずにそこにあります。サイドレール広告はその掲示板です。ページをスクロールしても、広告は同じ場所にとどまります。

幅の広い画面、たとえばパソコンの画面向けに作られています。多くのサイトは、文章が中央にあり、両側に空きの帯があります。サイドレール広告はこの空きスペースを使うので、コンテンツを押しのけたり隠したりしません。AdSense では自動広告の一部で、オーバーレイ形式のグループにあり、名前は「サイドレール広告」です。クリックひとつでオンにでき、左右両方、左のみ、右のみから選べます。

Ad Manager でサイドレール広告を表示するのは GPT、つまり Google パブリッシャー タグです。これは広告をリクエストする Google のコードです。広告スペースである「スロット」を、左サイドレールまたは右サイドレールのタイプで作成します。GPT が広告の枠を自動で作り、コンテンツから5〜25ピクセルの距離に配置します。ウィンドウが小さくなってスペースがなくなると、スペースが戻るまで広告は非表示になります。

大きい画面で、サイトの両側に十分な空きスペースがある場合に向いています。GPT では、画面が1200×650ピクセル以上で、コンテンツの横に120×500ピクセル以上の空きスペースが必要です。レイアウトが画面の端から端までいっぱいに使われていると、場所が残らず、広告は表示されません。

手順

実装の方法

  1. すべてのページにコードを入れるAdSense のコードをすべてのページに入れておく必要があります。有効にしてから広告が表示されるまで、最大1時間かかることがあります。
  2. AdSense でオンにする[広告]をクリックし、サイトの横にある[編集]をクリックします。[自動広告]をオンにし、[オーバーレイ形式]で[サイドレール広告]にチェックを入れます。[サイトに適用]をクリックして、[今すぐ適用]または[先に試験運用を実施]を選びます。
  3. 表示する側を選ぶ詳細設定の[サイドレール広告の位置を選択]で、[左右両方]、[左のみ]、[右のみ]から選びます。
  4. Ad Manager では head にスロットを作るGPT で、左サイドレールと右サイドレールのタイプのアウトオブページ スロットを定義します。使う前に、それぞれが空で返っていないか確認してください。
  5. 正しいサイズを使う予約型でもプログラマティックでも、パソコン向けのサイドレールのサイズは 180x500、160x600、120x600 です。
  6. デモでテストする例に示されているデモ用のコードをページのアドレスの末尾に付けると、コードを変更せずにテスト用のサイドレール広告を確認できます。

実装例

コードと画面での表示

AdSense の属性は、保護したい部分を囲む要素に付けます。GPT のブロックは、Ad Manager を使う人の head に入れます。
<!-- AdSense: parte da página onde a barra lateral não deve sobrepor -->
<div google-side-rail-overlap="false">
  ... conteúdo ...
</div>

<!-- Ad Manager (GPT), 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(() => {
    const leftSideRail = googletag.defineOutOfPageSlot(
      "/1234567/exemplo",
      googletag.enums.OutOfPageFormat.LEFT_SIDE_RAIL,
    );
    const rightSideRail = googletag.defineOutOfPageSlot(
      "/1234567/exemplo",
      googletag.enums.OutOfPageFormat.RIGHT_SIDE_RAIL,
    );
    // Volta null se a página ou o aparelho não aceitar barra lateral
    if (leftSideRail) leftSideRail.addService(googletag.pubads());
    if (rightSideRail) rightSideRail.addService(googletag.pubads());
    googletag.enableServices();
    if (leftSideRail) googletag.display(leftSideRail);
    if (rightSideRail) googletag.display(rightSideRail);
  });
</script>

<!-- Teste: acrescente no fim do endereço da página -->
<!-- #gamLeftSideRailDemo ou #gamRightSideRailDemo -->
デスクトップパソコンでは、コンテンツの横の固定された列に、左、右、または両側に広告が表示され、ページをスクロールしても見え続けます。
モバイルモバイルでは表示されません。

Googleのガイダンス

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

してよいこと

  • AdSense で、左右両方、左のみ、右のみから選ぶ。
  • 公式の属性でページの一部を保護し、そのセクションの上にサイドレール広告が重ならないようにする。
  • トラフィックの50%を対象に、最長90日間の試験運用で事前にテストする。
  • Ad Manager で、180x500、160x600、120x600 のサイズを使って、サイドレール広告を予約型とプログラマティックで販売する。
  • AdSense でカスタム レポートを使い、「広告フォーマット」で「サイドレール広告」をフィルタして成果を測定すること。

してはいけないこと

  • サイドレール広告を出したくないページでは、サイドレール広告をリクエストしないでください。
  • GPT を iframe の中で実行しないでください。サイドレール広告には、メインウィンドウの GPT が必要です。
  • この広告を出したいなら、両側のスペースを他の要素で埋め尽くさないでください。120×500ピクセル以上の空きがないと、広告は表示されません。
  • 広告のすぐ隣にリンク、メニュー、ダウンロード ボタンを置かないでください。誤クリックを招くおそれがあると Google は注意しています。
  • Google が認めている変更以外で AdSense のコードを改変しないでください。また、広告のクリックを促さないでください。

ヒント

正しく行うために

注意

よくあるエラー

小さい画面でテストする

GPT では、画面が1200×650ピクセル以上必要です。それより小さいウィンドウでは、広告は表示されません。

端から端までのレイアウト

コンテンツが幅いっぱいに広がっていると、120×500ピクセルの空きスペースが残らず、サイドレール広告を置く場所がありません。

スロットが空で返ってきていないか確認しない

ページや端末がサイドレール広告に対応していない場合、GPT は null を返します。スロットを使う前に、コードでこれを確認する必要があります。

コードが一部のページにしかない

AdSense では、自動広告を機能させるために、コードをすべてのページに入れる必要があります。

よくある質問

サイドレール広告はモバイルに表示されますか?

いいえ。AdSense ではパソコン専用で、Ad Manager でも幅の広い画面が必要なパソコン向けの形式です。

GPT で専用の div を作る必要はありますか?

いいえ。サイドレール広告は自分で枠を作り、できるだけコンテンツの近くに配置します。

片側だけにできますか?

はい。AdSense には「左のみ」と「右のみ」のオプションがあり、GPT でも、使いたい側のスロットだけを定義できます。

広告とコンテンツの間隔はどれくらいですか?

Ad Manager では、スロットはメインコンテンツから5〜25ピクセルの位置に配置されます。

ライブラリ

Google の公式情報

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

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

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

監査を実行する