リンククリックを検知するための主な実装パターン

Webページ上のリンククリックをイベントとして送信する場合、主に次のような実装パターンがあります。

A. リンクURLに専用のクエリ文字列を付与し、viewイベントにそれが含まれるようにする
B. リンク要素のクリック時にKARTEにイベントを飛ばすための処理を呼ぶ

なお、「ページ上の要素を指定して計測する」イベントを設定することで、KARTEの管理画面上の設定のみで同様のことを実現できます。

「ページ上の要素を指定して計測する」イベント（β版）の設定方法 | KARTEサポートサイト

A. リンクURLに専用のクエリ文字列を付与し、viewイベントにそれが含まれるようにする

サイト内リンクについては、aタグのhref属性に登録するリンクURLに対してクリックトラッキング用のクエリ文字列を付与しておくことで、遷移先ページで発生したviewイベントのデータから「〇〇ページのリンクをクリックして流入した」という事実を知ることができます。

サイト側HTML実装例

<div>
  <a href="https://example.com/?link_id=foo_lp_bottom">詳細はこちら</a>
</div>

なお、遷移先ページURLのクエリ文字列については、viewイベントの「閲覧ページのクエリ文字列（access.uri.query）」というフィールドに含まれます。

Aの注意点

この方法は、サイト内リンクでしか利用できません
遷移元のページと遷移先のページの両方に、同一KARTEプロジェクトの計測タグが設置されている必要があります

B. リンク要素のクリック時にKARTEにイベントを飛ばすための処理を呼ぶ

リンク要素に登録したclick時イベントリスナに対して、KARTEへのイベントトラッキング処理を含めることで、リンククリックしたまさにその事実をKARTEにイベント送信することができます。

実装例

<div id="foo_link">
  <a href="https://example.com/" target="_blank">詳細はこちら</a>
</div>

var foo_link = document.querySelector('#foo_link > a');
foo_link.addEventListener('click', function(e) {
    if (window.krt) {
        krt('send', 'foo_event', {
            url: e.target.href
        });
    }
});

Bの注意点

リンクが同一ブラウザタブでの遷移の場合、ページ遷移によってJavaScriptの実行が停止され、イベント計測が失敗する可能性があります

より確実にイベント送信の完了を待ちたい場合は、次のように一時的にページ遷移を止めるような実装パターンを取ることで、イベント送信の成功率を上げることができます。ユーザー体験とのバランスに考慮した上で、ご検討ください。

var foo_link = document.querySelector('#foo_link > a');
foo_link.addEventListener('click', function(e) {
    if (window.krt) {
        e.preventDefault(); // ページ遷移をストップ
        krt('send', 'foo_event', {
            url: e.target.href
        });
        setTimeout(function() {
            location.href = e.target.href; // 1秒後にページ遷移
        }, 1000);
    }
});

よくある質問

Bの実装パターンで、ページ遷移前にイベント送信が完了しなかった場合はどうなりますか？

KARTEの計測タグでは、イベント送信処理が次の2ステップに分かれています
1. イベントデータの送信キューをlocalStorageに登録する
2. localStorageのイベントデータを実際にKARTEに送信する
1の処理の前にページ遷移してしまった場合は、イベントの送信に失敗します
1と2の間にページ遷移してしまった場合は、次に計測タグ設置ページを閲覧したタイミングでイベントが再送されます

詳細は送信待ちイベントデータのキューイングをご覧ください。

`tracker.link()`というメソッドはページ上のリンククリック計測に使えますか？

tracker.link()は、KARTEの古いタグ（v1）の記述方法です。タグv1のサポート終了とともに、このメソッドも利用できなくなりました
代わりに本記事で紹介している実装方法をご利用ください

ページ上のリンククリックを計測する