プラグイン Ad Inserterを使用してAMPページに広告を挿入する方法

Ad Inserterは、高機能な広告設置、管理を行うことができるWordPress プラグインです。Ad Inserterは、通常ページに加えてAMPページでの広告挿入も対応しています。本記事では、Ad InserterでAMPページに広告を挿入する方法を紹介します。

Ad Inserter の動作が確認できているAMP化プラグイン

AMP for WordPress
AMP for WP
WP AMP Ninja
WP AMP – Accelerated Mobile Pages for WordPress (有料 – サードパーティ the_content hooksをアンチェックすると互換性が高まります。)

WordPressのAMP化プラグインで普及しているAMP for WordPressとAMP for WPをサポートしています。AMP化プラグインでは、この2つが代表的存在です。AMP for WordPressは、WordPressと関わりが深いAutomattic社が提供するプラグインです。WordPressの代表的なプラグインJetpackもAutomattic社が開発、提供しています。

備考：
テーマでAMP化している場合は、AMPページの定義がAMP for WordPressと互換性があれば、対応可能です。しかし、ほとんどのテーマは、恐らく互換性はないと推測しています。

Ad InserterでAMPページ内に広告を挿入する設定手順

AMPページにマニュアルで広告を設置する場合は、<head>タグ内にスクリプトコードを設置した上で、AMP用の広告コードを作成して、ページ内の広告を表示する場所にコードを設置する作業を行います。

AdSenseは、AMPページでも自動広告をサポートしています。自動広告にご興味のある方は、以下のページをご参照下さい。

AdSense AMP 自動広告の特徴、設置、収益パフォーマンスの確認方法

AMP広告表示用のスクリプトコードの設置

AMPページの<head>タグ内に以下のコードを設置します。このコードは、複数設置する必要はありません。既に設置済みの場合は、設置しないで下さい。

上のコードをコピーして、Ad Inserterを使用して、<head>タグ内にコードを設置します。

Ad Inserterを使用して、AMP ページの<head>内にコードを設置する方法

WordPressダッシュボードの「設定」からAd Inserterをクリックして、Ad Inserterの設定ページを表示させます。

①　設定画面の上部に表示されるタブの右側にあるギアアイコンをクリックします。

②　Headerタブを選びます。

③　コード入力欄に|amp|を入力します。これは、AMP用のセパレーターと呼ばれるもので、セパレーターの下のコードをAMPページに挿入する指定です。
上のコードの下に、セパレーターを入れ、その下にAdSense AMP表示用のスクリプトコードを貼り付けます。

④　コード入力スペースの右上にあるドットのボタンを押して、グリーン色に変えます。（コード挿入をオンにします。）

⑤　”Save Settings”を押して設定を保存します。

以上でAMP ページ <head>タグ内の広告コードの設定は完了です。

AMP用 AdSense 広告コードの作成

AdSenseのアカウントにログインして、新しいレスポンシブ広告ユニットを作成します。AMP用の広告コードを作成するためには、レスポンシブ広告ユニットコード内の以下の情報が必要です。

サイト運営者 ID（data-ad-client）、例: ca-pub-1234567890123456
広告ユニット ID（data-ad-slot）、例: 1234567890

以下のコードに取得したレスポンシブコードのサイト運営者と広告ユニットIDに置き換えます。

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

上記コードは、AdSense ヘルプのAMP 対応広告ユニットの作成方法で紹介されているコード例です。AMP 広告ユニットの幅や高さを固定する設定方法もあります。

作成したAMP用広告コードをコピーして、サイト内の所定の場所に挿入します。

Ad InserterでAMP ページに広告を挿入する方法

Ad Inserter は、ページ内の任意の場所に広告を挿入する機能を備えています。通常ページの広告挿入に加えて、AMPページで同じ場所に広告を挿入することができます。

以下にページ内の最初の<h2>または<h3>タグの前に広告コードを挿入する設定に、AMPページでも同様に広告コードを挿入する設定を追加する手順を紹介します。

通常ページの設定は、以下のページをご参照下さい。

Ad Inserterで記事内ネイティブ広告を最初の小見出しの前に設置する方法

①　Ad Inserter 設定ページの中から広告コード設定タブを選択します。

②　AMP用のセパレーター|amp|を入力して、その下に広告コードを貼り付けます。

③　”Save All Settings”を押して設定を保存します。

記事内と記事下にAMP広告を挿入する方法

Ad Inserterは、上で紹介したように既存の設定にAMP ページ用広告を追加したり、AMPページ専用の広告挿入など柔軟に広告コードの挿入ができます。

以下のYouTubeでは、プラグイン AMP for WordPressでAMP化を行なったサイトにAd Inserterを使用して、AMPページの記事下に関連コンテンツとリンクユニットを挿入する設定方法と記事内の最初の小見出しの上に挿入する広告設定にAMP レクタングル広告を追加する作業を動画で紹介しています。