"HORIZONS"

あなたの世界を"ちょっと"広げる情報を紹介

AdSense記事内ネイティブ広告によってスマホの記事がズレる問題を解決する方法

2017年7月からGoogle AdSenseの記事内ネイティブ広告が導入され、ブログで利用される方も増えてきました。私もこちらの"HORIZONS"で記事内ネイティブアドの導入をしてから数ヶ月が経過し、ようやく扱い方に慣れてきました。そこで今回は、数ヶ月間私も実際に頭を悩ませた「記事内広告が原因でスマホの記事が横ズレしてしまう」という問題を解決する方法をご紹介します。

そもそも横ズレが生じる原因は?

f:id:widenhorizons:20180113233059j:plain
ご存知の通り、ネイティブアドは表示端末の大きさによってその広告の表示形式を自動で設定してくれるとても便利な機能です。Googleによれば記事内広告は「縦表示のモバイル端末では、全幅サイズの記事内広告が効果的であり、記事内広告は自動的に画面幅いっぱいに表示されるようになっています」とのことで、自動的に最大横幅に広告の大きさが決められるようです。しかしながらこのことが原因で、一部のブログではモバイル端末でネイティブアドがブログ記事の枠をほんの少しはみ出てしまい、記事全体の横幅が端末が表示する最大の横幅をオーバーしてしまうという問題が生じていました。これにより記事は縦にスクロールすると左右どちらかの端の文字が切れてしまい、読み手が非常に読みづらい状態になってしまったのです。 

 

 

 

全幅サイズ表示の無効化で解消できる!!

f:id:widenhorizons:20180113225555j:plain

この問題はネイティブ広告の全幅サイズ表示を無効化することによって解決しました。GoogleAdSenseを調べると、記事内広告の全幅表示を無効化するための方法として、以下のように記事内広告の広告コードに data-full-width-responsive パラメータを追加する方法が紹介されています。

  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <ins class="adsbygoogle"
       style="display:block; text-align:center;"
       data-ad-layout="in-article"
       data-ad-format="fluid"
       data-ad-client="ca-pub-1234"
       data-ad-slot="5678"
       data-full-width-responsive="false"></ins>
  <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
  </script> 

引用元: Google AdSense, 記事内広告の全幅レイアウト

実際にご自身のブログに適応させる際は、GoogleAdSenseから記事内ネイティブ広告のコードをコピーして、上記の黄色い部分のコードを新たに追加して記事のHTML部分に貼り付けるだけ。これによって広告はネイティブアドの機能を保ったまま、モバイル端末におけるズレの問題を解決できます。

 

このようなコードの変更はGoogleAdsSenseのプログラムポリシーに従って行う必要があります。こちらの方法は実際にGoogleが提示している方法ですので初心者の方も安心して利用できます。 

端末ごとに表示サイズを変更することも可能

例えばPC端末での記事内広告は横に長く表示されますが、モバイル端末では正方形に近いレクタングルで表示されることが多く、記事の見栄えを気にして記事内広告の導入を躊躇してはいませんか?このような場合でも、Googleが以下の方法でモバイル端末・タブレット端末・PC端末でそれぞれ記事内広告のサイズを指定できるコードを紹介しています。

上記の方法では、

●画面幅 500px 未満のモバイル端末での広告ユニット
●画面幅 500px~799px のタブレット端末での広告ユニット
●画面幅 800px 以上のPC端末での広告ユニット

のサイズをそれぞれ指定するコードが紹介されています。

 

また、記事内広告をPCやタブレット端末のみで表示したい場合などの様々なニーズに合わせてコードを変更する方法が紹介されていますので、ぜひ参考にしてみてください。

 

記事内ネイティブ広告はその収益性からも高い注目を集めていますが、そのぶん自分の思い通りにならないことも多く、導入していない方も多いのではないでしょうか。今回私も上記ような方法を見つけ、自分の理想に近い形に設定することができました。同じような問題に直面している方々は是非ご紹介した方法を試してみてくださいね。