MENU

JavaScript

【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属性の定義は、プロのプログラマでもミスをすることがあります。
そのためあまり推奨できません。

 

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

 

音楽で集中力アップ!
通勤中の暇つぶしもOK!
amazon musicはスマホで
気ままに好きな音楽を聴けるのが魅力ですね♪


あなたはサラリーマン脳?

 

あなたは人の下でしか働けないというサラリーマン脳ではないですか?

まさかの時の備えは、今とは全く違う発想でないとあまり意味がありません。
また同じまさかがありますからね。

自分だけの力で収入を得られるという経験を、一度してみてください。
僕のように、あなたの人生観が大きく変わりますよ。


記事の内容について

 

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


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

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

そんなときは、ご意見もらえたら嬉しいです。

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

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ