読者です 読者をやめる 読者になる 読者になる

UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

amp-ad | AMPで広告を表示する

f:id:mochizuki_p:20170107174707p:plain

amp-ad

AMPで広告を表示するための専用タグです。

AMPでJavaScriptやiframeが禁止されているために特別に用意されています。

特徴

  • 専用のJavaScriptを読み込む必要がある
  • サイズを指定する必要がある。
  • 各広告ネットワークで指定されたデータを追記する必要がある。

専用のJavaScript

これをheadに追記します

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script> 

HTMLで広告を利用する場合、たとえばGoogle Adsenseであれば、以下のようにJavaScriptを利用します。

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-2005523634531342"
     data-ad-slot="7054352912"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

一方でAMPの場合は以下のような形式になります。

<amp-ad width=300 height=250
      type="adsense"
      data-ad-client="ca-pub-2005523634531342"
      data-ad-slot="7054352912">
 </amp-ad>

この場合は必須となる要素は、

要素名 説明
width 広告枠の幅 300
height 広告枠の高さ 250
type 広告ネットワークのブランド adsense
data-* 広告ネットワークで指定された識別記号 data-ad-client="ca-pub-2005523634531342"

width, height

レンダリングの計算コストを削減するために事前にサイズを指定しておきます。

type

広告ネットワークのブランド

つまり、Google AdsenseやYahoo!など

利用したい広告配信ネットワークをここに記します。

data-で始まる属性

各広告ネットワークごとに指定された情報をここに指定します。

通常は広告配信先や各発行済の広告枠を区別するために、各業者が使用するIDを、ここに入力する。

www.utali.io