AMPでGTM経由でAnalyticsを設定する

AMPでGTM(Google Tag Manager)経由でGoogleのAnalyticsの測定を行う方法です。

GTMにAMP用のコンテナを作成

まずはGTMを設定します。最初にコンテナを作成しますがそのときにAMPを選びましょう。通常のWebサイトですとウェブを選ぶのですが、AMPです。

AMPを選択
AMPを選択

GTMのインストール

つづいて、コードをサイトに貼り付けます。WordPressのサイトであれば、テーマ内のheader.phpなどに該当の箇所があるかと思いますので、<head>内と、<body>の直下にそれぞれのコードを貼り付けます。

WordPressには該当する場所にフックがある場合が多いので、そちらを利用するとより素敵です。head内にはwp_head()があると思うので、そちらにフックするのが良いですね。そしてbodyの直下については、wp_body_open()を利用するとちょうど良さそうです。

インストールのためのコード
GTMインストールのためのコード

AnalyticsのトラッキングIDを取得する

だいぶ一般的になっていると思うので、Analyticsの設定及び、トラッキングIDの取得は簡単な説明だけにします。すでにAnalyticsを取得されている方であれば、管理→プロパティ設定→トラッキングコードでトラッキングIDは確認できます。UA-000000-1といったものがそれです。

トラッキングIDの取得
トラッキングIDの取得

GTMにタグを作成する

GTMでは測定を行う場合に、きっかけとなるトリガーを利用し、それをもとにタグを動かしてAnalyticsの測定を行います。

トリガーの設定

Analyticsの測定の場合にトリガーはすべてのページを見られるたびに動かしたいので、初期設定としてGTMのトリガーにあるAll Pagesを利用します。

All Pagesを利用
All Pagesを利用

タグの設定

タグのタイプとしては、おすすめの中より、Googleアナリティクス:ユニバーサル アナリティクスを選択します。

Google アナリティクス:ユニバーサル アナリティクス
Google アナリティクス:ユニバーサル アナリティクス

タグの設定内においてトラッキングIDを入力する場所が表示されます。先程取得したAnalyticsのトラッキングIDを入力します。トラッキングタイプはページビューのままでOKです。

タグには名前がつけられます。Analyticsなどなにかしら任意の名前を付けて保存しましょう。

タグの設定
タグの設定

タグを公開する

タグが完成したら、最後にバージョン名とバージョンの説明を記入して公開を行います。公開を行わない限り、測定が始まらないので忘れないようにしましょう。実際に設定は無事に完了したのに、公開作業を忘れていて、困ったこともそれなりにあります。。

GTM公開
公開は忘れないように

動作の確認

動作検証はタグの公開後、サイトにアクセスし、Analyticsのリアルタイムにて測定できているかどうかを確認します。1PVでもカウントがあれば成功しているはずです。逆にピクリともAnalyticsが動かない場合はなにかしら問題があると思われます。

リアルタイム計測
私以外だれも見てないが、、測定はできている状態

以上で、GTM経由でのAnalytics測定の設定は完了です。

なぜGTMを利用するの?

GTMについて、単体でAnalyticsを利用するためだけに使うのであればそのまま、Analyticsのコードを導入すればいいのでは?と思われるかもしません。

それだけならそうなのですが、昨今のWebサイトであれば成果を上げるためには、サイトのレイアウトや、ナビゲーションの順序、ボタンの色などなど、たくさんの情報を取得して、その中からなるべく最適なものを調整し続けないといけません。そのための布石としてGTMを入れておくことがひとまず大切です。

というのも、GTMを利用すれば、どのページでどの部分のリンクがクリックされているのか?ということを測定する、クリックイベントの取得がとても簡単にできるからです。

以下の画像の例では、ヘッダーにあるaタグ(ロゴや、ナビゲーション)そして、本文中のaタグ(記事内のリンク)が測定できています。

さらに、ヘッダーにあるaタグのなかでどのページへのリンクが一番クリックされたのかも確認可能です。(ドメインへのアクセスがスラッシュの有無でわかれちゃってるのはちょっと失敗です。)

このように、測定ができれば、例えば、ナビゲーションの並びを変更しようとか、削除しよう、追加しようといったことをデータから検討することが可能です。これはとても便利で有用ですね。

というわけで、今日はAMPにおけるGTMの設定の方法でした。次回はAMPのGTMにおけるクリックイベントの取得方法について触れたいと思います。

元旦です。旧年中は本当にお世話になりました。本年もどうぞよろしくおねがいいたします。

次回予告

  • WordPressのAMP化の方法
  • AMPでのアクセス解析
    • クリックイベントの取得
  • AMPとカスタムメニューの組み合わせ
  • AMPでアドセンス自動広告
  • Backlog World 2020で話す、”リモートワークでプロジェクトマネジメントを上手く行うための技術” について
  • 2月に行われる自分主催のイベント”めがねさんと。“について
  • WordCamp ASIA 2020について
  • 日記的なYoutubeを再開したい。
  • ブロックエディタに画像はコピペでも張り付く
  • ブロックエディタにマークダウンはだいたい使える