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

更新日:2021/04/26

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

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

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

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

 

アナリティクスに送信されるまで待つコード

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

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

HTML


<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属性でイベント引数を取得する方法

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

JavaScript


<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を返して画面遷移を無効にしないと、アナリティクスに情報が送信される前に別のページに遷移されてしまう可能性があるのです。

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

 

onclickが処理されないケース

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

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

 

gtag関数は使用しないのがベスト

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

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

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

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

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

更新日:2021/04/26

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。