アドセンスの関連コンテンツをカスタマイズして表示形式を変える方法

先日ようやくAdSense(アドセンス)の関連コンテンツユニットが収益化されて広告が表示されるようになりました。

効果絶大！ついにアドセンスの関連コンテンツユニットが収益化可能に

広告が表示されない関連コンテンツユニットが解放されてから収益化できるようになるまで約2か月半かかりました。

以前は雲の上の存在に思えた関連コンテンツユニットが解放される条件も緩くなっていますが、嬉しいことに変わりはありません。

けれど最近スマホ表示で関連コンテンツユニットの表示が崩れ、下の方の関連記事はサムネイル画像が表示されないだけでなく、途中で途切れてしまっています。

※いつのまにか表示は正常になり、現在はリンク広告のようなものが表示されています。

そこでレスポンシブ対応の関連コンテンツユニットをカスタマイズして表示形式を整えることに挑戦してみることにしました。

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

関連コンテンツユニットを収益化できるようになった日に、関連コンテンツユニットのカスタマイズに関する新着情報がアドセンスの管理画面に表示されました。

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

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

リンクされているヘルプ記事を読んでみると、レスポンシブ対応の関連コンテンツユニットは許可された範囲内でカスタマイズができるそうです。

そして「レイアウトを変更」したり、「列や行」を変えたえり、「モバイルと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-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

アドセンスのヘルプ記事を熟読すると、関連コンテンツユニットの基本のコードにパラメータを追加すればレイアウトを変更したり、列や行を自由に設定できるようです。

よく見ると「data-ad-format=”autorelaxed」の記入位置だけ変わっています。

元々の位置でパラメータを追加しても上手く反映されなかったので、例示通りに1番最後にこのコードを持ってくる必要があるようです。

関連コンテンツユニットをカスタマイズするには、このコードが基本の形になります。

列と行を変更する

data-matched-content-rows-num="任意の数字"

このコードで関連コンテンツの行を、

data-matched-content-columns-num="任意の数字"

このコードで関連コンテンツの列を指定するそうです。

そして関連コンテンツのスタイルも指定しないと表示されないようです。

試しにデフォルトのスタイルのコードを指定して4行3列のレイアウトにカスタマイズしてみます。

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

基本のコードにこのパラメータを追加してみました。

すると関連コンテンツユニットが3列4行で表示されるようになりました。

ただ、この方法だとPCとスマホで同じレイアウトで表示されるらしく、スマホ表示でも3列になってしまいます。

PCとモバイルの表示形式をそれぞれ指定する

data-matched-content-rows-num="3,3"
data-matched-content-columns-num="1,4"
data-matched-content-ui-type="image_stacked"

数字を「,」で区切ると、前の数字がモバイルで後ろの数字がPCの表示になるようです。

この例だとモバイルでは3×1、PCでは3×4の表示になります。

ただ、数字を変えて何度も挑戦しましたが、上手くいきませんでした（笑）

原因はわかりませんが、テーマと関連があるのかもしれません。

別の方法でスマホとPCの表示を切り替える

<!-- 関連コンテンツ -->

<?php if (wp_is_mobile()) :?>
スマホ用のコード
<?php else: ?>
PC用のコード
<?php endif; ?>
<!-- 関連コンテンツ終了 -->

テーマのアドセンスのコードを記述しているなら、条件分岐タグでスマホとPCの表示を切り替えることになります。

ただ、関連コンテンツを表示できるようになったブログはSimplicityを使っています。

Simplicityの場合はテーマを編集しなくても、記事下にウィジェットで簡単にスマホ表示とPC表示を切り替えることができます。

Simplicityの場合はPC用とモバイル用のテキストウィジェットが用意されています。

PCに表示させたいコードをPC用テキストに、モバイルで表示させたいコードはモバイル用のテキストにコードをペーストすればPCとモバイルの表示を切り替えられます。

スマホ表示をデフォルトにした理由

関連コンテンツユニットの下の方が途切れてしまうのは自分だけだと思っていましたが、Simplicityを使用している他の人のブログを見ても関連コンテンツユニットが途中で途切れています。

そのため、SimplicityのSNSボタン下のウィジェットの幅の大きさの問題なのかと思っていました。

けれどもっといろんな人のサイトを見てみると、関連コンテンツユニットをデフォルトで使用しているサイトは全て途中で途切れているような気がします。

この記事を書いている段階では、どうやらアドセンスの関連コンテンツユニット自体の問題のようです。

さすがにGoogleがこのままの状態を放置するわけないと思うので、当分デフォルトで使用して様子を見ることにします。

けれどそれ以上に、スマホではなるべく関連コンテンツユニットをデフォルトで使いたい大きな理由があります。

デフォルトで使いたい1番の理由

関連コンテンツユニットはスマホでは試験的？に、新しい表示形態が採用されます。

少し前までは関連コンテンツユニットの下にリンクユニットのようなものが表示されていました。

当時関連コンテンツユニットの収益化が解放されていなかったので、関連コンテンツユニットの下にリンクユニットを貼り付けていると勘違いしていました。

関連コンテンツの下にアドセンスを貼るのは可能？スマホ画面で同時に表示される問題

現在はリンクユニットのようなものは表示されず、関連コンテンツユニットの1番上だけ大きなブログカードになっています。

このように関連コンテンツユニットのスマホ表示では試験的な試みがなされるので、なるべくデフォルトの方がいいような気がします。

ということで、スマホはデフォルトのままでPC表示だけスタイルを変えてみることのしました。

まとめ

関連コンテンツユニットをAMPページに表示させる場合は、AMPページ用にコードを修正する必要があります。

AMP用のアドセンス関連コンテンツユニットの作成とCocoonに実装する方法

関連コンテンツユニットはカスタマイズ性が高く、自分の好みに表示形式を変更できるので面白いと思います。

面白さと比例して収益も上がれば言うことはないと思いますが、そんな簡単に上がったら誰も苦労しないと思います（笑）。

今日のたつじんへの一歩

たつじんｗ

サイトにマッチするようにカスタマイズできる広告が増えてきましたが、美術が2の自分には難しいです（笑）。
サイトデザインと同じで、カスタマイズの時間と記事を書く時間を考えて作業しないといけないと思います。