SYNCER

SYNCER

＜amp-ad＞ - 広告を表示する

1件

公開日:

AMPのamp-adは、広告を表示するための要素です。Google AdsenseやMicroAd、Criteo、Nendなど、日本で利用されているいくつかの広告も対応しています。

概要

名前
amp-ad
可用性
Stable (安定)
サポートするレイアウト
fill,fixed,fixed-height,flex-item,nodisplay,responsive
必要なスクリプト
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
検証
https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad/0.1/validator-amp-ad.protoascii
ドキュメント
https://www.ampproject.org/docs/reference/extended/amp-ad.html

属性

data-consent-notification-id

通知関連の属性。

data-foo-bar

例えばGoogle Adsenseだったらdata-ad-client属性、data-ad-slot属性というように、広告の種類によって、指定できる属性が違います。各広告のドキュメントを参照。

data-loading-strategy

値のサポートはprefer-viewability-over-viewsだけ。指定すると広告の読み込みがレイジーロードになる。アニメーションなどを最初から見せたい場合に有用。

json

広告によっては、オプションとなるデータを、この属性の値にJSON形式で指定できる。

src

広告によってはsrc属性の指定が必要な場合もある。

type

広告の種類を表すID。

共通属性

AMPの全てのタグで利用できる共通属性を指定できます。

説明

ライブラリの読み込み

amp-adを利用するには、専用のライブラリを読み込む必要があります。

HTML

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

プログラミング

Google Adsenseを例に説明します。

通常のコードの確認

まずは通常のHTMLで利用しているコードを確認しましょう。利用するのはdata-ad-client属性とdata-ad-slot属性です。

通常のコード

<ins
 	class="adsbygoogle"
 	style="display:block"
 	data-ad-client="ca-pub-1234"
 	data-ad-slot="123456789"
 	data-ad-format="rectangle"
></ins>

AMPのフォーマットに置き換える

対応している広告のリンク先にあるドキュメントで、それぞれの広告がサポートしている属性など、仕様を確認できます。Google Adsenseの場合はtype属性にadsenseを指定するルールとなっています。

AMPフォーマットのコード

<amp-ad
	type="adsense"
	data-ad-client="ca-pub-1234"
	data-ad-slot="123456789"
	width="300"
	height="200">
</amp-ad>

フォールバック

広告を表示できなかった時、代わりに表示されるフォールバック要素を指定できます。子要素に、fallback属性を付けた要素を入れて下さい。下記の例ではp要素ですが、amp-img要素などで画像を指定しても大丈夫です。

HTML

<amp-ad
	type="adsense"
	data-ad-client="ca-pub-1234"
	data-ad-slot="123456789"
	width="300"
	height="200">
		<p fallback>広告を表示できません。</p>
</amp-ad>

レイジーロード

data-loading-strategy属性にprefer-viewability-over-viewsにすることで、画像などと同様にレイジーロードに対応させることができます。アニメーションなどを最初から見てもらいたい場合に有効ですが、読み込みが遅いと表示される前にスクロールで通り過ぎられてしまうなど、広告の効果が悪化する可能性もある点も留意しましょう。

HTML

<amp-ad
	type="adsense"
	data-ad-client="ca-pub-1234"
	data-ad-slot="123456789"
	data-loading-strategy="prefer-viewability-over-views"
	width="300"
	height="200">
</amp-ad>

対応している広告

AMPで表示できる広告の一覧です。ドキュメントはリンク先に掲載されています。

サンプルコード

HTML

<!doctype html>
<html amp>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜amp-ad＞ - 広告を表示する</title>
		<link rel="canonical" href="https://syncer.jp/Web/AMP/Component/amp-ad/">
		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
		<style amp-custom>
			body {
				padding: 12px ;
				background-color: #fff ;
			}

			amp-ad {
				background-color: grey ;
			}
		</style>
		<script type="application/ld+json">
			{
				"@context": "http://schema.org",
				"@type": "NewsArticle",
				"headline": "記事のタイトル",
				"image": [
					"eyecatch.jpg"
				],
				"datePublished": "2017-08-23T00:00:00+0900"
			}
		</script>
		<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
		<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
		<script async src="https://cdn.ampproject.org/v0.js"></script>
	</head>
	<body>

<p>このデモではあえて無効な値を指定しています。利用する場合は、それぞれの広告主に不利益にならないように配慮しましょう。</p>

<!-- Google Adsenseの場合 -->
<amp-ad
 	type="adsense"
	data-ad-client="ca-pub-1234"
	data-ad-slot="123456789"
	width="300"
	height="200">
</amp-ad>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

</body> </html>

<style amp-custom>

</style>