🎃

GTM知見共有

2022/07/15に公開

React

GTM

frontend

tech

GTMとは

Google Tag Managerの略で、GAや広告系の解析タグ等を一元管理できます。

GTMを利用しない場合は、GA, 広告系タグの記述をページごとに書き分けないといけないですが、
GTMを利用する場合は、GTMのタグだけを各ページに設置しておけば、GTMの管理画面側で制御することが可能です。

参考&引用：https://www.asobou.co.jp/blog/web/gtm

他には、GTMの場合は、ページローディング、クリック、CSSセレクタによるイベント等の様々なトリガーを設定できるので、ノーコード的な体験ができます。（もちろん、CSSセレクタを利用したものや少し複雑なeventを利用する場合は、コードに記述しないといけないです。）

GAオンリーの場合だと、GA用イベントのコードを、イベントを取得したい部分に記述しないといけないので、GTMの様なノーコード的体験は皆無です。
トラッキング内容を変えたいときもコードを変更しないといけないので辛みが多めです。

基本的な設定手順

基本的にGTMで意識することは2つだけです。

トリガーを設定する
タグを設定し、トリガーを紐付ける

トリガーは、GA等のタグを実行させるタイミングを定義するものです。
様々な種類があり、以下のとおりです。

タグは、GAをはじめとしてた解析をするためのツールを指します。
こちらも様々な種類があり、以下以外のサードパーティ製の解析タグが利用できます。

タグとトリガーを設定すると以下のような形になります。
かなりシンプルです。
トラッキングタイプがイベントの場合は、カテゴリ、アクション、ラベルといった項目を設定したりします。

社内でよく利用されている設定方法とSPAの場合の問題点

トリガーとしてよく利用されているのは、

Page URLやPage Pathを利用したページビューイベント
CSSセレクタを利用したクリックイベント

静的なHTMLだったり、PHP等でSSRされるページだと、このレベルで十分だと思います。
ただし、SPAの場合、問題がいくつか発生してきます。

DOMが作成されるタイミングの関係上、CSSセレクタによるクリックイベントのトリガーが設定できない
SPAコンテンツでページ遷移が発生した場合に、ブラウザ的には実際にページが切り替わっている訳ではないので、SPAコンテンツのページビューイベントを取得する際も工夫しないといけない

SPAコンテンツのクリックイベントトリガーについて

基本的には、dataLayer.push()を利用することで、GTM上に設定したイベントを発火させます。
例えば、 gtm_event というトリガーをGTM上で設定するとします。

あとは、これを紐付けたタグ設定を行い、コード上でonClick等のイベントで、下記のような記述をするだけです。
至ってシンプルです。

const clickHandler = () => {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'gtm_event'
    // 渡す値もプロパティで定義し、GTM上で変数定義する
  });
}

詰まっている点

今の所、解決出来ていない点が、「SPAコンテンツでページ遷移が発生した場合のトラッキング」です。
基本的な実装としては上記のdataLayer.pushを利用する形になり、
トラッキングタイプをイベントとしている場合は、上記の方法で取得できるのですが、
トラッキングタイプをページビューとして、以下のような形のものを取得する場合に問題があります。

やりたいことは、Reactで作成したSPAコンテンツの仮想PVが取得することです。

コード上では、ReactのonClickを使用したときのハンドラーに以下の様な内容を定義しています。

  // onClickハンドラー内で定義
  const dataParam = {
    event: GTM_EVENT_PAGE_VIEW,
    page_title: screenName,
    page_path: `${PATH.GTM_VIEW_PATH}/${stepNum}/${screenName}`,
  }
  
  window.dataLayer.push(dataParam)

下記の記事を参考にさせていただきながら、

下記の設定を行ったのですが、GAのページビューには上がってこずといった状況で、色々模索している状態になっています。

設定が間違っているのか、プレビューした時のGA上での確認の仕方が間違っているのかが、わからない状態で色々試行錯誤しています。

この辺りは、詳しい方がいらっしゃったら教えていただきたいです。

GTM/GA記事まとめスクラップ