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

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

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 自動広告」のタブ(画面赤枠部)をクリックします。

AdSense自動広告のページからAMP自動広告のタブをクリックします

AMP自動広告のページが表示されます。

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

手順1: AMP自動広告の有効/無効を切り替えるスイッチです。デフォルトの状態でオンになっています。グレーの場合は、ボタンを右にスライドにしてオンにします。(オンはボタンがブルーに変わります。)

手順2: クリックするとアコーディオンが開いてコードが表示されます。コードは、AMPページの<head>タグ内に設置するコードです。

手順3: コードは、AMPページの<body>タグ直下に設置するコードです。

上記コードをコピーして、Cocoonの子テーマのテンプレートファイルの該当箇所に設置します。

AMP自動広告のコードをCocoonのテンプレートファイルに設置するへスキップ(ジャンプ)

古い情報:AdSense LabsからAMP 自動広告を設定し、コードを入手する

2018年第一四半期までAMP自動広告は、限定されたユーザーのみに提供されていましたが、Labsにおいて全てのユーザーにAMP 自動広告が利用可能になりました。さらに2018年6月から、ベータでなく一般公開されました。
AMP自動広告の機能は、現在、ベータ版としてAdSense Labsより提供されています。AdSenseの管理画面のメニューの[最適化]から[Labs]をクリックし、AdSense Labsのページを表示します。

AdSense LabsのページのAMP Autoのスイッチをオンにします。

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

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

AMP自動広告のコード

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

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

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

AMP 自動広告のコードをヘッダー部に貼り付けます。

<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>
WordPress管理者ログインした状態では、自動広告を表示したくない場合は、一つ上の欄にコードを追加します。

[ファイルを保存(更新)]ボタンを押して、テンプレートファイルを保存します。

<body>タグ直下のコードの設置

テーマの編集ページの右側に表示されるテーマファイルの一覧の中から、”amp-body-top-insert.php”をクリックします。

AMP自動広告コードを貼り付けます。

「ログインユーザーも含めてカウントする場合は以下に挿入」の下に<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テストへのリンク

 

”AMPページへ”をクリックするとAMPページが表示されます。”Google AMPテスト”をクリックすると、AMPのテストサイトのページが開かれ、テストが行われます。

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

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

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

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

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

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

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

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

AdSense AMP 自動広告の特徴、設置、収益パフォーマンスの確認方法 - ブロギングライフ
AdSense 自動広告は、通常ページに自動的に広告を挿入して表示する機能です。Googleは、AMPページ向けにAMP 自動広告をベータ版で提供しています。2018年3月後半から全てのユーザーにAMP自動広告が利用可能に変更になりました。AMP自動広告の導入ガイドも公開されています。 備考: AMP 自動広告はベータ...

コメント

  1. bluebird より:

    はじめまして。
    ブログ初心者でcssをいじるのが苦手なので丁寧な説明とても助かりました!
    ありがとうございます。

    私も今Cocooonを使っていて、
    アドセンスのAMP自動広告でタグを入れたいのですが、
    子テーマの中に、”amp-head-insert.php”、”amp-body-top-insert.php”がありません。
    テーマがアップデートされてなくなってしまったのでしょうか(> <)
    どこから追加したらいいかご存知でしたらご教授いただけないでしょうか?m(_ _)m

  2. しゃろん より:

    はじめまして。

    はてなブログから引っ越して頭パニックになりそうでしたがCocoonのおかげで助けられました。

    本当に感謝です。ありがとうございます。

    1つ、質問があります。上記のやり方でAMP自動広告が反映されるようになりました。

    しかし、引っ越したためではありますが、もともと記事内に広告コードを直接埋め込んでいる記事では反映されません。

    その場合はどうしたらいいでしょうか。おそらく直接埋め込んでいるコードをどこかに張り付けるのだろうとは思うのですが場所が分からないのです。
    よろしくお願いいたします。

    • Chico M より:

      はじめまして。メッセージありがとうございます。

      もともと記事内に広告コードを直接埋め込んでいる記事では反映されません。

      元々、記事内に広告コードを設置しているとおっしゃるのは、通常ページ内にAdSense 記事内広告やレスポンシブの広告コードを直接設置しているページをAMPで表示させた時に、AdSenseの広告が表示されないということでしょうか?

      それとも、通常ページに設置している広告がAMPで表示されないということでしょうか?

      前者の場合、AMPでの自動広告を表示するための解析に時間がかかっているなどの理由が考えられます。しかし、後者の意味の可能性の方が高いように思います。AMPページと通常ページでは、設置する広告コードが異なります。

      はてなブログの場合は、通常ページに設置してある広告コードを自動的にAMP用の広告コードフォーマットに変更する仕様になっている(いた)と認識しています。WordPressの場合は、同様の機能を備えるAMP対応のテーマ(やプラグイン)以外では、AMP用の広告フォーマットを設置する必要があります。

      Cocoonの機能を使用して記事内にAdSenseの広告を表示させている場合には、AMPでもテーマ側でAMP用のフォーマットで広告を表示させる仕様になっています。(その場合は、はてなの時に埋め込んでいた広告コードは外す必要があります。(外すことを強くお勧め致します))

      AMP 自動広告でも記事内に広告を表示されますので、AMPページでは自動広告に広告表示を任せるのも選択肢の一つです。

      • しゃろん より:

        返信ありがとうございます。

        Cocoonの機能を使用すれば間違いなく反映されているので時間はかかりますが埋め込んでいるコードを外しにかかってます。

        1300記事ほどあるので時間はかかりそうですがはっきりしたので頑張ります。

        ご丁寧にありがとうございました。

        • Chico M より:

          お返事ありがとうございます。

          CMS(ブログプラットフォーム)の移行は、細かい調整なども必要ですが、時として作業量も多くなる時があります。大変と思いますが、マニュアルで設置したコードを外してしまえば、今後の補修や管理は簡単になると思います。頑張って下さい!

タイトルとURLをコピーしました