サイト内のクリックが丸裸!Google Analyticsのイベントトラッキングを埋め込む方法

Google Analyticsのイベントトラッキングコードを仕込んでみる

ブログのアクセス解析のデファクトスタンダードともいえるGoogle Analytics。

実はPV数や訪問数の解析だけではなくて、リンクタグがクリックされているかも解析することもできます!

「イベントトラッキング」という方法なのですが、今回、クリックされたかを計測したいリンクにその「イベントトラッキング」に必要なコードを埋め込んでみましたので、その手順を紹介します。

Google Analytics イベントトラッキング

「なにやら特別なコードをリンクタグに埋め込むとGoogle Analyticsでリンクをクリックされたことを解析できるらしい!」

というところまでは聞いたことがあり、やってみたいとは思っていたものの「難しそうだな…」となかなか手が出せずにいた「イベントトラッキング」

  • プロフィールページへはどのリンクタグから入ってきているのか
  • RSSの登録リンクはクリックされているのか

ということを知りたくて、今回頑張って導入してみました。

イベントトラッキングについて細かいところまで理解すると大変ですが、「ブログ内の特定のリンクがクリックされたことを解析する」だけであれば意外にも導入は簡単です!

トラッキングコードを導入!

ユニバーサルアナリティクス(analytics.js)とそれ従来型(ga.js)で設置するコードが違うので適したコードを使う必要があります。

たらハコはWordPressに移ってからユニバーサルアナリティクスにかえたので、ユニバーサルアナリティクス版を導入してます!

ユニバーサルアナリティクス(analytics.js)の場合

リンクタグのイベントに追加するのは下記のコード

ga('send', 'event', 'カテゴリ', 'アクション', 'ラベル', '値');

※カテゴリやアクションについては後述します。

実際の設置例は↓(見やすく改行してあります)

<a
 href="https://twitter.com/yosiakatsuki" 
 target="_blank" 
 onclick="ga('send', 'event', 'about', 'click', 'ab-t-follow-mid');"
>guutarayossiyをフォロー</a>

aタグに「onclick=”ga(‘send’, ‘event’, ‘about’, ‘click’, ‘ab-t-follow-mid’);”」を追加しました。

このタグはaboutページの真ん中くらいにあるTwitterのフォローリンクのものです。

ラベルの部分の「’ab-t-follow-mid’」でどこのリンクかが一意になるようにしています。

従来型(ga.js)の場合

リンクタグのイベントに追加するのは下記のコード

_gaq.push(['_trackEvent', 'カテゴリ', 'アクション', 'ラベル', 値]);

※カテゴリやアクションについては後述します。

実際の設置例は↓(見やすく改行してあります)

<a 
 href="https://tarahako.com/about" 
 onclick="_gaq.push(['_trackEvent', 'side-prof', 'click', 's-pf-more']);"
>詳しくはコチラ >></a>

旧ブログの時に使っていたコードです。

aタグに「onclick=”_gaq.push([‘_trackEvent’, ‘side-prof’, ‘click’, ‘s-pf-more’]);”」を追加しました。

各属性について

カテゴリ(必須)
イベントのカテゴリを設定します。僕は「nav」「header」など、ブログのどの位置に配置したかを記述しています。
アクション(任意)
リンクがクリックされたことを知りたいので「click」と記述。
ラベル(任意)
ブログ記事で言う「タグ」みたいなものです。わかりやすいラベル名をつけます。僕はここにもブログのどの位置に配置したリンクかがわかるように設定しています。
値(任意)
僕は省略しています。イベントに対して値を設定できるようです。
opt_noninteraction(任意)
実は「値」の後ろにあるプロパティ。ここをtrueに設定すると、直帰率に影響を与えなくなります。使い方をよく考えないといけないプロパティ。とりあえず指定なしで使ってます。

カテゴリ以外は任意のプロパティですので、細かく分ける必要がなければカテゴリだけ指定してもいいかもしれません。

僕はカテゴリに「ヘッダ」「ナビゲーション」「サイドバー」といった、ブログ内のどのエリアのリンクタグかがわかるように値をセット、ラベルにブログ内で一意な値をセットして、どのリンクタグがクリックされたかわかるように設定しています。

効果測定

設置しただけでは意味がないので、ある程度データが溜まったら効果測定してみます。

Google Analytics レポート

レポートは[行動]→[イベント]からレポートを選んで確認できます。

Google Analyticsのイベントトラッキング効果測定

設置したばかりですのでまだまだデータはないですが、今後増えることに期待したいです!

Analytics Tiles

iPhoneアプリからの確認は無料アプリのAnalytics Tilesがオススメです。

確認するためには「event ~」のタイルを追加します。

analyticstilesで確認

僕は「event label」を追加しました。

よっしーのひとこと

よっひー

自作テーマを作る時に「やろう!」と重い腰を上げたのですが、調べてみたらコードの導入自体はとっても簡単でびっくりしました!

ただ、計測値をどのようにブログの改善につなげていくかはまだよくわかってない状態…

ひとまずはいろいろとリンクタグの位置を変えては効果測定の繰り返しで、ブログの改善を図ってみたいと思います。

FeedlyのフォローリンクとTwitterのフォローリンクは押されやすい位置を早めく見つけたいですね!

ではまた。