AMPの広告の貼り方・手順【簡単な3つの方法】

AMPの広告の貼り方

Sponsor

AMP 対応広告
AMP Adsenseコード
アドセンスのAMP広告コードとAMP自動広告コードの取得
パブリッシャーID（サイト運営者ID）と広告スロットID
AMP for WP を利用して簡単にAMP広告を貼る
Advanced Ads を利用してAMP広告を貼る
AMP自動広告を簡単に貼る Ad Inserter

AMP 対応広告

AMP導入にあたり、それに合わせた広告を貼らなければなりません。その手順を記載しておきます。AMPの広告の貼り方はいくつかありますが、簡単にGoogleの広告を貼ることができる次の3つの方法を記載します。

プラグインを利用しない方法
AMPを管理するプラグイン「AMP for WP」を利用する方法
広告を管理するプラグイン「Advanced Ads」「Ad Inserter」を利用する方法

AMP for WP	Advanced Ads	Ad Inserter
広告コードを簡単に追加できる	簡単	少し複雑
headerにコードを簡単に追加できる	簡単	少し複雑
コンテンツの中は表示できない	設置位置を細かく指定可	設置位置を細かく指定可

「AMP for WP」はコンテンツの中には広告を表示できませんが、「Advanced Ads」と「Ad Inserter」はコンテンツの中の指定（h2タグの前などの指定）ができます。

Sponsor

AMP Adsenseコード

AMP Adsenseコードは<head>タグ～</head>タグの間に貼ります。

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

ヘッダーに表示するAMPの広告の貼り方

コードを貼りつける方法は2つの方法があります。

プラグインを使ってコードを挿入する
テーマ（子テーマ）を直接編集する

ヘッダーにAdsenseのコードを挿入してくれるプラグイン

AMP for WP（AMP化するプラグイン）
Advanced Ads（広告プラグイン）
Ad Inserter（広告プラグイン）

中にはコードを挿入できないテーマもありますのでご注意下さい。

アドセンスのAMP広告コードとAMP自動広告コードの取得

AMP広告（ディスプレイ広告）の取得

Goodle Adsense にログイン
広告
広告ユニットごとタブを開き→ディスプレイ広告を選ぶ
AMPタブを開く

レスポンシブは表示される端末の利用できるスペースに合わせてサイズを自動調整します。画面の向きが変わった場合もそれに合わせ広告を配信してくれます。

AMP自動広告の取得

Goodle Adsense にログイン
広告
「広告掲載の自動化」の右下の「AMP設定」をクリック
「AMPコードを取得しましょう」をクリック

パブリッシャーID（サイト運営者ID）と広告スロットID

<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>