[Google Adsense]レスポンシブ広告コードを修正する方法

Google Adsenseを導入してウェブサイトに広告を掲載する際、スマホでの表示対応にひと手間かかりましたので情報を共有させていただきます。

【CSSフレームワーク】
Bootstrap4を使用

【表示テストの際の問題点】
レスポンシブウェブデザインのため、htmlをDreamweaverで編集しながら、広告表示をPCからテストしたいところですが、Firefoxの「ウェブ開発」「レスポンシブデザインモード」で確認しようとしたところGoogle側で「userAgent」を判断しているのか、広告がスマホサイズにならないため、表示確認ができませんでした。そのため、スマホ実機で確認しました。

【使用したスクリプト】
「style」タグの箇所でメディアクエリーを設定し、iPhone7、iPhone8プラスでは広告が問題なく表示されました。

「example_responsive_1」という名前でクラス指定していることがミソでした。

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 768px) { .example_responsive_1 { width: 720px; height: 120px; } }
</style>
<script async src="//pagead2.googlesyndication.com/(下に続く)
pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-format="fluid"
data-ad-layout-key="〇〇〇〇"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

【参考にしたページ】
レスポンシブ広告コードを修正する方法

関連記事

  1. Echo Dot (エコードット) - スマートスピーカー with Alexa

    [ウェブシステム開発]Alexa開発スキルを学ぶ:その3

  2. [機械学習]Amazon Personalizeで始める機械学習

  3. [AWS Amazon Connect]東京リージョンで一般提供開始

  4. Amazon Echo

    [ウェブシステム開発]Alexa開発スキルを学ぶ:その1

  5. [開発者が使いたい言語]TypeScriptとは?

  6. [Alexa スキル開発]オーディオファイル作成

  7. [CakePHP]CakePHP3インストール:PHP7.1

  8. [LaravelとCakePHPの機能比較]

最近の記事

PAGE TOP