GoogleAdsenceのスマホでの見切れを直す方法【CSSは不要】

グーグルアドセンスのディスプレイスクエア型の広告は端末のサイズに合わせて広告のサイズを決めてくれる便利な広告なのですが、

「スマホだと中身が広告サイズに合ってなくて見切れてる！」

こんなことありませんか？

そのまま放置していれば、クリック率は激減して間違いなく収益が下がります。

この記事では、自分でCSSを加えずにディスプレイスクエア型の広告がスマホで見切れるのを直す方法をわかりやすく教えます。

グーグルアドセンスの広告がスマホだと見切れる

一様モザイクをかけているのでわかりにくいですが、（モザイクがいるのかどうかは不明です）

私の持っている端末では以下のように広告が見切れてクリック率を確実に下げていました。

グーグルアドセンスの広告がスマホで見切れるのを直す方法

アドセンスの広告コードを修正する

方法は簡単で、記事に貼り付ける広告コードをコピペせずに少し改造します

勝手にコードを書き換えていいのか？

ここで、「勝手に書き換えたら規約違反ではないのか？」と思われる方はいらっしゃると思いますが、安心してください。

むしろ「規約違反なのでは？」と考えられることはいいことです。

アドセンス広告コードの修正について、公式のAdSenseヘルプには以下のように書かれています

禁止されているコードの改変方法

AdSense コードを以下の方法で改変することは禁止されています。

• display:none などを使用して広告ユニットを隠す（ただし、レスポンシブ広告ユニットを実装している場合を除く）
• コンテンツが隠れてしまうような方法、またはコンテンツが広告を覆い隠すような方法で AdSense 広告コードを設定する
• モバイルサイトやレスポンシブ デザインのサイトでコンテンツと広告が重なるような方法で広告ユニットを配置する
• 非表示キーワード、iframe、その他の方法を使用して広告のターゲット設定を操作する
• メールやソフトウェアで広告を配信する
• 広告の配信方法や表示方法を操作して不当に注目を集める（画面内にスライドイン表示される広告、ズームイン / ズームアウトされる広告など）
• ユーザーがモバイル ウェブページでドラッグ操作を行ったときに広告クリックを発生させる

AdSense 広告コードの修正 – AdSenseヘルプより引用

専門用語が多いので意味がわからない方もいると思いますが、要するに

この禁止されているコードの改変方法さえ守っていれば、自分の好きなように広告コードを書き変えて大丈夫ということです。

以下で解説する方法はグーグルAdsense公式に書いてあった方法なので絶対に規約違反にはなりません。

広告コードを改変する手順

1. グーグルアドセンスでディスプレイスクエア型の広告を作成

まず普通にディスプレイスクエア型の広告を広告サイズをレスポンシブルにして作成してください

2. 作成した広告のコードを確認（これは記事に貼り付けない）

一部隠してありますが、作成したコードの赤線部分を次に使います。このコードは使いません

3. 以下のコードを自分の設定に合わせて書き変える

• 赤字部分の2カ所にさっき取得したコードの同じ項目（data-ad-client、data-ad-slot）をコピペして書き変えてください
• 青字部分は自分で英数字のわかりやすい名前に変更できます（変更する場合は5カ所すべて同じものにしてください）
• 緑字部分は上から①横幅が500px以下　②横幅が500～800px　③横幅が800px以上のときの広告のサイズを表しているので、自分のサイトに合うように数値を変えられます。

（言っている意味がよくわからないという方は赤字部分のみ書き変えればOK）

<style>
.auto_ad { width: 320px; height: 100px; }
@media(min-width: 500px) { .auto_ad { width: 468px; height: 60px; } }
@media(min-width: 800px) { .auto_ad { width: 728px; height: 90px; } }
</style>
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– auto_ad –>
<ins class=”adsbygoogle auto_ad”
style=”display:inline-block”
data-ad-client=“ca-pub-9307261209790000“
data-ad-slot=”8639930000“></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4. 書き加えた上のコードを広告コードとして記事に貼り付ける

今までと同じようにこのコードを広告のコードとして記事に貼り付ければ完了です

結果

モザイクのせいでかなりわかりにくいですが、見切れるのが解決しました！

参考サイト

レスポンシブ広告コードを修正する方法 – AdSense ヘルプ