SimplicityにAdSense AMP 自動広告を設定する方法

AdSense 自動広告は、通常ページに加えてAMP 自動広告があります。本記事では、WordPressのテンプレートSimplicityの機能を使用したAMPページに自動広告を設定する方法を紹介します。

はじめに・設定概要

本記事で紹介する方法は、Simplicityの機能を使用してAMP化を行っている場合の設定方法です。Simplicityを使用していても、プラグインなど他の方法でAMP化を行っている場合は、設定方法が異なります。

SimplicityでAMP化を行っている場合のAMP自動広告コードの設置は、テンプレートファイルを編集して行います。Simplicityの子テーマには、AMPページ用ヘッダーテンプレートファイルがないため、親テーマのAMPページ用ヘッダーテンプレートファイルを小テーマにコピー(アップロード)して、作業を行います。

上記作業を行うと、テーマのアップグレードをしても、子テーマに設定した情報を引き継ぐことができるため、保守性が高くなります。

親テーマを編集して設定することもできるのですが、その場合はテーマの更新のたびに、再設定をする必要が発生します。

AMPヘッダーテンプレートファイルを子テーマに追加する

編集するテンプレートファイル名は、Simplicityのバージョン2.6.0.9以降の場合、amp-header.phpです。それ以前のバージョンでは、single-amp.phpを編集します。

1. FTPを使用してサーバー上のWordPressがインストールされているディレクトリー以下の/wp-content/themes/simplicity2/の下にある”amp-header.php”をダウンロードします。

2. ダウンロードしたamp-header.phpを、FTPを使用してSimplicityの子テーマのディレクトリー、/wp-content/themes/simplicity2-child/にアップロードします。

以上で子テーマに、AMP用のテンプレートファイルが追加されました。

AMP 自動コードの設置

AMP 自動広告の有効化とコードの入手

AMP自動広告の機能は、現在ベータ版としてAdSense Labsより提供されています。AdSenseの管理画面のメニューの[最適化]から[Labs]をクリックし、AdSense Labsのページを表示します。

これまでAMP自動広告は、限定されたユーザーのみに提供されていましたが、現在はLabsにおいて全てのユーザーにAMP 自動広告が利用可能になっています。

AMP 自動広告の有効化手順

  1. AMP 自動広告のスイッチを右にスライドして、有効にします。
  2. [コードを取得]をクリックします。

小ウインドウが開かれて、自動広告のコードが表示されます。自動広告のコードは、二組です。1つは、<head>タグ内に設置し、もう一つは<body>タグの直下に設置します。

AMP自動広告のコード

コードをコピーして、以下の作業を行なって、AMP自動広告コードを設置します。

AMP自動広告コードをSimplicityのテンプレートに設置する

WordPressのダッシュボードのメニュー[外観]からテーマの編集をクリックします。表示されるテーマの編集ページの右側に子テーマのテンプレートファイルが縦に並んで表示されています。その中の”amp-header.php”をクリックすると、テンプレートファイルのソースコードが表示されます。

AMP ヘッダーテンプレートファイルの編集画面

画面をスクロールダウンしていって、</head>タグを探します。

該当部分のコードを以下に抜粋します。

</style>
</head>
<body <?php body_class(‘amp’); ?> itemscope itemtype=”http://schema.org/WebPage”>
<?php //Google Analyticsコード(ログインユーザーはカウントしない)

</head>の上に、AMP自動広告コードの<head>タグ内に設置するコードをコピーして、貼り付けます。

続いて、<body <?php body_class(‘amp’); ?> itemscope itemtype=”http://schema.org/WebPage”>の下に、<body>タグの直下に設置するコードをコピーして貼り付けます。

設置後のコード箇所は以下の様になります。(AMP自動コードの部分を太字にしています。)

</style>
<script async custom-element=”amp-auto-ads” src=”https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js”></script>
</head>
<body <?php body_class(‘amp’); ?> itemscope itemtype=”http://schema.org/WebPage”>
<amp-auto-ads type=”adsense” data-ad-client=”ca-pub-1234567890123456″></amp-auto-ads>
<?php //Google Analyticsコード(ログインユーザーはカウントしない)

内容を確認の上、ページ下の青色のボタン[ファイルを保存]を押して、テンプレートファイルを保存します。

以上で設置作業は完了です。

AMP 自動広告コードの設置確認

Chrome等のパソコンのブラウザーで、サイトのページを表示します。Simplicityの場合は、WordPressにログインした状態だと記事タイトルの下にAMPページを表示するリンクが表示されます。

Simplicityの記事タイトル下に表示されるAMPページへのリンク”AMP”をクリックするとAMPページが表示されます。”テスト”をクリックすると、AMPのテストサイトのページが開かれ、テストが行われます。

表示されたAMPの記事ページのソースコードをブラウザで表示して、ソースコードの</head>の上と<body>の下にそれぞれAMP自動広告のコードが設置されていれば、コードの設置は適切に行われていることが確認できます。

Webサイトのページのソースコードを表示させて確認することは、サイト運営の基本的な作業の一つです。パソコンとマックの各主要ブラウザのソースコード表示させるキーボードショートカットを紹介します。

念のため、ページのAMPテストを行なって、AMPのテストが合格していることを再確認します。

コード設置後、数十分後には広告が表示されるようになります。(ただし、AdSenseのクローラーが解析を行なっていないページには、広告は配信されません。)

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

サイトのAMPページが、AMPの仕様に準拠していて検索にインデックスされている場合、検索経由の訪問はGoogleのキャッシュサーバー上でAMPページが表示されます。そのため、AMP自動広告コードを設置してから、自動広告が検索経由のサイト訪問で表示されるまでには、少し時間差が発生するのが通例です。

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

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

AdSense 自動広告は、通常ページに自動的に広告を挿入して表示する機能です。Googleは、AMPページ向けにAMP 自動広告をベータ版で提供しています。2018年3月後半から全てのユーザーにAMP自動広告が利用可能に変更になりました。AMP自動広告の導入ガイドも公開されています。 備考: AMP 自動広告はベータ...

関連記事とスポンサーリンク


シェアする