レスポンシブ広告が見切れる 改修〜確認まで

こんにちは。


これまで、Googleアドセンスのユニットの広告サイズを固定にしていましたが


先日、Googleアドセンス画面上で「最適化案で提案されることを導入すると収益が◯◯%上がりますよ。」というメッセージを受け取り


提案された通り、固定サイズのユニットをレスポンシブ広告に変更してます。



今回はレスポンシブ広告にしたことで発生した問題と解消方法について

レスポンシブ広告にしたことで発生した問題



画像の通り見切れました


そもそも固定にしていたのが、見切れるから




私の使っているテーマ

・左側:コンテンツ部分

・右側:サイドバー width: 33.33333%;

この割合となっていますがレスポンシブだと、レイアウトに合わせて調整してはくれないようです。



右側がコンテンツ部分、もしくは、サイドバーが存在しないとこういったことにはならないんでしょうね



「固定に戻す」でもいいですが、収益◯◯%アップの可能性は試したい


ということで、見きれない方法がないかいろいろと試してみました

解消方法

cssで解決しました。


cssのメディアクエリは画面の幅やサイズごとにcssを定義できます



□期待する表示

・デスクトップPCで見た場合
 サイドバーがあるため、コンテンツ部の幅は 64%


・モバイル端末で見た場合
 サイドバーが下のレイアウトになるので幅は 100%




▽定義したコード

<style>
     @media (max-width: 320px) {
          div.adunit2 { width: 100%; }
     }
     @media (min-width: 800px) {
          div.adunit2 { width: 64%; }
     }
</style>
<div class="adunit2">
     <script async src="adsbygoogle.js"></script>
     <ins class="adsbygoogle"
          style="display:block"
          data-ad-client="ca-pub-XXXXXXXXXXXX"
          data-ad-slot="XXXXXXXXXXXX"
          data-ad-format="auto"
          data-full-width-responsive="true"></ins>
     <script>
     (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
</div>
@media (max-width: 320px)幅 0px 〜 320px まで
@media (min-width: 800px)幅 800px 〜

実際の効果

CSSが効いているのが確認できました!(喜び

レスポンシブ広告に変えたことで、実際にクリックされるようになったか

よく考えてみると私のサイトだと収益の効果は実感できません


2 ~ 3年後、目に見えてわかるようになれば自分のサイトでのABテストを試してみたいですね


まずはGoogleアドセンスの提案に乗っかってみます。

返信する