ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

AMP公式プラグイン StandardまたはTransitionalモードでのテンプレートファイルを編集してAdSense 自動広告コードを設置する方法

AMP公式プラグイン StandardまたはTransitionalモードでのテンプレートファイルを編集してAdSense 自動広告コードを設置する方法

AMP 公式WordPress プラグイン、AMP for WordPressは、Standard, Transitional, Readerと呼ばれる3つのモードがあります。本記事では、StandardとTransitionalのどちらかのモードを選択した際のAMP自動広告の設定方法を紹介します。

Website ModeをReaderモードに選択した場合の自動広告の設定方法は、以下の記事に記載しております。

AMP for WordPressにAdSense 自動広告を追加する方法

AMP for WordPressのStandardまたはTransitionalを選択した際の自動広告の設定方法

主な設定方法としては、以下の3種類があります。
1. 利用しているテーマのテンプレートファイルに自動広告コードを追加する
2. Google 公式プラグイン Site Kitを利用する
3. 広告設置管理用のプラグインを利用する
備考:
Googleが提供するプラグインSite Kitは、AdSense 自動広告のコードを設置する機能を備えています。通常ページだけでなく、AMP公式プラグインなどを利用している場合には、AMPページに自動広告を挿入する機能も提供されています。しかしながら、2020年2月初めの時点では、AMPページに自動広告が設置されない場合があることを確認しています。Site Kitは、2019年にリリースされたばかりの比較的新しいプラグインです。まだ発展途上なところがあります。将来的には、特に問題なく安定して動作するようになると思われますが、現時点ではまだ色々な不具合が起こる可能性があるため、AMPページでの自動広告の設置にはお勧めできません。

使用テーマのテンプレートファイルを編集し自動広告コードを設定する方法

StandardとTransitionalのモードは、利用しているテーマをAMP化しています。そのため、テンプレートファイルを編集してコードを設置する場合には、AMPコードを入手して、利用しているテーマの<head>タグ内と<body>タグが含まれているテンプレートファイル内にコードを追加する作業手順を踏みます。

AMP自動広告スクリプトコードの入手

AdSenseの管理メニューから「広告」をクリックすると広告掲載の自動化とタイトル表示があるサマリーページが表示されます。ページ右側に「AMPサイトはお持ちですか?」または「AMPはオンです」のどちらかのボタン表示があります。前者は、一度もAMPページでの広告を行っていない場合、後者はAMPページで収益化を行ったことがある場合に表示されます。現在は利用していなくても、過去にAMPで自動広告による収益化を行ったことがある場合も、「AMPはオンです」の表示となります。

AdSenseの広告サマリーページ

「AMPサイトはお持ちですか?」または「AMPはオンです」と表示されているボタンを押すとAMP サイト用自動広告のAdSense コードのページが表示されます。「AMP サイトにディスプレイ広告を自動的に表示」の右のスイッチが左の場合は、右にスライドしてオンにします。

AMP用のAdSense 自動広告コードのページAMP自動広告の設定がオンになるとスイッチがブルー色に表示され、「ステップ1:スクリプトをコピーして、サイトの<head></head>タグの間に貼り付けます。の下にコードが表示されます。

AMP 自動広告のスクリプトコード

赤枠で囲っているコード部を選択してコピーするか、「コードをコピー」をクリックします。

使用テーマのテンプレートファイルの<head>タグ内にコードを追加する

WordPressの管理画面から「外観」-「テーマの編集」を選ぶとテンプレートファイルの編集画面が表示されます。右側に表示されるテーマファイルの一覧からTheme Header(header.php)を選択すると、header.phpファイル内のコードが表示されます。(ファイル名は、テーマによって多少異なる場合があります。)

<head>タグが含まれるテンプレートファイルの編集

表示されたヘッダー部のテンプレートファイル内に<head>タグが含まれているか確認します。

<head>タグが含まれていれば、それが編集する対象のファイルであることを確認することができます。上の画面では、<head>と</head>が近い場所に表示されていますが、テーマによっては<head>タグ内に多くのコードが含まれていることがあります。その場合は、検索を使用して<head>タグの場所を確認することができます。

AdSenseのページで入手コピーした自動広告のスクリプトタグに以下の様な条件分岐タグを加えます。

<?php if ( is_amp_endpoint() ) : ?>
<script async custom-element=”amp-auto-ads”
src=”https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js”>
</script>
<?php endif; ?>

上のコードでスクリプトタグを囲っている1行目と最後の行のコードは、AMPページの場合に実行する分岐条件の設定です。上記設定を行うことで、AMPページの場合にのみ、コードが設置されるようになります。条件分岐を加えることで、TransitionalモードでのAMPと通常ページでのコード設置の切り分けができ、全てのページがAMPで表示されるStandardモードでも、通常ページで表示する設定を行ったり、何らかの理由で通常ページが表示された場合に適切なコード設置を行うことができます。

AMPページでの条件分岐を加えた自動広告スクリプトコードを、WordPressのテンプレート編集画面の<head>タグ内に貼り付けます。<head>と</head>の間であればどこでも構いませんが、</head>の直ぐ上が保守性が高いのでお勧めの場所です。以下、コードを設置した例です。

AMP用自動広告のスクリプトファイルを追加した例

設定内容を確認後、編集したテンプレートファイルを保存(アップデート)します。

AMP自動広告コードの入手

AdSenseのAMP サイト用 AdSense コードのページに戻り、「ステップ 2: AMP 自動広告コードをコピーして、ページの <body> タグのすぐ後に貼り付けます。」をクリックするとアコーディオンが開かれて、自動広告のコードが表示されます。

AdSense AMP 自動広告コードをコピーします

赤枠で囲っているコード部を選択してコピーするか、「コードをコピー」をクリックします。

使用テーマのテンプレートファイルの<body>タグの下にコードを追加する

<head>タグ内にAMP自動広告のスクリプトを設置した際と同様の手順で、使用しているWordPressテーマのテンプレートファイルで<body>タグを含んでいるファイルを編集して、コードを追加します。

WordPress標準テーマの場合は、Theme Header(header.php)に<head>と<body>タグが含まれています。スクリプトファイルと同様にheader.phpを編集します。

AdSenseのページで入手コピーした自動広告コードに、AMPページの場合の条件分岐タグを加えます。

<?php if ( is_amp_endpoint() ) : ?>
<amp-auto-ads type=”adsense”
data-ad-client=”ca-pub-123456789012345″>
</amp-auto-ads>
<?php endif; ?>
上記コードのサイト運営者ID、ca-pub-以降の16桁の数字は、AdSenseアカウントごとに異なります。

AdSense 自動広告のコードは、<body>タグの直ぐ下が推奨設置場所です。</body>の上でも自動広告は表示される場合がありますが、できるだけ安定して自動広告を表示させるために、AdSenseの推奨に従うことをお勧め致します。

以下、コードを設置した例です。

bodyタグの直ぐ下にAdSense AMP用自動広告コードを設置した例設定内容を確認後、編集したテンプレートファイルを保存(アップデート)します。

ページを表示してコード設置確認

設定後、ブラウザーでAMPページと通常ページをそれぞれ表示して、AMPページのソースコード内に設置したコードが設置され、通常ページにはAMP用のコードが設置されていないことを確認します。

以上で作業終了です。

AMP 自動広告の収益パフォーマンスの確認方法

AMP自動広告コードを設置してから、自動広告が検索経由のサイト訪問で表示されるまでには、少し時間差が発生するのが通例です。

コードの設置から数日程度後に、AdSenseのパフォーマンスレポートでAMP自動広告の指標が表示されていれば、自動広告が無事設置されていることが確認できます。

AMP自動広告の収益パフォーマンスレポートの表示方法は、以下の記事をご参照下さい。
AdSense AMP 自動広告の特徴、設置、収益パフォーマンスの確認方法

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top
error: Content is protected !!