はぴすぷ

【Google Analytics】広告や外部リンクのクリックされた情報を解析！【イベントトラッキング】

      2015/10/07

先月の月次報告で書いてた通り、今月から広告表示の最適化に力を入れていこうと思っています。

7万PV突破！前月比8.4倍！ブログ運営3ヶ月目のアクセス数と収益など公開！2015年9月

最適化するに当たって、現状がどうなっているのか分からないと、改善出来てるのか測定できないですよね。

広告サービスが1つだけなら、広告会社の方で用意してくれているレポートからある程度分かるのですが、当サイトでは複数の広告サービスを複雑に出し分けて利用しているのでそうもいかない。

それ以前に当サイトでは、ココナラを通じて広告スペースを販売しているので、広告主になってくれた人にしっかりレポートを届けたいんです。

どんなお願いも500円～！？【ココナラ】頼むも受けるも自分次第！出品してみた！

なので、自前で効果測定出来る仕組みを実装しようと考えていました。

しかし、Webエンジニア歴1年でブランク2年の私には、実装にどれだけ時間がかかるか分かったもんじゃありません。

これから開発はするつもりですが、Google Analyticsを利用したら簡単な解析ならサクッと出来ちゃうので、まずはGoogle Analyticsに頼ることにしました。

スポンサーリンク

実装はこれだけ

<script type="text/javascript">
jQuery('a').on('click', function() {
    var category = '外部リンク';
    var action = 'クリック';
    var label = $(this).attr('href');
    if (label.indexOf('https://hapisupu.com') != -1 || label.indexOf('http') == -1 ) {
        // 自サイト内のイベントがいらなければreturnで抜ける
        // return;
        category = '内部リンク';
    }
    ga('send', 'event', category, action, label);
});
</script>

もちろん、Google Analyticsは導入していないといけないです！

まだ入れていない人はこちらを参考に。（特にWordPress関係ないですｗ）
WordPressにGoogle Analyticsを導入

ソースはこちらを参考に、だいぶ手を加えました。
googleアナリティクスで簡単にクリックカウント出来るコード

説明

Google Analyticsでイベントをトラッキングする為のコードは最後の1行だけです。

ga('send', 'event', category, action, label);

引数の1つ目と2つ目は固定です。こういうものです！

以降の引数は名前の通り、カテゴリー、アクション、ラベル（任意）です。更にもう一つ後ろに、カウント数（任意）も用意されていますが、使わないだろうと省いています。

詳しくはGoogle公式が日本語で説明してくれているのでそちらを確認してみて下さい。
ユニバーサル アナリティクス ウェブ トラッキング（analytics.js）

その他は、リンクの<a>タグがクリックされた時に、リンク先が内部リンクかどうか判断して何もしないか、カテゴリーを変えるかしています。

「.click」でなく「.on」なのは、Ajaxとかで後から動的に追加されたタグにも対応させる為です。

Google Analyticsで確認

先ほど説明したイベントトラッキング用のコードを仕込んでしばらくすると、データが集まってGoogle Analyticsで確認出来るようになります。

「行動」→「イベント」→「サマリー」等で確認出来ます。

SS_2126

イベントカテゴリから、「内部リンク」や「外部リンク」がどれだけクリックされたかすぐに分かります。

もう一つ「to use this feature visit: EVENT-TRACKING.COM」とかいうのがあるのですが、これはスパムだそうです。なので今後色んな種類が増えると思います…。自分で設定したもの以外は気にしないようにしましょう。

イベントカテゴリから「外部リンク」をクリックすると、外部リンクのみに絞られたデータが確認出来ます。

SS_2129リンク先でラベルを付けているので、プライマリディメンションを「イベントラベル」に変更すると、リンク先ごとのデータを確認できます。

SS_2127

データの量が少ないので、分かり辛いですね…。後日キャプチャ追加か差し替えかします(´・ω・`)

更に、ラベルをクリックしたらラベルごとのデータが確認できます。

これで、どのリンク先がいつ、どれだけクリックされたかを確認出来ますね！

終わりに

思ってた以上に簡単に出来ちゃいました！

今回はリンクである、<a>タグのクリックを対象にしましたが、色んなイベントに対して設定できるので、ユーザーの行動を理解して、より使いやすいサイトを目指したいと思います。

スマホで表示されるメニューのアコーディオンや、サイトの右下にあるページの上部に戻るボタンが使われてるのか、とか気になってたので色々仕込んでみます！

また、解析した結果が集まれば共有したいと思います。それでは！

 - Google Analytics, Webサイト構築