AMP 公式WordPress プラグイン、AMP for WordPressは、Standard, Transitional, Readerと呼ばれる3つのモードがあります。本記事では、StandardとTransitionalのどちらかのモードを選択した際のAMP自動広告の設定方法を紹介します。
Website ModeをReaderモードに選択した場合の自動広告の設定方法は、以下の記事に記載しております。
AMP for WordPressにAdSense 自動広告を追加する方法
AMP for WordPressのStandardまたはTransitionalを選択した際の自動広告の設定方法
Googleが提供するプラグインSite Kitは、AdSense 自動広告のコードを設置する機能を備えています。通常ページだけでなく、AMP公式プラグインなどを利用している場合には、AMPページに自動広告を挿入する機能も提供されています。しかしながら、2020年２月初めの時点では、AMPページに自動広告が設置されない場合があることを確認しています。Site Kitは、2019年にリリースされたばかりの比較的新しいプラグインです。まだ発展途上なところがあります。将来的には、特に問題なく安定して動作するようになると思われますが、現時点ではまだ色々な不具合が起こる可能性があるため、AMPページでの自動広告の設置にはお勧めできません。
使用テーマのテンプレートファイルを編集し自動広告コードを設定する方法
StandardとTransitionalのモードは、利用しているテーマをAMP化しています。そのため、テンプレートファイルを編集してコードを設置する場合には、AMPコードを入手して、利用しているテーマの<head>タグ内と<body>タグが含まれているテンプレートファイル内にコードを追加する作業手順を踏みます。
AMP自動広告スクリプトコードの入手
AdSenseの管理メニューから「広告」をクリックすると広告掲載の自動化とタイトル表示があるサマリーページが表示されます。ページ右側に「AMPサイトはお持ちですか？」または「AMPはオンです」のどちらかのボタン表示があります。前者は、一度もAMPページでの広告を行っていない場合、後者はAMPページで収益化を行ったことがある場合に表示されます。現在は利用していなくても、過去にAMPで自動広告による収益化を行ったことがある場合も、「AMPはオンです」の表示となります。
「AMPサイトはお持ちですか？」または「AMPはオンです」と表示されているボタンを押すとAMP サイト用自動広告のAdSense コードのページが表示されます。「AMP サイトにディスプレイ広告を自動的に表示」の右のスイッチが左の場合は、右にスライドしてオンにします。
AMP自動広告の設定がオンになるとスイッチがブルー色に表示され、「ステップ１：スクリプトをコピーして、サイトの<head></head>タグの間に貼り付けます。の下にコードが表示されます。
赤枠で囲っているコード部を選択してコピーするか、「コードをコピー」をクリックします。
使用テーマのテンプレートファイルの<head>タグ内にコードを追加する
WordPressの管理画面から「外観」-「テーマの編集」を選ぶとテンプレートファイルの編集画面が表示されます。右側に表示されるテーマファイルの一覧からTheme Header(header.php)を選択すると、header.phpファイル内のコードが表示されます。（ファイル名は、テーマによって多少異なる場合があります。）
表示されたヘッダー部のテンプレートファイル内に<head>タグが含まれているか確認します。
AdSenseのページで入手コピーした自動広告のスクリプトタグに以下の様な条件分岐タグを加えます。
<script async custom-element=”amp-auto-ads”
src=”https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js”>
</script>
<?php endif; ?>
上のコードでスクリプトタグを囲っている１行目と最後の行のコードは、AMPページの場合に実行する分岐条件の設定です。上記設定を行うことで、AMPページの場合にのみ、コードが設置されるようになります。条件分岐を加えることで、TransitionalモードでのAMPと通常ページでのコード設置の切り分けができ、全てのページがAMPで表示されるStandardモードでも、通常ページで表示する設定を行ったり、何らかの理由で通常ページが表示された場合に適切なコード設置を行うことができます。
AMPページでの条件分岐を加えた自動広告スクリプトコードを、WordPressのテンプレート編集画面の<head>タグ内に貼り付けます。<head>と</head>の間であればどこでも構いませんが、</head>の直ぐ上が保守性が高いのでお勧めの場所です。以下、コードを設置した例です。
設定内容を確認後、編集したテンプレートファイルを保存（アップデート）します。
AMP自動広告コードの入手
AdSenseのAMP サイト用 AdSense コードのページに戻り、「ステップ 2: AMP 自動広告コードをコピーして、ページの <body> タグのすぐ後に貼り付けます。」をクリックするとアコーディオンが開かれて、自動広告のコードが表示されます。
赤枠で囲っているコード部を選択してコピーするか、「コードをコピー」をクリックします。
使用テーマのテンプレートファイルの<body>タグの下にコードを追加する
<head>タグ内にAMP自動広告のスクリプトを設置した際と同様の手順で、使用しているWordPressテーマのテンプレートファイルで<body>タグを含んでいるファイルを編集して、コードを追加します。
WordPress標準テーマの場合は、Theme Header(header.php)に<head>と<body>タグが含まれています。スクリプトファイルと同様にheader.phpを編集します。
AdSenseのページで入手コピーした自動広告コードに、AMPページの場合の条件分岐タグを加えます。
<amp-auto-ads type=”adsense”
data-ad-client=”ca-pub-123456789012345″>
</amp-auto-ads>
<?php endif; ?>
AdSense 自動広告のコードは、<body>タグの直ぐ下が推奨設置場所です。</body>の上でも自動広告は表示される場合がありますが、できるだけ安定して自動広告を表示させるために、AdSenseの推奨に従うことをお勧め致します。
以下、コードを設置した例です。
設定内容を確認後、編集したテンプレートファイルを保存（アップデート）します。
ページを表示してコード設置確認
設定後、ブラウザーでAMPページと通常ページをそれぞれ表示して、AMPページのソースコード内に設置したコードが設置され、通常ページにはAMP用のコードが設置されていないことを確認します。
以上で作業終了です。
AMP 自動広告の収益パフォーマンスの確認方法
AMP自動広告コードを設置してから、自動広告が検索経由のサイト訪問で表示されるまでには、少し時間差が発生するのが通例です。
コードの設置から数日程度後に、AdSenseのパフォーマンスレポートでAMP自動広告の指標が表示されていれば、自動広告が無事設置されていることが確認できます。
AMP自動広告の収益パフォーマンスレポートの表示方法は、以下の記事をご参照下さい。
AdSense AMP 自動広告の特徴、設置、収益パフォーマンスの確認方法
コメントを残す（承認後表示されます）