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

2018年10月29日 2018年10月30日 WEB / /

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

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

そのまま貼り付けると、

関連コンテンツ広告

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

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

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

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

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

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

Adsense関連コンテンツ

画像引用元:https://support.google.com/adsense/answer/7533385?hl=ja

各オプションの説明

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は、全部で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"と記述し、カンマの前がモバイル、カンマの後ろPCの設定となります。

例えば次のコードでは、

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

となります。

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

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

まとめ

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

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

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

 

コメント

お気軽にコメントをどうぞ。

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

ウェルスナビで損失?