釣りとキャンプとコーヒーが好きなサラリーマンの趣味サイト。釣り場やキャンプ場とかの見てきたことや、Webの仕事で困ったことを記録していきます。

プラグインでAMP化してもAdSense広告表示ができた!

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自動広告」を選択します。
Adsense-console

表示された手順にしたがって、
手順1:オンにする
手順2:コードをコピーして<head>タグにコピペする
手順3:コードをコピーして<body>タグ直下にコピペする

手順2と3は後述します。

Adsenseのコンソールから取得したコードを挿入する

プラグインにAMP化してもらってるからどこからコードを挿入すればいいんだろう?って思った方、簡単です。
WordPressの管理画面の左側から「プラグイン」⇒「プラグイン編集」でプラグインの編集画面を開きます。
※最新nのWordPressでは「プラグインの編集」ではなく、「プラグインエディターになってます。

右上から「AMP」を選択して「選択」を押すと、AMPプラグインのプラグインファイルが表示されます。
表示されたファイルの中から「templates」⇒「html-start.php」を選択します。

htmlコードが表示されるので、
手順2で取得したコードを<head>タグの直下にコピペする。
手順3で取得したコードを<body>タグ直下にコピペする。

コードの挿入が終わったら、下部に「ファイルを更新」というのがあるので更新して終了です。

プラグインの編集

AMPはGoogleのCDNサーバーにキャッシュされたコンテンツを配信しているので、ここにAdsense広告の配信が適用されて反映されるまで20分ほどの時間がかかるそうです。
さきほども書きましたが、AMPプラグインの設定が「Classic」でないと広告はいつまでたっても反映されなかったです。

でも簡単にAdsenseの配信までできてしまうのはいいですね。
AMPプラグインがアップデートされると挿入したコードは上書かれて消えてしまうので、
アップデートする際は忘れずにコードの挿入をし直しましょう。


コメントを残す

メールアドレスが公開されることはありません。