スマホサイズの時にアドセンス広告を非表示にする正しい書き方

自分が作ったWEBサービスの収益化として、Adsenseを利用している人も多いのではないでしょうか。

最近はレスポンシブ対応の広告もあるので、それを使えばデバイスのサイズに合わせて広告サイズを自動で調整してくれます。

しかし、中には「スマホでは広告を表示したくない」という人もいるかもしれません。

そんなとき、どのようにコードを書いていますか？ 広告をdivで囲って、display:noneのスタイルを当ててませんか？

それは、Googleが推奨する書き方ではないので、場合によっては警告メッセージが来るかもしれません。

そこで、この記事ではスマホで広告を非表示にする場合は、どのように書けば良いのかを解説します。

デバイスのサイズによって広告を非表示にする場合の書き方

正しい書き方は次のようになります。

<ins class="adsbygoogle 任意のクラス名（今回はad-sidebarとする）"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

.ad-sidebar {
    display:inline-block; 
    width: 728px; 
    height: 90px; 
}
@media (max-width: 400px) { 
    .ad-sidebar { 
　　　　display: none; 
 　　} 
}

Googleアドセンスのコードにinsタグがあるので、そこにクラス名を１つ追加します。

そして、CSS側でデバイスのサイズによってdisplay:noneにすればOKです。

上記の例では400pxで広告が非表示になるようになっていますが、ここの数字は自分のサイトのサイズに合わせて調整してください。

参考
レスポンス広告コードを修正する方法Adsenseヘルプ