釣りとキャンプとコーヒーが好きなサラリーマンの趣味ブログ。釣り場やキャンプ場の見てきたことや、コーヒーについての実験を記録していきます。
プラグインでAMP化してもAdSense広告表示ができた！
以前の記事【WordPressのサイトをプラグインを使ってAMP化する！】でWordpressで作成したサイトであれば「AMP」というプラグインを使えば簡単にAMP化できることを紹介しました。
ただ、AMPの中ではjsの書き方にも制限があって、AdSenseを貼っていたりする人はAdsenseの広告ビューがなくなってしまうので敬遠してたりしたかもしれません。
が、Adsense表示できました。
今回はその方法をご紹介します。
※プラグインをアップデートするたびにこの作業を忘れないようにしてください！
プラグインの編集は、プラグインをアップデートすると上書かれてなくなってしまうからです。
<追記：2019.11.17>
現在、Google AdSenseのスニペットの仕様が変わり、このページのような実装ができなくなっています。
より楽にAMPページで広告表示する方法がありましたので、こちらをご参照ください。
⇒AMPページにAdSense広告を表示する最も楽ちんな方法
目次
【前提条件】「AMP」プラグインのTemplate Modeは「classic」で！
2018年12月13日現在だと、「AMP」プラグインの中でAMP化したページの表示モードが選択できます。
「Template Mode」というこの設定は「Classic」にしてください。
後日バージョンアップで対応されるとは思いますが、現状はこれ以外のモードだとAdSenseは表示されませんでした。
Google Adsenseから「AMP 自動広告」を取得する
とっても簡単です。AMPページに貼り付けるコードを取得します。
GoogleAdsenseのコンソール画面で、「広告」⇒「自動広告」で表示される画面のタブで「AMP自動広告」を選択します。
表示された手順にしたがって、
手順１：オンにする
手順２：コードをコピーして<head>タグにコピペする
手順３：コードをコピーして<body>タグ直下にコピペする
手順２と３は後述します。
Adsenseのコンソールから取得したコードを挿入する
プラグインにAMP化してもらってるからどこからコードを挿入すればいいんだろう？って思った方、簡単です。
WordPressの管理画面の左側から「プラグイン」⇒「プラグイン編集」でプラグインの編集画面を開きます。
※最新ｎのWordPressでは「プラグインの編集」ではなく、「プラグインエディターになってます。
右上から「AMP」を選択して「選択」を押すと、AMPプラグインのプラグインファイルが表示されます。
表示されたファイルの中から「templates」⇒「html-start.php」を選択します。
htmlコードが表示されるので、
手順２で取得したコードを<head>タグの直下にコピペする。
手順３で取得したコードを<body>タグ直下にコピペする。
コードの挿入が終わったら、下部に「ファイルを更新」というのがあるので更新して終了です。
AMPはGoogleのCDNサーバーにキャッシュされたコンテンツを配信しているので、ここにAdsense広告の配信が適用されて反映されるまで20分ほどの時間がかかるそうです。
さきほども書きましたが、AMPプラグインの設定が「Classic」でないと広告はいつまでたっても反映されなかったです。
でも簡単にAdsenseの配信までできてしまうのはいいですね。
AMPプラグインがアップデートされると挿入したコードは上書かれて消えてしまうので、
アップデートする際は忘れずにコードの挿入をし直しましょう。
おすすめ
