AdSense 自動広告は、通常ページに加えてAMP 自動広告があります。本記事では、WordPressのテーマCocoonの子テーマを編集してAMPページに自動広告を設定する方法を紹介します。
Cocoon 0.3.1からAdSense自動広告を設定を行なった場合は、AMP機能を有効にする（している）と、自動的にAMPページでの自動広告コードの設置も行われる機能が追加されました。Cocoonの機能を使用して、AdSense自動広告を有効にしている場合は、本記事で紹介している設定方法は必要ありません。尚、CocoonでAMP 自動広告のコードの設置は行われますが、AdSense 管理画面のAdSense LabsのページでAMP 自動広告のスイッチをオンにする必要はあります。
さらに、Cocoon 0.3.4から、AMP自動広告のマニュアル設置にも使うことのできるユーザー編集用のテンプレートファイルが追加されました。Cocoonでマニュアルで広告を設置している場合で、AMPでは自動広告を有効にする際には、本記事で紹介するようなマニュアルでのコード設定が必要になります。
はじめに・設定概要
本記事で紹介する方法は、Cocoonの機能を使用してAMP化を行っている場合の設定方法です。Cocoonを使用していても、プラグインなど他の方法でAMP化を行っている場合は、設定方法が異なります。
CocoonでAMP化を行っている場合のAMP自動広告コードの設置は、テンプレートファイルを編集して行います。親テーマを編集して設定することもできるのですが、その場合はテーマの更新のたびに、再設定をする必要が発生します。Cocoonは、子テーマが予め用意されています。
Cocoonの子テーマには、AMPページ用ヘッダーテンプレートファイルがないため、親テーマのAMPページ用ヘッダーテンプレートファイルを小テーマにコピー（アップロード）して、作業を行います。
子テーマのテンプレートを編集して追加した設定は、（親）テーマのアップグレードをしても、子テーマに設定した情報を引き継ぐことができるため、保守性が高くなります。
AMP 自動コードの設置
AMP 自動広告の有効化とコードの入手
AdSenseにログインし、管理メニューの「広告の設定」をクリックすると以下の様な自動広告のページが表示されます。（表示されない場合は、「広告の設定」の下の「コンテンツ」をクリックし、「自動広告」選択して下さい。）
画面上部に表示される「AMP 自動広告」のタブ（画面赤枠部）をクリックします。
AMP自動広告のページが表示されます。
手順１： AMP自動広告の有効/無効を切り替えるスイッチです。デフォルトの状態でオンになっています。グレーの場合は、ボタンを右にスライドにしてオンにします。（オンはボタンがブルーに変わります。）
手順2： クリックするとアコーディオンが開いてコードが表示されます。コードは、AMPページの<head>タグ内に設置するコードです。
手順3： コードは、AMPページの<body>タグ直下に設置するコードです。
上記コードをコピーして、Cocoonの子テーマのテンプレートファイルの該当箇所に設置します。
AMP自動広告のコードをCocoonのテンプレートファイルに設置するへスキップ（ジャンプ）
古い情報：AdSense LabsからAMP 自動広告を設定し、コードを入手する
- AMP 自動広告のスイッチを右にスライドして、有効にします。
- ［コードを取得］をクリックします。
小ウインドウが開かれて、自動広告のコードが表示されます。自動広告のコードは、二組です。1つは、<head>タグ内に設置し、もう一つは<body>タグの直下に設置します。
コードをコピーして、以下の作業を行なって、AMP自動広告コードを設置します。
AMP自動広告コードをCocoonのテンプレートに設置する
WordPressのダッシュボードのメニュー［外観］から［テーマの編集］をクリックします。表示されるテーマの編集ページの右側に子テーマのテンプレートファイルとディレクトリーが縦に並んで表示されています。その中の”tmp-user”をクリックし、続いて表示される”amp-head-insert.php”をクリックするとすると、テンプレートファイルのソースコードが表示されます。
<head>タグ内のコードの設置
「ログインユーザーも含めてカウントする場合は以下に挿入」の下に<head>タグ内に設置するコードを貼り付けます。
以下がコードの設置例です。
<?php //ヘッダー部分（<head></head>内）にタグを挿入したいときは、このテンプレートに挿入（ヘッダーに挿入する解析タグなど） //子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。 //例：<script type="text/javascript">解析コード</script> ?> <?php if (!is_user_administrator()) : //管理者以外カウントしたくない場合は //↓ここに挿入?> <?php endif; ?> <?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?> <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
［ファイルを保存（更新）］ボタンを押して、テンプレートファイルを保存します。
<body>タグ直下のコードの設置
テーマの編集ページの右側に表示されるテーマファイルの一覧の中から、”amp-body-top-insert.php”をクリックします。
「ログインユーザーも含めてカウントする場合は以下に挿入」の下に<body>タグ直下に設置するコードを貼り付けます。
以下がコードの設置例です。
<?php //<body>タグ直後編集用のテンプレートです。 //子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。 ?> <?php if (!is_user_administrator()) : //管理者以外カウントしたくない場合は //↓ここに挿入?> <?php endif; ?> <?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?> <amp-auto-ads type="adsense" data-ad-client="ca-pub-1234567890123456"></amp-auto-ads>
［ファイルを保存（更新）］ボタンを押して、テンプレートファイルを保存します。
以上で設置作業は完了です。
AMP 自動広告コードの設置確認
Chrome等のパソコンのブラウザーで、サイトのページを表示します。Cocoonの場合は、WordPressにログインした状態で、ページ下にAMPページとAMPテストへのリンクが表示されます。（画面赤枠部）
”AMPページへ”をクリックするとAMPページが表示されます。”Google AMPテスト”をクリックすると、AMPのテストサイトのページが開かれ、テストが行われます。
表示されたAMPの記事ページのソースコードをブラウザで表示して、ソースコードの</head>の上と<body>の下にそれぞれAMP自動広告のコードが設置されていれば、コードの設置は適切に行われていることが確認できます。
念のため、ページのAMPテストを行なって、AMPのテストが合格していることを再確認します。
コード設置後、数十分後には広告が表示されるようになります。（ただし、AdSenseのクローラーが解析を行なっていないページには、広告は配信されません。）
AMP 自動広告の収益パフォーマンスの確認方法
サイトのAMPページが、AMPの仕様に準拠していて検索にインデックスされている場合、検索経由の訪問はGoogleのキャッシュサーバー上でAMPページが表示されます。そのため、AMP自動広告コードを設置してから、自動広告が検索経由のサイト訪問で表示されるまでには、少し時間差が発生するのが通例です。
コードの設置から数日程度後に、AdSenseのパフォーマンスレポートでAMP自動広告の指標が表示されていれば、自動広告が無事設置されていることが確認できます。
AMP自動広告の収益パフォーマンスレポートの表示方法は、以下の記事をご参照下さい。
コメント
はじめまして。
ブログ初心者でcssをいじるのが苦手なので丁寧な説明とても助かりました！
ありがとうございます。
私も今Cocooonを使っていて、
アドセンスのAMP自動広告でタグを入れたいのですが、
子テーマの中に、”amp-head-insert.php”、”amp-body-top-insert.php”がありません。
テーマがアップデートされてなくなってしまったのでしょうか(> <)
どこから追加したらいいかご存知でしたらご教授いただけないでしょうか？m(_ _)m
はじめまして。
コメントありがとうございます。子テーマをCocoonのサイトから最新版をダウンロードしてみましたが、”amp-head-insert.php”、”amp-body-top-insert.php”は、変わらずにありました。これらのファイルは、tmp-userのディレクトリーの下にあります。
以下のCocoonのページの/tmp-user/のところにも記載があります。
子テーマで上書きカスタマイズ利用できるテンプレートの場所
もしも分からない場合場合、「テーマの編集」のページのスクリーンショットをご添付頂けますでしょうか？
よろしくお願い致します。
コメントにはbluebirdさんが画像を添付できなかったため、その後のやり取りは、Twitterで行いました。
https://twitter.com/Bluebird_Story_/status/1019380933844037632
はじめまして。
はてなブログから引っ越して頭パニックになりそうでしたがCocoonのおかげで助けられました。
本当に感謝です。ありがとうございます。
1つ、質問があります。上記のやり方でAMP自動広告が反映されるようになりました。
しかし、引っ越したためではありますが、もともと記事内に広告コードを直接埋め込んでいる記事では反映されません。
その場合はどうしたらいいでしょうか。おそらく直接埋め込んでいるコードをどこかに張り付けるのだろうとは思うのですが場所が分からないのです。
よろしくお願いいたします。
はじめまして。メッセージありがとうございます。
元々、記事内に広告コードを設置しているとおっしゃるのは、通常ページ内にAdSense 記事内広告やレスポンシブの広告コードを直接設置しているページをAMPで表示させた時に、AdSenseの広告が表示されないということでしょうか？
それとも、通常ページに設置している広告がAMPで表示されないということでしょうか？
前者の場合、AMPでの自動広告を表示するための解析に時間がかかっているなどの理由が考えられます。しかし、後者の意味の可能性の方が高いように思います。AMPページと通常ページでは、設置する広告コードが異なります。
はてなブログの場合は、通常ページに設置してある広告コードを自動的にAMP用の広告コードフォーマットに変更する仕様になっている（いた）と認識しています。WordPressの場合は、同様の機能を備えるAMP対応のテーマ（やプラグイン）以外では、AMP用の広告フォーマットを設置する必要があります。
Cocoonの機能を使用して記事内にAdSenseの広告を表示させている場合には、AMPでもテーマ側でAMP用のフォーマットで広告を表示させる仕様になっています。（その場合は、はてなの時に埋め込んでいた広告コードは外す必要があります。（外すことを強くお勧め致します））
AMP 自動広告でも記事内に広告を表示されますので、AMPページでは自動広告に広告表示を任せるのも選択肢の一つです。
返信ありがとうございます。
Cocoonの機能を使用すれば間違いなく反映されているので時間はかかりますが埋め込んでいるコードを外しにかかってます。
1300記事ほどあるので時間はかかりそうですがはっきりしたので頑張ります。
ご丁寧にありがとうございました。
お返事ありがとうございます。
CMS（ブログプラットフォーム）の移行は、細かい調整なども必要ですが、時として作業量も多くなる時があります。大変と思いますが、マニュアルで設置したコードを外してしまえば、今後の補修や管理は簡単になると思います。頑張って下さい！