関連コンテンツのカスタマイズと表示不具合の対処方法【アドセンス】

おはモニ。
どうもひめたそん@himetasonです。
最近よくいただく質問について今回は書いていきます。

Googleアドセンスの関連コンテンツユニットをカスタマイズ

さて以前にもアドセンスについては記事にしました。

アドセンスの収益倍増。成果の出た種類や配置を説明します。【ブログ】

収益化については上記記事を参考にしていただければと思います。
アドセンスの内の1つのユニットである、

関連コンテンツ。

こちらのセッティングについて最近よく質問、相談をされるので記事にすることにしました。
非常に簡単なので短めになると思います。
利用している人や悩んでいる人の参考になれば幸いです。

関連コンテンツはカスタマイズできる

まず最初にこの広告ユニットは条件を満たさないと使用できないので注意です。
使用できる場合はユニットの見た目、表示内容をある程度カスタマイズが出来ます。
自分のサイトにマッチするようにデザインや表示件数を変更することができるのですね。

例えばカード型で3列3行にしたり、横長にして1行5列にしてみたり。

カスタマイズ方法は色んなところで紹介されていると思いますが念のために紹介します。

data-matched-content-rows-num="3"
data-matched-content-columns-num="3"
data-matched-content-ui-type="image_sidebyside"

こちらをコードの</ins>(insの閉じタグ)手前に追加します。

上から順に、列数、行数、スタイルと言う順番です。

上記の場合は3行3列で横並びのスタイルになります。
数字はそのままで簡単ですがスタイルについては何種類かありGoogle公式で紹介されているのでご参考にしてください。

Google公式ヘルプ

そして上記コードの数字部分をカンマで区切り、スマホとPCでの表示を変えることができます。
例えば行数の部分に”4,3″と書くとスマホでは4行、PCでは3行という感じですね。

さて今回はこのスマホとPCで表記を分けたい人にいただいた質問をきっかけに記事を書いているのです。

関連コンテンツをスマホとPCで表示を変えると、一方(あるいは両方)が表示されない

まさにそのままの内容なのですがそんな質問や相談を受けることがあります。
もしそんな症状に悩まされている場合おそらくですがスタイル指定に問題があるかもしれません。

スタイルを指定している場合、列と行のみカンマで区切ると片一方が表示されない場合があります。

というより当方が試した限りでは表示されません。

なのでスタイルもしっかりカンマでスマホ、PC両方に指定してあげましょう。
例としてはこんな感じです。

data-matched-content-rows-num="4,3"
data-matched-content-columns-num="2,3"
data-matched-content-ui-type="image_sidebyside,image_sidebyside"

この例ではスマホ4列2行でPCは3列3行、どちらも横並びスタイルになります。
片一方表示されないと困っている方はこの部分のミスが多いので自分のコードを確認してみてください。
コードミスがなければしっかり表示されると思います。

あとがき

ということで関連コンテンツのカスタマイズについてまとめました。
コードに不慣れだと困惑することもあるかもしれないので参考にしていただければと思います。

このユニットは本当に優秀でアドセンスマネタイズには欠かせない存在と個人的には思っています。
解放されている人は試す価値ありですので是非活用してください。
また自身のサイトデザインに合わせることも大事なのでカスタマイズしましょう。

それでは今回はこの辺で。
ではまた。

トップへ