Desktop AMPのバージョンのAdsense適用する

AMP(Accelerated Mobile Pages)プロジェクトは、Googleでサポートし、Webサイトのパフォーマンスを向上させるためのプロジェクトです。 そのため、非常に制限なので、いくつかのサイトには適用しないことがあります。

AMPは、特にモバイルを利用するユーザーをターゲットにするが、Desktopのためのサイトにも適用することができます。

AMPは非常に限定的であるが、幸いなことにAdsenseは提供しています。既存のコードとは異なる <amp-ad />というコードを使用する必要があります。 詳しい設定方法は、Amp-adを参照してください。

この記事では、Desktopに <amp-ad/>を適用することの難しさについて話してください。

AMPのAdsense適用する

AMPのadsenseは反応型に設定することが困難である。そのため、事前に示すサイズを設定する必要があります。

Adsenseサイトで広告を作成すると、次のようにAMPのためのコードが提供されます。

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

ここで、 width="100vw"に設定されているため、全体の幅サイズの広告が表示されます。 100vwを基に設定されているのは、モバイルは、幅が狭いので、全体の両方を使用するためです。

このようなコードは、反応型ではなく、広告をフルサイズで表示するだけです。 モバイルでは、自然に見えますが、Desktopに適用すると、非常に奇妙です。

DesktopにAMP Adsense適用する

DesktopにAMP Adsenseを適用するには、広告のサイズを変更ヘジュオヤします。

上記のコードを下記のように変更しましょう。 heightを設定しlayoutを fixed-heightに設定すると、widthは設定しなくてもされます。

<amp-ad
    layout="fixed-height"
    height="90"
    type="adsense"
    data-ad-client="ca-pub-xxxxxxx"
    data-ad-slot="xxxxxxx">
  <div overflow=""></div>
</amp-ad>

heightを280に設定すると、他の形態の広告が表示されます。

<amp-ad
    layout="fixed-height"
    height="280"
    type="adsense"
    data-ad-client="ca-pub-xxxxxxx"
    data-ad-slot="xxxxxxx">
  <div overflow=""></div>
</amp-ad>

widthを設定する必要がない理由は、広告ユニットのサイズが既に決まっているので、設定された高さと同じ広告のwidthが自動的に決まるからです。 この広告の種類は、Google Supportで確認することができます。

もし広告のサイズを設定した目に見えない場合は、その大きさの広告がない可能性があります。(私の推測です) そのため、数が多く、広告のサイズに設定する必要が良さそうです。

参考

• sangams
• Google support
• AMP Dev