関連コンテンツユニットのデザインカスタマイズ方法【Google Adsense】

2018年10月29日 2020年1月23日 WEB

Google Adsense「関連コンテンツユニット」のデザインをカスタマイズする方法です。

通常はこんなコードになっていますが、

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

そのまま貼り付けると、

関連コンテンツ広告
100%幅のスクエアバナーと、画像+テキスト広告のパターン

このように、広告の枠も含まれた「関連コンテンツ」が自動的に表示されます。

Adsense側で勝手にデザインを決めるため、サイトまたはページごとに表示されるパターンが変わります。
ところが、カスタマイズを加えることで、関連コンテンツのレイアウトを思い通りにすることが可能です。

関連コンテンツのオプション設定

カスタマイズに必要なオプションは全部で3種類。
たとえば、次のコードは画像とテキストを横に並べて表示します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<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>

このように関連コンテンツが表示されます。

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

data-matched-content-ui-type="image_sidebyside"
⇒画像とテキストを横並びになるよう指定。

data-matched-content-rows-num="4"
⇒コンテンツの表示する”行”の数を4に指定。

data-matched-content-columns-num="1"
⇒コンテンツの表示する”列”の数を1に指定。

4行1列で画像とテキストを横並びにするという設定になります。

data-matched-content-ui-type の詳細

data-matched-content-ui-typeの設定は6パターンあり、詳細は次のとおり。

data-matched-content-ui-type="image_card_sidebyside"
画像とテキストを横に並べてカード内に表示します。

カードとは、コンテンツの枠に「影」が付いているパターンです。
コンテンツを立体的に見せることができます。

関連コンテンツの影

data-matched-content-ui-type="image_stacked"
テキストの上に画像を配置します。

関連コンテンツ

data-matched-content-ui-type="image_card_stacked"
テキストの上に画像を配置し、カード内に表示します。

data-matched-content-ui-type="text"
画像を表示せず、テキストのみ表示します。

関連コンテンツテキストのみ

data-matched-content-ui-type="text_card"
カード内にテキストのみを表示します。

レスポンシブデザインに対応する

3つのオプションの値を「,(カンマ)」で区切ると、レスポンシブ対応になります。
"モバイルの値, デスクトップの値"となるように記述し、カンマの前がモバイル、カンマの後ろPCの設定となります。

例えば次のコードでは、

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<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,image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

モバイルでは、4行1列でテキストの上に画像を配置
PCでは、2行2列でテキストの上に画像を配置

となります。

レスポンシブにするには、data-matched-content-ui-typeの値もカンマで区切る必要があります。
この例では、モバイルとデスクトップ両方でimage_stackedで表示しています。

data-matched-content-ui-type="image_stacked, image_card_sidebyside"と記述すると、デバイスごとに画像とテキストの配置を変えることが可能です。

まとめ

関連コンテンツユニットは、広告収入の収益UPに欠かせないユニットです。
どのレイアウトならクリック率が良いのか、色々なパターンを試しながら、より高い収益が得られるよう試行錯誤することも大切ですね。

Google Adsenseの収益を上げるために、コードの細かい設定も見直してみてはいかがでしょうか?

参考:
レスポンシブ対応の関連コンテンツ ユニットをカスタマイズする方法 – Adsense ヘルプ 

コメントを残す

メールアドレスが公開されることはありません。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

このサイトの管理者

ナオユ

Wordpress初心者向けにカスタマイズ方法やWEB制作のノウハウをポロッとまとめています。広告代理店→WEB制作会社→リモート勤務になり在宅ワークしながらアフィリエイトなど副業に挑戦中|子ども大好き新米パパ@H29男児|フラット35で実家を建て直し親と同居|仮想通貨投資(絶賛含み損w)