Google アナリティクス（gtag.js）でリンクをイベントトラッキングする

2021年5月18日 追記

今はこんな面倒なことをしなくても Google Tag Manager で設定できるので、この記事のことは忘れて Google Tag Manager の使い方を覚えましょう。
https://tagmanager.google.com/

ダメなパターン

$( 'a.event_tracking' ).on( 'click', function( e ) {
    gtag( 'event', 'click', {
        'event_category': 'イベントカテゴリ',
        'event_label'   : 'イベントラベル'
    });
  });

これだと、次のページの読み込みが始まるとjavascriptの実行が停止してイベントトラッキングが完了しないことがある。
（よく考えれば当たり前だよね。。。）

成功パターン

一旦止めてコールバックで実行すればいい。
https://developers.google.com/analytics/devguides/collection/gtagjs/sending-data?hl=ja

$( 'a.event_tracking' ).on( 'click', function( e ) {
    if ( typeof gtag === 'function' ) { // gtag.js が読まれてる時だけ実行
        e.preventDefault(); // 一旦止める
        var linkUrl = $(this).attr('href'); // そのaタグのリンク先を取得しておく
        gtag( 'event', 'click', {
            'event_category': 'イベントカテゴリ',
            'event_label'   : 'イベントラベル',
            'event_callback': function() { // イベントトラッキングが送信されたら呼び出される
                location.href = linkUrl;
            }
        });
    }
});

セレクタとかはよしなに変更してください。

現場からは以上です。