*

AMPページにGoogleタグマネージャを実装する方法

公開日: : 最終更新日:2017/04/26 タグマネージャー , , , , ,


LINE facebook twitter g+
B! pocket Evernote 楽天


家電&カメラ タイムセール/バーゲン会場/クーポン配布はこちら。
Amazonでクーポンをもらう

【Amazonファッション】在庫一掃セール開催中!
メンズ・レディースを見る

WordPressでAMP化してGTMタグ入れてGoogleアナリティクスを計測する
AMPページをGTMタグでGoogleアナリティクス計測する方法です。

こんにちは、Googleタグマネージャ大好きカグア!です。

WordPressでAMP化して、GoogleタグマネージャでGoogleアナリティクスを計測して、URLを見やすくする設定までを解説します。

関連記事
>>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

本記事のゴール

  1. WordPressサイトにAMP実装
  2. GTMでAMP用コンテナタグ発行
  3. プラグインにGTMタグ実装
  4. 実装確認
  5. 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化

お馴染みのタグが表示されます。AMPページの最後と、BODY直下に入れよ、と表示さます。
amp化

さてここで注意があります。前述の鈴木さんの記事に書いてあるように、これじつはタイポ(誤字)です。正確には「head タグの最後」だそうです。ただ私は、ウェブ版と同じようにHEAD直下とBODY直下に入れました。とくに理由はないのですが、現状とりあえず、これで動いてますので良しとします。

ウェブ用と同じように、コンテナタグも2つになるのですね。

AMPページにGTMタグ実装

山田さんの記事にも書かれているのですが、私もとりあえず記事ページのみAMP化することにしました。理由は簡単だからです、WordPressのAMPプラグインに直接書けば済んでしまいます。ただプラグインがアップデートしたらアウトなので全然スマートじゃありません(泣)。

もっと良い方法があれば、どなたかお教えください。

amp/templates/single.phpのHEAD直下とBODY直下に、GTMで表示されたコンテナタグをそれぞれ貼り付けて、保存します。
amp化

WordPressサイトのAMPページへのGTMタグの実装は、これで完了です。

それでは、実際にアクセスして確認してみましょう。

AMPページにアクセスして検証

スマホからGoogle検索をして、表示される自分のAMPページにアクセスします。

AMP化とGTM実装がうまくいってれば、URL+/amp と表示されるはずです。
amp化

これで、AMPページにGTMを実装する方法は以上です。お疲れ様でした。

さて、今回わたしは、GAにビューフィルタを設定し上記のようにURL置換を試みました。

ちなみに、これは非推奨ですので、自己責任にてよろしくお願い致します。「AMP計測のために別のプロパティを新たに作成することが推奨」と。
>>AMPが広告とGoogleアナリティクスをサポート開始 | 海外SEO情報ブログ

それでは、ご紹介します。

GAでAMP用URLに置換

※この設定は必須ではありません。

上記の方法でGoogleアナリティクスを計測しますと、同一のページであっても2種類のURLが出来てしまいます。まあ、それはそれで良いのですが、もっとスマートに分類できないかなーとしたのが、今回のフィルタです。/amp/ を付与するため区別しやすくなります。こうしますと、ディレクトリ単位で識別しやすくなるため、いいかなーと。

なお、ビューフィルタは一度設定しますと、データを元に戻せませんので、試すときは必ずビューを複製し、そちらで行って下さい。

Googleアナリティクスで、管理>ビュー>フィルタ>カスタム>詳細 から設定します。ampページは/amp/に置換、通常ページは/web/に置換します。
amp化

これで、ampページアクセスもすぐに区別できて便利です。

※サブドメイン方式ですと、集計が一元化できますね。東京新聞のAMPサイトがそうみたいです。
>>日本の新聞社のWebサイト5社のAMP対応状況について調べてみた。 – Qiita

この設定の注意点

ただ前述のように、Googleアナリティクス推奨は、現行動いているGAとは別のプロパティIDを新規で取得して、新しくトラッキングしたほうが良いよ、です。

今回のように、今までのGoogleアナリティクスと合わせて分析したいー、と同じプロパティIDでGTMタグを発行して、計測すると何が起こるのか未知数です。わたしにもわかりません。それに、もともとampディレクトリがあるサイトなどですと、かえって混乱します。ですので、前述のように本設定は必須ではありません。自己責任にてどうぞです。

とはいえそれっぽくはなったので、しばらくはこれで運用しようと思います。経過はこの記事に追記していきますので、どうぞよろしくお願い致します。

以上、WordPressのAMPページにGTMタグを実装してGAのフィルタを設定して見やすくする、でした。

お疲れ様です。

WordPress AMP対応 モダンWeb制作 レッスンブック | エビスコム

WordPress AMP対応 モダンWeb制作 レッスンブック | エビスコム |本 | 通販 | Amazon
Amazonで詳しく見る

関連情報リンク

なぜ「戦略」で差がつくのか。―戦略思考でマーケティングは強くなる― | 音部大輔

なぜ「戦略」で差がつくのか。―戦略思考でマーケティングは強くなる― | 音部大輔 |本 | 通販 | Amazon
Amazonで詳しく見る

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ユーザーの方はぜひ。

「アンプ!」

関連するほかの記事を見てみよう!
このサイトのトップページへ行く

  • このエントリーをはてなブックマークに追加
  • Pocket

Profile



Yoshihiko Yoshida
フリーのマーケター。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。アクセス解析を中心としたコンサルティングや設定、メディア運営に従事。教育システム情報学会会員。元立教大学非常勤講師。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑