【おすすめ！】Googleアナリティクスのイベント計測記述をjsに記述して管理する方法

Web2017年4月19日

Googleアナリティクスのイベントトラッキングを活用して、ダウンロードやクリック、または動画再生などのあらゆる「イベント」の回数を計測することができます。今回Web屋の芝生DIYでも、どれだけグローバルナビがクリックされているかを調査すべく、イベントトラッキングを仕込んでみました。よくaタグに直接onclick～で記述されることが多いですが、本記事ではhtmlに直接記述するのではなく、js側からイベントトラッキングを行う方法をご紹介させていただきたいと思います。

そもそもなぜイベント計測をしようと思ったか

Web屋の芝生DIYは、テーマを絞らない雑記ブログ（サイト）です。芝生やDIY等のライフハックやWeb制作情報など様々なテーマを取り扱っています。そういったサイトでどれだけグローバルナビがクリックされているかを検証すべく、今回クリックイベントを仕込みました次第です。

PCで閲覧する場合はグローバルナビが常に表示されていても問題ないのですが、スマートフォン時はこのグローバルナビがそこそこ縦幅を取るので、ハンバーガーにして折りたたむべきかそれとも現状のように常にヘッダーに表示しておくべきか悩みどころだったんですよね。

ハンバーガーにしてグローバルナビを折りたためば、記事単体で見た場合はより記事本文がファーストビューでより見えやすくなり、かつクローズアップされます。ですがその反面、サイトの横遷移においてユーザーに1つアクションを強いる事にもつながります。

そこで今回のクリックイベント計測の結果をもって、現状維持でいくべきかスマートフォン時は折りたたむべきか判断したいと思ったわけです。

イベント計測の仕込みは、jsにまとめて記述することに

よくこの手のGoogleアナリティクスのイベントトラッキングの記述例についてググると、htmlのaタグに直接記述する方法はいくらでも出てきますが、個人的にはhtmlソースを汚すことになるなと感じますし、「今どこにイベント計測を仕込んであるのか」の管理が数が増えてくると難しくなってきます。

対象ページが全て共通のjsを読み込んでいることが前提条件となりますが、1つのjsにまとめておくことで非常に管理しやすくなります。

サンプルコード

以下のスクリプトでjs側にクリックイベント計測を実行させることが可能です。

(function () {

$(function(){

    $('任意のセレクタ a').click(function(){
        ga('send','event','イベントカテゴリ','イベントアクション','イベントラベル');
    });

});

})(jQuery);

イベントカテゴリ	任意のカテゴリ名を設定します。 ※グローバルナビであれば「gnav」など判別できる命名がおすすめ
イベントアクション	任意のアクション名を設定します。 ※クリックであれば「click」、PDFダウンロードであれば「download」など
イベントラベル	任意のラベル名を設定します。 ※例えば同レベルのリンクが複数あれば、それら1つ1つを判別できる命名がおすすめ

Web屋の芝生DIYではグローバルナビにある6つのリンクを計測できるよう、以下の様に記述しています。

(function () {

$(function(){

    //芝生の選び方
    $('header nav ul li.select a').click(function(){
        ga('send','event','gnav','click','select');
    });

    //芝生の購入
    $('header nav ul li.buy a').click(function(){
        ga('send','event','gnav','click','buy');
    });

    //芝生の張り方
    $('header nav ul li.plant a').click(function(){
        ga('send','event','gnav','click','plant');
    });

    //芝生の手入れ
    $('header nav ul li.maintenance a').click(function(){
        ga('send','event','gnav','click','maintenance');
    });

    //芝生の道具
    $('header nav ul li.tool a').click(function(){
        ga('send','event','gnav','click','tool');
    });

    //芝生のマイホームブログ
    $('header nav ul li.blog a').click(function(){
        ga('send','event','gnav','click','blog');
    });
});

})(jQuery);