【GTM】誤タップを除いた電話コンバージョンの計測方法

【電話コンバージョンの精度を上げる方法が知りたい人】

「電話番号の誤タップが多くて、実際の問い合わせ件数と数が合わない。。精度の高い電話コンバージョンの設定方法が知りたい。」

こういった疑問に答えます。

この記事を書いている僕はもともとエンジニアをしており、現在はWebマーケ業界で広告運用をメイン事業として働いています。

今回の記事では、そんな僕が 誤タップを除いた電話コンバージョン数 の計測方法についてまとめました。

これを読み終わる頃には、電話コンバージョンの精度を高めるメカニズムから、その設定方法までを理解できますよ。

ちなみに、

「精度は多少低くても良いから、簡単な設定方法を知りたい」

という方は、以下の記事を参考にしてください。

>>【超簡単】GTMを使った電話コンバージョンの設定方法【GA・GA4で計測】

電話コンバージョンの精度を高めるメカニズムを解説

結論から言うと、 電話番号のリンクをクリックしてから一定の時間が経過してもサイト内で操作が行われない場合 のみをコンバージョン（以降、CV）としてカウントします。

当然ですが、きちんと電話をしていたら電話をかけた数秒後にサイト内で操作なんて行えないですからね。

ということで、実装したい内容が分かったところでこの設定をどのようにするのかを解説していきます。

【GTM】誤タップを除いた電話コンバージョンの計測方法【設定手順を解説】

GTMでの設定手順が、以下のとおり。

手順①：JavaScript（JS）コードを記述したタグを作成
手順②：手順①で使用するトリガー（カスタムイベント）を作成
手順③：手順②で作成したものをトリガーにしたイベント（CV）タグを作成

手順①：JavaScript（JS）コードを記述したタグを作成

まずは、 JavaScript（以降、JS）を記述したカスタムHTMLタグを作成します。

GTMの左メニューから [タグ] > [新規] と進みます。

タグの新規作成

タグの種類で [カスタムHTML] を選び、以下のコードを貼り付けます。

<script>
var calltracking = undefined;
var elementA = undefined;
var timeoutID = undefined;
var sendTelSignal = function() {
  dataLayer.push({
    'event': 'correctTel',
  });
}

document.addEventListener('click', function(e) {
  if(e.target.tagName == "a") {
    elementA = e.target;
  } else {
    elementA = e.target.closest("a");
  }
  if(elementA === null) {
    return;
  } else if(elementA.href.indexOf('tel:') == 0) {
    calltracking = {
      timestamp: (new Date()).getTime(),
      element: event.target
    };
    timeoutID = setTimeout(sendTelSignal, 10000);
  } else {
    console.log(e.target); 
  }
});

returnSite = function() {
  if (calltracking) {
    var diff = (new Date()).getTime() - calltracking.timestamp;
    dataLayer.push({
      'event': 'CallCancel',
      'gtm.element': calltracking.element,
      'duration': Math.floor(diff / 1000)
    });
    calltracking = undefined;
    clearTimeout(timeoutID);
    timeoutID = undefined;
  }
};
  
document.addEventListener('touchstart', returnSite);
document.addEventListener('mousemove', returnSite);
</script>

JSコードを記述したカスタムHTMLタグを作成

ちなみに、上記のコードでは、電話番号をタップした後の10秒間 サイト上で何も操作が行われなければイベントが発生する仕組みになっています。

すべて設定ができたら、右上の [保存] をクリックします。

手順②：手順①で使用するトリガー（カスタムイベント）を作成

次に、手順①で作成したタグのコード内で使用しているカスタムイベントを作成します。 GTMの左メニューから [トリガー] > [新規] と進みます。

トリガーを新規で作成

トリガーのタイプで [カスタムイベント] を選択し、残りの項目を以下の画面を参考に設定します。

GTMでカスタムイベントを作成

全て入力したら、右上の [保存] をクリックします。

手順③：手順②で作成したものをトリガーにしたイベント（CV）タグを作成

最後に、手順②で作成したものをトリガーにしたイベントタグ（CVタグ）を設定したら完了です。ここに関してはそこまで難しくないので割愛します🙏

◆ ◆ ◆

というわけで、今回は以上です！本記事が、電話番号の誤タップでお悩み中のあなたのお力に少しでもなることが出来れば幸いです。

GTMのオススメ教材

>> Googleタグマネージャー（GTM）の高度な実践的活用事例｜Udemy >> Udemy(ユーデミー)とは？【特徴や料金、おすすめ講座についても解説】

電話コンバージョンの精度を高めるメカニズムを解説

【GTM】誤タップを除いた電話コンバージョンの計測方法【設定手順を解説】

手順①：JavaScript（JS）コードを記述したタグを作成

手順②：手順①で使用するトリガー（カスタムイベント）を作成

手順③：手順②で作成したものをトリガーにしたイベント（CV）タグを作成

About the author