この記事は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に埋め込んである電話番号 出力：拠点名
変数
Click Path カスタムJavaScript
function () {
return {{Click Element}}.pathname;
}
タグもちょっと変更します。
タグ
トラッキングタイプ：イベント
カテゴリ：Tel // 固定の文字列
アクション：{{電話番号＞拠点名変換}} // 変換後の拠点名
ラベル：{{Page URL}} // イベントが発生したページ
イベントアクションの変数を、先ほど作った「電話番号＞拠点名変換」へ変更します。
これで動かしてみると、「イベントアクション」に変換後の拠点名が入ってきます。
拠点数が多くてすべてのリンクにイベントを仕込むのが大変、HTMLを簡単には変更できないといった事情がある場合には、GTMは便利かもしれません。