MD-Blog_Web Creative

同ウィンドウで外部リンクに遷移した数も集計したい！
非同期でコンテンツが変化したときも内部アクセス数を取りたい！
これらの遷移は通常のGoogle Analyticsタグ（GAタグ）設置だけでは取得出来ません。
ボタンのクリック時やコンテンツが変化する時に、GAの「イベント」としてデータを送信してあげましょう。

まずはanalytics.jsの読み込み

まずは通常通りGAタグを設置します。
Universal Analytics（ユニバーサルアナリティクス）を例に記載します。
旧バージョン（ga.js）をお使いの方は記述が異なりますのでご注意を！

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'ドメイン名');
ga('send', 'pageview');
</script>

続いて、カウントを取得したい遷移（処理）に以下のように記述を加えます。

外部リンクのクリック数を取得する

AタグにonClickを付けて、GAタグのイベントとして集計されるように記述します。
別ウィンドウで開く場合には通常のイベント設定で十分ですが、同じウィンドウで開く場合には「hitCallback」という処理が加わってきます。
分解して記述してみましょう。

<a onclick="
    ga(
        'send', #これは固定
        'event', #これも固定です
        'ボタンの名前（例えば「outbound_Link」）',
        'アクションの名前（例えば「click」とか）',
        'ラベル（分かりやすい名前。例えば「hogehoge.com」とか）',
        {
            'hitCallback': function() {
                document.location = 'http://hogehoge.com';
            }
        }
    );
    return false;"
    href="http://hogehoge.com">

外部のhogehoge.comへ遷移しますよ

</a>

「ボタンの名前」「アクションの名前」「ラベル」には、それぞれ後で集計しやすい名前を付けておきます。
「outbound_Link」「click」「hogehoge.com」みたいな感じで。

つまりGAの処理を行ってからリンクを開く処理を行うぜ、的なノリになるわけですね。

非同期の画面遷移（内部アクセス数）を取得する

正確には「アクセス数」ではありませんが、非同期のコンテンツ遷移で「次の画面へ進むボタンがクリックされた数」といったデータをGAで取得することが出来るようになります。
言ってみれば前述の外部リンクと同じですが、例えば

<div id="data-next-button">次の画面へ</div>

といったHTMLに対して、このdivがクリックされた数を取得するには、

$("#data-next-button").on('click', function(){
    ga(
        'send', #これは固定
        'event', #これも固定ね
        'ボタンの名前（例えば「画面1」）',
        'アクションの名前（例えば「内部クリック」）',
        'ラベル（集計で使う名前。例えば「次へ進む」）',
        {
            'hitCallback': function() {
                ...
                ...（このボタンが押された後の処理が何かあれば書く）
                ...
            }
        }
    );
});

という感じで、JSの中にGAへのデータ送信処理を書いておきます。

今回紹介したカタチだけでなく、様々な方法でこの集計は実現することが出来ます。
GAは、毎年のように進化が続いていて、様々なファンクションが用意されるようになりました。
詳しくはDeveloperサイトのガイドラインをしっかりとチェック！
https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced?hl=ja

ビッグデータ、とはいかないまでも、Webサイトのブラッシュアップには日々のマイナーなデータ集計が欠かせません！