AMPページでAdsenseのリンクユニットを正しく表示する方法

2018年12月25日 2018年12月28日 WEB制作 ,
ナオユ

AMP for WordPressでブログをAMP化して、AMPページ用にリンクユニットのコードを書き換えたけど表示されないよ!

それは、AdsenseのAMP用広告コードに原因があります。

実は、Adsense公式のAMP 対応広告ユニットの作成方法に記載されている広告の設置方法では、リンクユニットを正常に表示することができません。

公式では、通常の広告コードを、次のAMP用コードに変換して使用する方法を勧めています。

<amp-ad width="100vw" height=320
  type="adsense"
  data-ad-client="ca-pub-1234567891234567"
  data-ad-slot="1234567890"
  data-auto-format="rspv"
  data-full-width>
    <div overflow></div>
</amp-ad>

元の広告コードからdata-ad-clientdata-ad-slotの値をコピペして使います。

こちらの記事でも詳しく説明しています。

AMP for WordprssdeでGoogleAdsenseの広告が表示しなくなった時の対処方法

ところが、この広告コードの何がいけないのかと言うと、widthを100%や100vwなど「%」や「vw」の単位にするとリンクユニットが表示できません(バグ?)

width=320のように数値をピクセル(px)固定することで表示できます。
もしくは、最初からwidthの値を指定しなければ、リンクユニットはきちんと表示されるんです

そして、その具体的な方法は、レスポンシブ AMP 広告コードを修正する方法に記載がある通りに修正すると、リンクユニットを正常に表示することができます。

それが次のコードです。

<amp-ad
   layout="fixed-height"
   height=100
   type="adsense"
   data-ad-client="ca-pub-1234567891234567"
   data-ad-slot="1234567890">
</amp-ad>

リンクユニットの元の広告コードからdata-ad-clientdata-ad-slotの値をコピペします。

詳しくはAdsenseヘルプにも載っているので以下を参照してくださいね。

レスポンシブ AMP 広告コードを修正する方法

 

コメントを残す

メールアドレスが公開されることはありません。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

このサイトの管理者

ナオユ

Wordpress初心者向けにカスタマイズ方法やWEB制作のノウハウをポロッとまとめています。広告代理店→WEB制作会社→リモート勤務になり在宅ワークしながらアフィリエイトなど副業に挑戦中|子ども大好き新米パパ@H29男児|フラット35で実家を建て直し親と同居|仮想通貨投資(絶賛含み損w)