Sponsor

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

AMPディスプレイ広告 WP プラグイン
AMPディスプレイ広告
2021.04.12
Sponsor

AMP 対応広告

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

  • プラグインを利用しない方法
  • AMPを管理するプラグイン「AMP for WP」を利用する方法
  • 広告を管理するプラグイン「Advanced Ads」「Ad Inserter」を利用する方法
AMP for WPAdvanced AdsAd Inserter
広告コードを簡単に追加できる簡単少し複雑
headerにコードを簡単に追加できる簡単少し複雑
コンテンツの中は表示できない設置位置を細かく指定可設置位置を細かく指定可

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

AMP Adsenseコードを追加する

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

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

ヘッダーにコードを貼る方法

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

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

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

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

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

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

AMP広告（ディスプレイ広告）

  1. Goodle Adsense にログイン
  2. 広告→サマリーをクリックする
  3. ユニットごとタブを開き→ディスプレイ広告を選ぶ
  4. 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>
パブリッシャーIDca-pub-1234567891234567
広告スロットID1234567890

APM広告コードを貼る

上記のAPM広告コードをAMPページに貼ります。

注意:広告コードは<div>や<iframe>など高さが固定されている中には貼らないこと。

  • AMP for WP を利用
  • Advanced Ads を利用
  • Ad Inserter を利用

それぞれの広告コードの貼り方は下に記載しています。

広告が表示されるかテストする

広告設定のプレビューで確認する

  1. Google AdSence→広告→サマリーを開く
  2. サイトごとのタブを開く
  3. 確認するサイトの編集をクリックする

設定した広告の場所が表示されます。

AMP広告
AMP広告
AMP広告
AMP広告

実際に広告が表示されるまで時間がかかります。20分程待つように記載があります。

AMP 広告コードを配置したら、さまざまなモバイル端末で広告をテストして、レスポンシブ機能が適切に動作しているか確認することをおすすめします。

お手持ちのモバイルで表示されていない場合もあります。AMP広告ユニットが表示されているかを確認するには、パフォーマンスレポートでも確認できます。

  1. Google Adsense→レポートをクリック
  2. フィルターで設置した広告ユニットを選択
  3. 適応

広告ユニットの日付毎の表示回数がわかります。また「内訳」→「コンテンツプラットフォーム」ではモバイル端末でのAMP広告の表示回数がわかります。

AMP for WP を利用して簡単にAMP広告を貼る

プラグインAMP for WPは、AMPの設定やデザインの他、AMPページに簡単に広告を設置できます。

  • AD#1～#6の広告を貼りたい位置をオンにする
AD#1Headerの下
AD#2Footerの下
AD#3投稿コンテンツの上
AD#4投稿コンテンツの下
AD#5タイトルの下
AD#6関連記事の上
  1. 広告を設置する場所をONにする
  2. パブリッシャーIDと広告スロットIDを入力
AMP 広告を貼る
AMP 広告を貼る

AMP for WPで<head>タグにコードを貼る

  • Advance Setupを選択→settings→Advance Settings

AMPのHead、body、Footer にHTML記述が可能です。

AMP自動広告・関連記事を貼る
AMP自動広告・関連記事を貼る

AMP for WP の設定は下にリンクを参照

http://wordpress.news-vouge.com/accelerated-mobile-pages
wordpress.news-vouge.com

Advanced Ads を利用してAMP広告を貼る

  1. 広告コードを貼る→広告の位置の指定
  2. AMPの設定にチェックを入れる（自動でヘッダーにコードが設置される）

広告の内容を貼る（Advanced Ads）

「プレーンテキストとコード」または「Adsense」で広告コードを挿入できます。

プレーンテキストとコードを選択した場合の設定

Advanced Ads
Advanced Ads

Adsenseを選択した場合の設定（コードを貼る必要がない）

Advanced Ads
Advanced Ads

広告の配置を指定する（Advanced Ads）

AMP 広告を貼る
AMP 広告を貼る

Advanced Ads で<head>タグにコードを貼る（自動）

Advanced Ads
Advanced Ads

Advanced Ads の詳しい設定は下にリンクを参照

簡単にAMPと通常の広告を貼る Advanced Ads の設定 - WordPressをもっと簡単に/ゆきを
Sponsor 目次 Advanced Adsの利点Advanced Adsの使い方と設定１.Advanced Ads 「広告」の設定２.Advanced Adsの「設置」の設定Advanced Adsの「２.設置」に「
wordpress.news-vouge.com

AMP自動広告を簡単に貼る Ad Inserter

  1. 広告コードを貼る（位置指定）
  2. <head>タグにコードを貼る

広告コードを貼る

AMPディスプレイ広告
AMPディスプレイ広告

Ad Inserter で<head>タグにコードを貼る

Ad Inserter
Ad Inserter

Ad Inserter の詳しい設定は下にリンクを参照

http://wordpress.news-vouge.com/ad-inserter
wordpress.news-vouge.com
Sponsor