AMPページをGTMタグでGoogleアナリティクス計測する方法です。
こんにちは、Googleタグマネージャ大好きカグア！です。
WordPressでAMP化して、GoogleタグマネージャでGoogleアナリティクスを計測して、URLを見やすくする設定までを解説します。なお情報は2017年4月時点でのものです。
関連記事
＞＞Googleタグマネージャ事例：GTMだけで行うページ内リンク計測とUX改善
＞＞Googleタグマネージャで使えるタグ・トリガー・変数一覧2017
＞＞Googleタグマネージャ事例：GTMで仮想ページビューの実装
この記事の目次
AMPページにGTMを実装するとは
まずは謝辞です
山田さんと鈴木さんの記事を参考にさせていただきました。ありがとうございました。
＞＞当ブログのAMP化とAMP Analytics導入のお知らせ | SEM Technology
＞＞Googleタグマネージャが⚡AMPに対応 | 海外SEO情報ブログ
＞＞AMP ページ向けアナリティクス | Google Developers
あと、正規表現の練習ができるサイト。
＞＞Rubular: a Ruby regular expression editor and tester
本記事のゴール
- WordPressサイトにAMP実装
- GTMでAMP用コンテナタグ発行
- プラグインにGTMタグ実装
- 実装確認
- GAでURL置換フィルタ設定 ※非必須
AMP化したWordPressのページに、Googleタグマネージャを入れます。なお、AMPプラグインを直接改修するので、もっとうまい方法がないかは要検討です。
AMPページにGTMタグを実装する
WordPressにAMPを実装
WordPress公式ディレクトリにあるオートマティック社製プラグイン。
＞＞AMP — WordPress Plugins
AMPプラグインを入れると、AMP出力してくれ、以下のようになります。
通常 http://hogehoge.jp/9999.php
AMP http://hogehoge.jp/9999.php/amp
Search Consoleで、AMPページのクロールや構造化のチェックを予めして、エラーはつぶしておきましょう。
GTMでAMPコンテナタグ発行
Googleタグマネージャにログインし、アカウントから、新規コンテナタグの発行に進みます。
ウェブやアプリと同様に「AMP」がありますので、そちらを選びます。AMP用にちゃんと用意してくれているのが、嬉しいですね。
お馴染みのタグが表示されます。AMPページの最後と、BODY直下に入れよ、と表示さます。
さてここで注意があります。前述の鈴木さんの記事に書いてあるように、これじつはタイポ（誤字）です。正確には「head タグの最後」だそうです。ただ私は、ウェブ版と同じようにHEAD直下とBODY直下に入れました。とくに理由はないのですが、現状とりあえず、これで動いてますので良しとします。
ウェブ用と同じように、コンテナタグも2つになるのですね。
AMPページにGTMタグ実装
山田さんの記事にも書かれているのですが、私もとりあえず記事ページのみAMP化することにしました。理由は簡単だからです、WordPressのAMPプラグインに直接書けば済んでしまいます。ただプラグインがアップデートしたらアウトなので全然スマートじゃありません（泣）。
もっと良い方法があれば、どなたかお教えください。
amp/templates/single.phpのHEAD直下とBODY直下に、GTMで表示されたコンテナタグをそれぞれ貼り付けて、保存します。
WordPressサイトのAMPページへのGTMタグの実装は、これで完了です。
それでは、実際にアクセスして確認してみましょう。
AMPページにアクセスして検証
スマホからGoogle検索をして、表示される自分のAMPページにアクセスします。
AMP化とGTM実装がうまくいってれば、URL＋/amp と表示されるはずです。
これで、AMPページにGTMを実装する方法は以上です。お疲れ様でした。
さて、今回わたしは、GAにビューフィルタを設定し上記のようにURL置換を試みました。
ちなみに、これは非推奨ですので、自己責任にてよろしくお願い致します。「AMP計測のために別のプロパティを新たに作成することが推奨」と。
＞＞AMPが広告とGoogleアナリティクスをサポート開始 | 海外SEO情報ブログ
それでは、ご紹介します。
GAでAMP用URLに置換
※この設定は必須ではありません。
上記の方法でGoogleアナリティクスを計測しますと、同一のページであっても2種類のURLが出来てしまいます。まあ、それはそれで良いのですが、もっとスマートに分類できないかなーとしたのが、今回のフィルタです。/amp/ を付与するため区別しやすくなります。こうしますと、ディレクトリ単位で識別しやすくなるため、いいかなーと。
なお、ビューフィルタは一度設定しますと、データを元に戻せませんので、試すときは必ずビューを複製し、そちらで行って下さい。
Googleアナリティクスで、管理＞ビュー＞フィルタ＞カスタム＞詳細 から設定します。ampページは/amp/に置換、通常ページは/web/に置換します。
これで、ampページアクセスもすぐに区別できて便利です。
※サブドメイン方式ですと、集計が一元化できますね。東京新聞のAMPサイトがそうみたいです。
＞＞日本の新聞社のWebサイト５社のAMP対応状況について調べてみた。 – Qiita
この設定の注意点
ただ前述のように、Googleアナリティクス推奨は、現行動いているGAとは別のプロパティIDを新規で取得して、新しくトラッキングしたほうが良いよ、です。
今回のように、今までのGoogleアナリティクスと合わせて分析したいー、と同じプロパティIDでGTMタグを発行して、計測すると何が起こるのか未知数です。わたしにもわかりません。それに、もともとampディレクトリがあるサイトなどですと、かえって混乱します。ですので、前述のように本設定は必須ではありません。自己責任にてどうぞです。
とはいえそれっぽくはなったので、しばらくはこれで運用しようと思います。経過はこの記事に追記していきますので、どうぞよろしくお願い致します。
以上、WordPressのAMPページにGTMタグを実装してGAのフィルタを設定して見やすくする、でした。
お疲れ様です。
WordPress AMP対応 モダンWeb制作 レッスンブック | エビスコム
関連情報リンク
なぜ「戦略」で差がつくのか。―戦略思考でマーケティングは強くなる― | 音部大輔
Googleのキャッシュなんですよね。
＞＞AMP(Accelerated Mobile Pages)ってなんで速いの。 – Qiita
インラインCSS。
＞＞【AMP】記事系コンテンツで使いそうなAMP対応のメモ – Qiita
ウェブ版よりは取れることは減りますが、それでも新鮮。
＞＞Accelerated Mobile Pages Via Google Tag Manager – Simo Ahava’s blog
まとめ
しかし、WordPressですとほんとAMP化は簡単ですね。もうスマホメインのサイトなら、PC用のデザインを考えなくてもいいんじゃないの、とか思ってしまうほどです。
＞＞人気の「Googleタグマネージャ」最新関連書籍の一覧はこちら。
Amazonで詳しく見る
AMP化はたしかに高速でページが表示され、快適なUXです。それでもここまでシンプルですと、なんだかガラケーサイトを思い出しました。
WordPressユーザーの方はぜひ。
・ ・ ・ ・ ・
＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る
↓↓↓無料のニュースレターを配信中です
