【AMP対応】ワードプレスでAccelerated Mobile Pagesを入れてグーグルアナリティクス・アドセンスを導入する
ワードプレスのAMP対応でちょっと迷ったりしたので、メモ。
Accelerated Mobile Pagesを入れる
ページをAMP化するためにプラグインを入れる。
AMP用にアナリティクスを設定する
AMP化した場合、AMP専用のHTMLが適用される。その際にアナリティクスのトラッキング情報もAMP用に設定しないといけないので、設定しておく。
アナリティクスは設定しないと、あたかもPVが減ったように見えるのでちゃんと設定しよう。自分はこれでPV減ってなんでだろうと思っていた。直近でワードプレスを更新したり子テーマ入れたり作業していたので、こっちが原因なのかもと考えたけど、ただ単にAMP化されたページがGoogleAnalyticsでトラッキングされていなかっただけ。
「Settings」からAnalyticsに進んでAnalyticsのトラッキング IDを入れる。
トラッキングID確認
グーグルアナリティクスを開いている場合は、管理ボタンをクリック。
トラッキング情報を見れば、IDが分かる。
これをAccelerated Mobile PagesのGoogleAnalyticsの項目に入れる。
アドセンスを導入する
amp化されたページにアクセスしてみると分かるが、アドセンスの広告が配置されていない。 スマホ時代の今、スマホで広告が出ないのは痛いので設定する。
これは、Googleの通りに進もう。
amp-analytics は拡張コンポーネントなので、使用する場合はカスタム要素としてドキュメントに明示的に設定する必要があります。ページに AMP アナリティクス機能を追加するには、AMP JS ライブラリの前にある
<head>に次のスクリプトを挿入します。
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
Accelerated Mobile Pagesを使っている場合、設定画面にそれっぽい項目があるので追加する。
続いて、広告コードを入れる。
Advertisementをクリック。ここから広告を追加することができる。
AD #1からAD #6まで設置箇所があるので、広告を入れたい箇所をONにして設定を追加していく。
必要な項目はdata-ad-clientとdata-ad-slotの値なので、これをアドセンスの広告コードからコピーしてペーストする。
SaveChangesボタンを押して保存すれば、広告が表示される。
まとめ
プラグイン入れただけで対応できてしまうのはやばいな。ちょっと怖い。 そして、やっぱりデザインは著しく悪くなるからどうにかしたい。
