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 広告コードを修正する方法

 

お気軽にコメントをどうぞ。

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

ウェルスナビで損失?