WordPressをAMPプラグインでAMP対応し、Googleアナリティクスで計測できるようにする方法

2016年2月26日 | attrip

WordPressをAMPプラグインでAMP対応し、Googleアナリティクスで計測できるようにする方法

WordPressをAMPプラグインでAMP対応し、Googleアナリティクスで計測できるようにする方法です。

Googleの検索結果を高速表示させる「AMP」が話題になっていますね。2月23日に一般公開され一部ページがAMP対応していると上位表示されやすくなっています。

早速対応させたいところですが、javascriptが動かないなど仕様に制限があるためすぐにAMP対応させるというのが難しいなと思っている方も多いのではないでしょうか?

簡易的にですが、WordPressのプラグインを使いAMP対応させることが出来ます。

こちらは、WordPressを作っているAutomattic社が作っているプラグインです。

AMP WordPressプラグイン

AMP — WordPress Plugins

ただ、WordPressの出しているプラグインを使うとアクセス解析のjavascriptも省略されてしまうため、AMP対応していてもアクセスが来ているのかわからない状態です。

そこでプラグインを改造することでアクセス解析ができるようにします。

AMPプラグインの中の amp/templates/single.phpを編集します。
1.head要素の中にこちらを入れます。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

2.body要素の中にこちらのスクリプトを入れます。

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

UA-XXXXX-Yの部分には、
Googleアナリティクスの アナリティクス設定→プロパティ→プロパティ設定→トラッキングIDを調べて入れて下さい。

GoogleアナリティクスのリアルタイムでAMP化されたサイトが計測出来ているか確認

この記事のURLは、こちらです。
https://www.e-agency.co.jp/column/wordpress_amp_googleanalytics.html ‎

AMP WordPressプラグインで対応すると
https://www.e-agency.co.jp/column/wordpress_amp_googleanalytics.html/amp
これがAMP対応サイトになります。

スクリーンショット 2016-02-26 15.52.15

参考サイト:Adding Analytics to your AMP pages  |  Analytics for AMP Pages  |  Google Developers

※AMPプラグインは、現在バージョンが3.1です。頻繁に更新されています。更新された際には、再び設定する必要があります。

PICK UP

attrip

ライター

大学卒業後、DJ KRUSH氏との仕事を契機に、Web業界に進む。 現在は"おもてなしを科学する"株式会社イー・エージェンシーに勤務。マーケティングチーム広報。 GAIQ(Google Analytics Individual Qualification)保有者

お問い合わせ

サービスに関するご相談は
こちらよりお気軽にお問い合わせください。

e-Agencyの様々な情報をSNSでお届けします!