関連コンテンツ

レスポンシブ対応の関連コンテンツ ユニットをカスタマイズする方法

レスポンシブ対応の関連コンテンツ ユニットを特定のレイアウトで表示したい場合は、広告コードにパラメータを追加します。ここでは、関連コンテンツ ユニットのレイアウトを変更し、ユニット内に表示するおすすめコンテンツの行数と列数を指定するためのパラメータをご紹介します。

これらのパラメータを使用すると、モバイルと PC にそれぞれ異なるレイアウトを設定することもできます。たとえば、レイアウト パラメータに値を 1 つだけ指定した場合、モバイルでも PC でも、同じレイアウトで関連コンテンツ ユニットが表示されます。一方、レイアウト パラメータに値を 2 つ指定すると、最初の値はモバイル、2 番目の値は PC に適用され、それぞれ異なるレイアウトで関連コンテンツ ユニットが表示されます。

この設定方法を使用できるのは、関連コンテンツ ユニットがレスポンシブ対応の場合のみです。また、関連コンテンツ ユニットをカスタマイズするには、すべてのパラメータを設定する必要があることにご注意ください。広告コードを変更したら、各種端末やさまざまなサイズの画面で関連コンテンツ ユニットをテストし、正しく表示されることを確認してください。

この記事で説明されている例は、AdSense 広告コードの許可されている変更方法です。これらの方法で関連コンテンツのコードを修正した場合は、AdSense プログラム ポリシー違反とみなされません。

関連コンテンツ ユニットのレイアウトを変更する

関連コンテンツ ユニットにテキストと画像をどのように配置するかを指定するには、レイアウト パラメータ(data-matched-content-ui-type)を使用します。たとえば、画像とテキストを横に並べて表示したり、テキストの上に画像を表示したりできます。

指定可能なレイアウトは次のとおりです。

画像とテキストを横に並べて表示

画像とテキストを横に並べて表示するレイアウトです。このレイアウトを選択するには、広告コードに data-matched-content-ui-type="image_sidebyside" パラメータを追加します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Image and text side by side layout

画像とテキストを横に並べてカード内に表示

画像とテキストを横に並べてカード内に表示するレイアウトです。このレイアウトを選択するには、広告コードに data-matched-content-ui-type="image_card_sidebyside" パラメータを追加します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_card_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Image and text side by side with card layout

テキストの上に画像を配置

テキストの上に画像を配置するレイアウトです。このレイアウトを選択するには、広告コードに data-matched-content-ui-type="image_stacked" パラメータを追加します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_stacked"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Image stacked above text layout

テキストの上に画像を配置してカード内に表示

テキストの上に画像を配置し、カード内に表示するレイアウトです。このレイアウトを選択するには、広告コードに data-matched-content-ui-type="image_card_stacked" パラメータを追加します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_card_stacked"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Image stacked above text with card layout

テキストのみ

画像を表示しない、テキストのみのレイアウトです。このレイアウトを選択するには、広告コードに data-matched-content-ui-type="text" パラメータを追加します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="text"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

text-only layout

カード内にテキストを表示

カード内にテキストのみを表示するレイアウトです。このレイアウトを選択するには、広告コードに data-matched-content-ui-type="text_card" パラメータを追加します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="text_card"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Text with card layout

関連コンテンツ ユニット内の行数と列数を指定する

関連コンテンツ ユニットには、おすすめのコンテンツが縦横に並んで表示されます。パラメータを使用すると、関連コンテンツ ユニット内の行数と列数を指定できます。たとえば、2×2 の正方形にしたり、4×1 の縦型コラムにしたりできます。

行数を設定するには data-matched-content-rows-num パラメータを使用し、列数を設定するには data-matched-content-columns-num パラメータを使用します。パラメータと data-matched-content-ui-type の両方を一緒に設定する必要があります。

:
  • 行数と列数の設定にはいくつかの制約があります。関連コンテンツ ユニットに表示できるおすすめコンテンツの合計数は 1~30 です。表示しようとしているおすすめコンテンツの数が 1 より少ない場合、または 30 より多い場合、関連コンテンツ ユニットには何も表示されません。
  • 状況によっては、指定した数の行と列を表示できないことがあります。たとえば、指定した列数が多いにもかかわらず、関連コンテンツ ユニットの幅が狭い場合は、ユーザー エクスペリエンスを損なうことなく、そのスペース内におすすめコンテンツが適切に表示されるよう、行数や列数が自動的に調整されます。

行と列の設定例

4×1(モバイルと PC)

このサンプルコードでは、4 行 1 列、合計 4 件のおすすめコンテンツを表示する関連コンテンツ ユニットを作成します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4x1 grid

2×2(モバイルと PC)

このサンプルコードでは、2 行 2 列、合計 4 件のおすすめコンテンツを表示する関連コンテンツ ユニットを作成します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="2"
     data-matched-content-columns-num="2"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

2x2 grid

3×3(モバイルと PC)

このサンプルコードでは、3 行 3 列、合計 9 件のおすすめコンテンツを表示する関連コンテンツ ユニットを作成します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="3"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3x3 grid

レスポンシブ対応サイト: 4×1(モバイル)、2×2(PC)

このコードでは、4 行 1 列(モバイル)または 2 行 2 列(PC)の関連コンテンツ ユニットを作成します。サイトがレスポンシブ対応の場合は、この設定を使用することをおすすめします。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="4,2"
     data-matched-content-columns-num="1,2"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4x1 grid

2x2 grid

フィードバックをお寄せください

関連コンテンツ ユニットのカスタマイズについて、皆様のご意見をお待ちしております。お使いいただいた感想や改善点などをこちらのフォームからお送りください。

困ったときに

関連コンテンツ ユニットをカスタマイズした後、おすすめコンテンツが期待どおりに表示されない場合もあります。ここでは、関連コンテンツ ユニットに関する一般的な問題とその解決方法をご紹介します。

関連コンテンツ ユニットに何も表示されない

次の 2 つの理由が考えられます。

  • 関連コンテンツ ユニットに表示しようとしているおすすめコンテンツの数が 1 より少ない、または 30 より多い。関連コンテンツ ユニットの行数と列数を変更し、表示するおすすめコンテンツの合計数が 1~30 になるようにしてください。
  • 設定したおすすめコンテンツ数に比べて、関連コンテンツ ユニットが大きすぎる。この場合、関連コンテンツ ユニットの幅を小さくしてください。

関連コンテンツ ユニットに表示されるおすすめコンテンツの数が設定した数より少ない

指定した数のおすすめコンテンツをすべて表示できるスペースがないときに、このような問題が発生します。たとえば、多数のおすすめコンテンツを設定したにもかかわらず、関連コンテンツ ユニットの幅が狭い場合や、配信先デバイスの画面が小さい場合は、そのスペースに合わせて行数と列数が自動的に調整されます。関連コンテンツ ユニットの幅を変更するか、モバイル用と PC 用で設定を分け、それぞれに適した行数または列数を指定してください。

おすすめコンテンツがテキストしか表示されない

関連コンテンツ ユニットが狭すぎて、設定したおすすめコンテンツを適切に表示できない可能性があります。関連コンテンツ ユニットの幅を広くしてください。

コンソールを使用して、関連コンテンツ ユニットのエラーを見つける

関連コンテンツの広告コードを修正したら、それが適切かどうかをブラウザのコンソールで確認できます。たとえば、広告コードに必要なパラメータが設定されていない、パラメータに無効な値が含まれているなどのエラーを見つけることができます。

Chrome をお使いの場合、DevTools コンソールで広告コードをテストする方法は次のとおりです。

  1. 関連コンテンツ ユニットが追加されているページを開きます。
  2. Ctrl + Shift + J(Windows / Linux)または Cmd + Opt + J(Mac)を押します。
  3. [Console] パネルでエラー メッセージを確認します。

 

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