AMPページでAdsenseのリンクユニットを正しく表示する方法
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-client
とdata-ad-slot
の値をコピペして使います。
こちらの記事でも詳しく説明しています。
ところが、この広告コードの何がいけないのかと言うと、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-client
とdata-ad-slot
の値をコピペします。
詳しくはAdsenseヘルプにも載っているので以下を参照してくださいね。