created: 2021-01-11T01:57:42.000Z

Googleタグマネージャ入門

  • Googleタグマネージャ(gtm)はタグを管理するツール
  • 条件、イベントを設定して任意のタイミングでタグを発火させるツール
  • 多くの場合はGoogleアナリティクス(ga)のタグを発火させる
    • データの蓄積と閲覧はga側でやる

概念

Googleタグマネージャの説明では以下の概念が出てくる。

  • タグ
  • トリガー
  • 変数
  • コンテナ

タグ

タグとは普通にhtmlタグのこと。

DMP事業者のトラッキングタグをUIから登録してよしなに配信されるようにする。 ( 配信 とはユーザのブラウザ上で発火させるということ)

gaやyahooなどよく使うタグなどは登録しないでも使えるようになっている。

トリガー

トリガーとは「どういう条件のときにタグを配信するか」という条件のこと。 たとえばデフォルトで用意されているものでもたくさんある。

変数

トリガーで使ったり、gaに投げたりするときに使う変数。 計測されたデータを集計するときに役にたつような変数を上手く使うと便利になる。

たとえば現在ユーザが閲覧しているページのURLは Page URL という変数として設定できる。 この値をトリガーの条件などに使える。

変数をつかうとこんなことができる例
  • このページのh1要素のテキスト(変数)が .+詳細 という正規表現にマッチする場合にタグを出す
  • ページ閲覧時にjsのdataLayer.myvalの値(変数)をgaに投げる
    • jsのdataLayerオブジェクトの中身を変数として使うことができる

コンテナ

複数ドメインにまたがったタグ制御ももちろんできる。 いったんgaでいう サイト のことという理解で良い。

管理上の概念なのでそんなに意味はない。


以下はその他のtips

タグマネージャで管理できないタグ

  • 同期処理が必要になるもの (基本は非同期処理をするタグが想定されている)
  • 画面の表示を変更するもの
    • 例: SNSのシェアボタン

jsの処理でタグの配信タイミングを制御する

gtmでは任意のタイミングでタグを配信したい場合は以下の手順になる

  • イベント名を変更する処理を実装
  • 「イベント名が [[ event_name ]] になったとき」というトリガーを作成しておく
  • 配信したいタグとトリガーを紐付け

イベント名を変更する処理は以下の通り

dataLayer.push({'event': '[[ event_name ]]'});
参考

公式でも紹介されている方法となっている

その他のタグの配信タイミング

デフォルトで用意されているトリガーは色々ある

jsで制御しなくても「クリックされたリンクのURLが正規表現にマッチする場合」といった条件は管理画面から設定できるようで、大体の場合でjsで制御する必要はないかもしれない

ページ内のテキストを変数として使う

pageのURLやクエリパラメータはデフォルトの機能で変数として使える。

ページのtitleやh1要素も次のようにすれば変数として扱える。

  • 内容を変数として扱いたいDOMにid属性を払い出しておく
  • 変数の設定で目当てのDOM要素のIDを参照するように設定
参考

gtmで使える変数をjsから登録する

jsからdataLayerというオブジェクトを通して変数が登録できる

dataLayer.push({'Data Layer Name': 'value'}).

仮想ページビューの計測

たとえばpdfファイルの閲覧数など、タグが発火しないところのビュー数を計測したい場合、仮想ページビューの計測 ということにして計測する。 「このリンクがクリックされたとき」といったトリガーを設定して計測できる。

Googleアナリティクス

gtm(Googleタグマネージャ)はgaをセットで使うのでgaの概念と連携する方法も書く

概念

  • ディメンション
  • 指標

ディメンションはSQLでいうところのGroupBy句に渡したくなる値で、 指標はSQLでいうところのSUMとかの集計関数に入れたくなるような値と言える

連携方法

gtmを使ってgaにデータを投げて、蓄積閲覧できるようにするということは gtmで設定したトリガーからgaのイベント計測タグを配信することになる

gtmの管理UIはgaとよくインテグレーションされていて、 gaのイベント計測タグを配信する際にはディメンションと指標の値を送信できるようになっている