Google タグマネージャ(GTM)のルックアップテーブルでイベントのカテゴリやラベルなどを書き換えると便利

  • 投稿日:

この記事はGoogle Analytics Advent Calendar 2015、22日目の記事です。

スマートフォンで電話番号をタップされた数を計測したいというニーズがあります。
a要素がタップされた際、プロトコルが「tel:」の場合にイベントトラッキングを行うというものです。
Google タグマネージャを使うと、計測対象となるすべてのa要素へイベントを仕込む必要がないので楽ですね。こんな感じのHTMLが対象です。

GTMの設定はこんな感じ。

タグ
トラッキングタイプ:イベント
カテゴリ:Tel // 固定の文字列
アクション:{{Click Text}} // クリックされたtelリンク文字列
ラベル:{{Page URL}} // イベントが発生したページ

トリガー
イベントを選択:イベント
有効化のタイミング:Page URL 正規表現に一致 「.*」
配信するタイミング:gtm.element protocol 含む 「tel」

変数
Click Text 組み込み変数
Page URL 組み込み変数
gtm.element protocol 種類:URL 要素タイプ:プロトコル 詳細設定 URLソース:{{Click URL}}
Click URL 組み込み変数

Tag Manager ヘルプ 組み込み変数

さあこれでどうぞご利用ください!
と思っていたら、「番号だけだとパッと見分かりにくい。HTMLソースは変えないけど、GAのレポートでは番号じゃなくて拠点名にして」というご要望をいただきました。
...ということで、GTM変数の「ルックアップテーブル」を使ってみました。

変数
変数名:電話番号>拠点名変換 // 任意の名前
種類:ルックアップテーブル
変数を入力 {{Click Path}}
ルックアップテーブル 入力:HTMLに埋め込んである電話番号 出力:拠点名

GTMルックアップテーブル

変数
Click Path カスタムJavaScript
function () {
return {{Click Element}}.pathname;
}

タグもちょっと変更します。

タグ
トラッキングタイプ:イベント
カテゴリ:Tel // 固定の文字列
アクション:{{電話番号>拠点名変換}} // 変換後の拠点名
ラベル:{{Page URL}} // イベントが発生したページ

イベントアクションの変数を、先ほど作った「電話番号>拠点名変換」へ変更します。
これで動かしてみると、「イベントアクション」に変換後の拠点名が入ってきます。

23903176545_c8712aafaa_o.png
23607248980_1240d1c5d3_o.png

拠点数が多くてすべてのリンクにイベントを仕込むのが大変、HTMLを簡単には変更できないといった事情がある場合には、GTMは便利かもしれません。