グーグルのアクセス解析ツール Google Analytics は本当に多機能ですが、例えばクリック先を集計する、といった基本的な解析をしてもらうにも、自分でプログラムを用意しなければなりません。
「リンクをクリック」とか「動画を再生」などのユーザーによる行動をイベントと言い、それが発生した時に情報をグーグルに送るスクリプトが要るのです。
でも、あーこれはわからんなーと思いつつ色々調べているうちにだんだん話が見えてきまして。
ある程度理解してみると、そう難しい話でもありませんでした。
要は管理画面でGUIっとやってることを、決まった書式の中に書き込むだけなので。
以下は、とある底辺ブロガーが底辺なりに頑張ったよ褒めてくれなくてもいいけど…in GW の記です。
その書式は新旧二種類あるので、まずどちらが設定されているか確認します。
ライブドアブログの場合、ブログ設定メニューの「外部サービス→Google Analyticsの設定」で連携をオンにすると、ページを表示する時に自動的に解析タグが生成されます。
それを見てみる(ブラウザの「ページのソースを表示」で<head>タグ内を探す)と、
(新タイプは _gaq の代わりに ga()という関数を使う)
両者の相違点は最後に簡単に触れるとして、以下、旧タイプをベースに話を進めます。
このブログでは内部リンク/外部リンクという二つのカテゴリを設定していますが、
広告/画像のようにリンク先の性質や、
記事からのリンク/サイドバーからのリンクのようにリンク元の種類ごとに分けてもいいかもしれません。
ここではリンクをクリックするという行動なので、click としています。
ページタイトルなど。
アフィリエイトサイトの広告やショッピングサイトの商品の価格を設定しておくと、売上が自動計算されるので便利…らしい。
ウチは単純に1にして、クリック数と等しくしています。
カウントするなら true、しないなら false を指定します。
その大半はブログサービス側が php で生成している(タグクラウドとか)ので、これにイベントを設定するには、やはり JavaScript などを使う必要があります。
当初は
一行目で $a という変数に全ての<a>要素を排列にして入れているのに、$a[i] が、オブジェクトではなく href属性の文字列になっているんです。
これでは $a[i] から href属性 や title属性を取り出す算段が成り立たず、仕方なくこんなコードになりました。
明らかにおかしいのになぜこんな挙動になるのかさっぱり分らなくて怖いので、これはボツにしました。
それに、DOM上の<a>要素に onclick属性でイベントを設定していますが、クリックされるかどうかわからないうちに全部の<a>要素を書き変えているのが、非効率とも言えます。
というわけで、上の基本形とは見た目が異なりますが
こちらだとクリックされて初めて関数が呼び出されるので、無駄がありません。
このコードを<script>タグで括って適当なところに貼りつければ、実装完了です。
ただし…
【悲報】ライブドアブログではスマホページに JavaScript を貼る方法がない(記事の中には貼れます)ので、解析できるのはPCページからのトラッキングのみとなります…
旧タイプでは _gaq.push([○,○,○,・・・]) と排列を渡していましたが、こちらでは普通に引数を並べて指定します。
イベント関数の該当箇所も、こんな感じでいいと思います。
「リンクをクリック」とか「動画を再生」などのユーザーによる行動をイベントと言い、それが発生した時に情報をグーグルに送るスクリプトが要るのです。
でも、あーこれはわからんなーと思いつつ色々調べているうちにだんだん話が見えてきまして。
ある程度理解してみると、そう難しい話でもありませんでした。
要は管理画面でGUIっとやってることを、決まった書式の中に書き込むだけなので。
図つきで解説!イベントトラッキングの設定方法|Googleアナリティクス解析のコツ具体的な方法はこちらのサイト様↑でわかり易く解説されているので、純粋に知識を得たい方はここを見れば十分です。
以下は、とある底辺ブロガーが底辺なりに頑張ったよ褒めてくれなくてもいいけど…in GW の記です。
基本形
<a href="リンク先URL" onclick="イベント関数">面白記事A</a>このリンクタグの中の onclick属性に、グーグルへ情報を送信するイベント関数を設定します。
その書式は新旧二種類あるので、まずどちらが設定されているか確認します。
ライブドアブログの場合、ブログ設定メニューの「外部サービス→Google Analyticsの設定」で連携をオンにすると、ページを表示する時に自動的に解析タグが生成されます。
それを見てみる(ブラウザの「ページのソースを表示」で<head>タグ内を探す)と、
<!-- Add Google Analytics Tag // --> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', '(アナリティクスID)']); _gaq.push(['_trackPageview']); _gaq.push(['_setCookiePath', '/']); /**************(略)*************/ </script> <!-- // Add Google Analytics Tag -->_gaq というグローバルオブジェクトが定義されているので、旧タイプですね。
(新タイプは _gaq の代わりに ga()という関数を使う)
両者の相違点は最後に簡単に触れるとして、以下、旧タイプをベースに話を進めます。
_gaq.push() の書式
_gaq.push(['_trackEvent', 'Link', 'click', '面白記事A', 1, false]);_gaq に、pushメソッドで()内の排列を追加します。その内訣は
順番 | プロパティ | 値 | 記入 |
---|---|---|---|
1 | メソッド名 | _trackEvent | 必須 |
2 | カテゴリ | Linkなど | 必須 |
3 | アクション | clickなど | 必須 |
4 | ラベル | リンク先の名前など | 任意 |
5 | イベント値 | 数値 | 任意 |
6 | モニターアクション | 真偽値 | 任意 |
1 メソッド名
_gaq を通してグーグルさんにこれはイベントトラッキングに関する情報ですよ、と伝えるために、'_trackEvent'というキーワードを指定します2 カテゴリ
イベントのカテゴリに名前をつけます。このブログでは内部リンク/外部リンクという二つのカテゴリを設定していますが、
広告/画像のようにリンク先の性質や、
記事からのリンク/サイドバーからのリンクのようにリンク元の種類ごとに分けてもいいかもしれません。
3 アクション
閲覧者の行動に名前をつけます。ここではリンクをクリックするという行動なので、click としています。
4 ラベル
管理画面で見た時にわかり易い名前を指定します。ページタイトルなど。
5 イベント値
1クリックごとに増えるポイント。アフィリエイトサイトの広告やショッピングサイトの商品の価格を設定しておくと、売上が自動計算されるので便利…らしい。
ウチは単純に1にして、クリック数と等しくしています。
6 モニターアクション
同じページ内へのリンク(上の目次とか)がクリックされた時、それをセッションとしてカウントするかどうかを指定します。カウントするなら true、しないなら false を指定します。
コードの実装
自分のブログにどれだけのリンクがあるか、先日トップページ内を JavaScript でカウントしてみたら、233箇所もありました。その大半はブログサービス側が php で生成している(タグクラウドとか)ので、これにイベントを設定するには、やはり JavaScript などを使う必要があります。
当初は
$(function(){ var $a = $('a'); for(var i in $a){ var a = $a[i]; var txt = "_gaq.push(['_trackEvent','Link','click','" + a + "',1,false]);"; a.setAttribute('onclick', txt); } });こんな感じで書いていたんですが、どこかおかしいでしょう。
一行目で $a という変数に全ての<a>要素を排列にして入れているのに、$a[i] が、オブジェクトではなく href属性の文字列になっているんです。
これでは $a[i] から href属性 や title属性を取り出す算段が成り立たず、仕方なくこんなコードになりました。
明らかにおかしいのになぜこんな挙動になるのかさっぱり分らなくて怖いので、これはボツにしました。
それに、DOM上の<a>要素に onclick属性でイベントを設定していますが、クリックされるかどうかわからないうちに全部の<a>要素を書き変えているのが、非効率とも言えます。
というわけで、上の基本形とは見た目が異なりますが
$(function(){ $('a').click( function(e){ var url = $(this).attr('href'), label = $(this).attr('title'); if(!label.length) label = url; _gaq.push([ '_trackEvent', ((url.indexOf("humotomiti.blog.jp") != -1 || url.indexOf("http") == -1 )? '内部リンク':'外部リンク'), 'click', label, 1, false ]); } ); });DOMはいじらずに、スクリプトの中にマウスイベント関数を書く、という方法に変えました。
こちらだとクリックされて初めて関数が呼び出されるので、無駄がありません。
このコードを<script>タグで括って適当なところに貼りつければ、実装完了です。
ただし…
【悲報】ライブドアブログではスマホページに JavaScript を貼る方法がない(記事の中には貼れます)ので、解析できるのはPCページからのトラッキングのみとなります…
ga()の書式(ユニバーサルアナリティクス)
上で少し触れた新タイプがこちら。旧タイプでは _gaq.push([○,○,○,・・・]) と排列を渡していましたが、こちらでは普通に引数を並べて指定します。
ga('send', 'event', 'Link', 'click', '面白記事A', 1, false);排列を示す大カッコがなくなり、'_trackEvent' の所が 'send' と 'event' という二つの引数に置き換わった形ですが、あとは同じ。
イベント関数の該当箇所も、こんな感じでいいと思います。
ga( 'send', 'event', ((url.indexOf("humotomiti.blog.jp") != -1 || url.indexOf("http") == -1 )? '内部リンク':'外部リンク'), 'click', label, 1, false );
コメント