【GA4】コールトラッキングの質を向上させる方法

はじめに

本記事は、弊社エンジニア似田貝が下記の記事にてご紹介したUAでのコールトラッキングを、GA4で実装する方法をご紹介するものです。

実際の成果については、下記の記事をご覧ください。
» 電話コンバージョン（コールトラッキング）の質を計測し意思決定を補助するレポート

電話番号クリック計測の課題

電話によるお問い合わせがどれくらい発生したかを可視化するため、サイトに掲載された電話番号のクリック回数を計測しているサイトも多いかと思います。しかしこの計測には、間違えて電話をかけてしまいそうになったユーザーの誤タップもカウントされてしまうという課題があります。

とくに電話番号クリックをコンバージョンに設定した場合、誤タップがカウントされることで、GAや広告管理画面に表示される成果とビジネス上の成果に大きな乖離が生まれる、という現象が発生してしまいます。

この課題の解決策として誤タップと正常な通話を識別することができれば、より正確なユーザー行動が把握でき、サイトの改善や広告キャンペーンの最適化につながると考えられます。

「誤タップ」をどのように可視化するか

誤タップと正常な通話を識別するため、それぞれの場合にユーザーがどのような行動をとる可能性が高いか考えてみましょう。

誤タップをしたユーザーの行動

ユーザーは電話以外の何かしらの目的をもってサイトを閲覧していたはずです。その途中で誤って電話番号をクリックしてしまった場合、電話をキャンセルし、当初の目的のためのサイト閲覧を再開するのではないでしょうか。

またこの場合、「電話番号クリック」から「サイト閲覧再開」までの時間はおそらく10秒以内に完結すると考えられます。

誤タップをしたユーザーの特徴

電話をキャンセルしサイトに戻ってくる。
電話番号クリックからサイトに戻ってくるまでの時間はおそらく10秒以内。

誤タップではないユーザーの行動

ユーザーの目的は電話をかけることです。そのため、電話をかける目的が達成された後、すべてのユーザーがサイト閲覧を再開するとは限りません。

電話後にサイト閲覧を再開した場合でも、「電話番号クリック」から「サイト閲覧再開」までには数分かかると考えられます。

誤タップではないユーザーの特徴

電話後、サイトに戻ってこない可能性がある。
サイトに戻ってきたとしても、電話番号クリックから数分後である。

通話時間（電話番号クリック〜閲覧再開の時間）がカギ

上述したユーザー行動の特徴を踏まえると、「電話番号クリック」から「サイト閲覧再開」までの時間（通話時間）を可視化することができれば、誤タップがどれくらい発生しているのか把握することができそうです。

電話後、サイト閲覧を再開しなかったユーザーの通話時間は把握できませんが、これらのユーザーは誤タップではないとみなすことができます。今回の目的は「誤タップを可視化する」ことであるため、彼らの通話時間が把握できなくても問題ありません。

以降では、GA4で通話時間を計測するための具体的な実装方法についてご説明します。

GA4で通話時間を計測する方法

本記事ではGoogleタグマネージャーを使用した実装方法をご紹介します。

以下の実装方法は、弊社のチーフテクノロジーマネージャーである山田良太の個人ブログ「SEM Technology」を参照しております。併せてご確認ください。
» 無料でコールトラッキングの精度を高める技術 | SEM Technology

カスタムHTMLタグを作成

通話時間をデータレイヤーに出力するためのカスタムHTMLタグを作成します。トリガーは電話番号リンクがあるページの「DOM Ready」が望ましいです。

<script type="text/javascript">
;(function() {
  var calltracking = undefined;
  document.addEventListener('click', function(e) {
    if (e.target && e.target.href && e.target.href.indexOf('tel:') == 0) {
      calltracking = {
        timestamp: (new Date()).getTime(),
        element: e.target
      };
    }
  });
  callListener = function () {
    if (calltracking) {
      var diff = (new Date()).getTime() - calltracking.timestamp;
      dataLayer.push({
        'event': 'Call',
        'gtm.element': calltracking.element,
        'duration': Math.floor(diff / 1000)
      });
      calltracking = undefined;
    }
  };
  document.addEventListener('touchstart', callListener);
  document.addEventListener('mousemove', callListener);
})();
</script>