本文へジャンプ

Google Analyticsで外部リンクや非同期の遷移をカウントする

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

まずはanalytics.jsの読み込み

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


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

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

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



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


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

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

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

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

次の画面へ

といった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サイトのブラッシュアップには日々のマイナーなデータ集計が欠かせません!

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
こんな僕たちの仲間に入りませんか?
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr