【JavaScript】 gtagでリンククリックを高確率で取得する方法

Googleアナリティクスでボタンがクリックされたかどうかを測定する場合、一つの方法としてonclick属性でgtag関数を呼び出す方法があります。

しかし関数処理中にページが遷移すると、アナリティクスに情報が送信されないという致命的な問題があります。

今回はこの問題の対処について考えてみます。

なおアナリティクスには新しいタグとしてGA4というものが導入されています。
このタグは以前と同じgtag関数を使用するので、この記事はそのまま活かすことができます。

gtagの仕様を見ると、関数の処理後に呼び出されるコールバック関数を登録できることがわかります。

そこで次のようにaタグにonclick属性を追加して、スクリプトを作成してみました。

<a href="https://affi-sapo-sv.com/" 
 onclick="return myAnalyticsEvent(this,'click','myclick','https://affi-sapo-sv.com/');">
https://affi-sapo-sv.com/へ
</a>

onclick属性の処理結果がfalseになると、href属性が無効になります。
■関連記事：【JavaScript】 htmlのonclick属性でイベント引数を取得する方法

なぜ無効にしているは、次のスクリプトで解説します。

<script>
    "use strict";

    const myAnalyticsEvent = ( e,action,category,label) =>{
        if( window.gtag === undefined ) return true;

       const movePage = p => location.href = p;

        const href = e.href;
        setTimeout(()=>movePage(href), 1000);

        gtag("event", action, {
                "event_category" : category,
                "event_label" : label,
                "event_callback": ()=>movePage(href)
        });
        return false;
    };
</script>

上のgtag関数のevent_callbackが、コールバック関数を登録するプロパティです。
しかしこのコールバック関数が呼び出されるのは、myAnalyticsEvent関数が終了した後です。
そのためmyAnalyticsEventがfalseを返して画面遷移を無効にしないと、アナリティクスに情報が送信される前に別のページに遷移されてしまう可能性があるのです。

これで、アナリティクスにクリック情報が送信されるようになるのですが、実は大きな落とし穴があります。

【JavaScript】 onclick属性とaddEventListenerの関連性でお伝えしていますが、使用しているWebページのテンプレートによってはonclickが処理されないケースがあります。

アナリティクス側でイベントを全く補足できないときは、onclickが動作していないことを疑う必要があります。

実際のところ様々な要因により、gtag関数を使用しないのがベストです。

現在GA4を使用しているなら、アナリティクス側の設定でクリックされたリンクタグを特定してイベントとして扱うことができます。
方法は、次のページを参考にしてみてください。
■GA4と旧アナリティクスタグでのイベント送信方法の差異について調べてみた

GA4以前のタグを使用していてGA4に変更したくない場合は、GTM(Googleタグマネージャー)を使用します。
GTM側の設定で特定のリンクがクリックされてときにイベント送信する機能があるので、これを使用します。
こちらの方法は、次のページを参考にしてみてください。
■意味ないと思っていた GTMはイベント計測できるスゴイ子だったので設定してみる

そもそもonclick属性の定義は、プロのプログラマでもミスをすることがあります。
そのためあまり推奨できません。

アナリティクスや他のツールで設定できるなら、そちらを使用すべきです。