Google

この投稿は3年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2013 年 12 月 10 日 1,291日前)
3,681文字 (読了時間9分)

SPONSORED LINK

この記事は12月1日から24日までの間、僕が気を向いたときにブログを書く高橋文樹オレベントカレンダー2013の10日目です。

さて、Google Analyticsを使っている人は多いと思うのですが、中にはイベントトラッキングなどの高度な機能を使っている人もいるかと思います。たとえば、このサイトでは読了イベントとしてreadというカテゴリを利用しております。

// 読了イベントを計測
// displayedはスクロールした要素が表示されるときに
// 発火されるオリジナルイベント。
// 普通は何も起きません。

$('#contents-last').bind('displayed', function(e, vars){
    try{
        ga('send', {
            hitType: 'event',
            eventCategory: 'read',
            eventAction: document.location.pathname,
            eventLabel: document.title,
            eventValue: vars.passed
        });
    }catch(e){}
}); 

記事ページの最後に見えない要素を仕込んでおいて、それが画面に入ったら記事を読了したとみなしています。vars.passedはページを開いてから経過した秒数ですね。

こういうことをやっておくとなにがわかるかというと…

  • tech系の記事(ソースコードサンプルなんかが載っているページ)はものすごく長い時間読まれる。
  • 意外とみんな最後まで読まない。Analyticsの直帰率より低い印象。

などがわかります。このサイトではやっていませんが、縦横1pxの要素を記事本文の真ん中あたりに仕込むようにすれば、「どのあたりまで記事が読まれるか」という情報が取れますね。

みなさん自分のサイトの改善案に色んな仮説をお持ちだと思うので、あとはそれにあったイベントを仕込めばよいというわけです。

Google Analyticsのローカルでの検証

さて、サイトを運営していて、なんらかのイベントをGoogle Analyticsに登録したいなーとなったとします。で、どうやらできたっぽいんだが本当に動くのかどうかわからんという状況でテストをしたくなります。

開発環境とかステージングサーバとかあればそれでもいいのかもしれませんが、いちいちアップロードするのが面倒なので、ローカルで確認したくなるのが人情というもの。

そこでこの方法です。

一応、Google Analyticsのドキュメント(ユニバーサルアナリティクス用)にはTesting on localhost という項目があるので、できるっちゃできるっぽいんですが、その他諸々便利な点もあるので、この方法を試してみてください。

1. ホストを設定する

ローカルで開発している人は、HTMLオンリーの人ならファイルパスでやっていたり、MampなりXamppなりを使っている人なら http://locahost/test みたいな環境でやっているかと思われます。

が、ここではあえてちゃんとしたFQDNを設定したローカル環境を構築します。

たとえば、このサイトは https://takahashifumiki.com ですが、ローカルは http://takahashifumiki.info で運用するとしましょう。.netとか.bizとか、いまではちょっとダサくなってしまったトップレベルドメインがおすすめです。

まず、takahashifumiki.infoとなった場合、自分のパソコンを指さなければいけないので、hostの設定をしましょう。

  • Mac /etc/hosts
  • Windows C:/Windows/System32/drivers/etc/hosts

上のファイルにこんな記載をします。

127.0.0.1     takahashifumiki.info

これでブラウザにて http://takahashifumiki.info と入力すると、ローカルホストに行くと思われます。Xamppなら、「It works!」とか表示されるんじゃないでしょうか。

2. バーチャルホストを設定する

あとはWebサーバ(大体はXampp同梱のApacheだと思います)の設定を変更します。これはツールによって異なるのですが、だいたいこんな感じ。詳しくは「Xampp virtualhost 設定」とかでググってください。

<VirtualHost *:80>
     ServerName takahashifumiki.info
     DocumentRoot /path/to/document/root
     <Directory "/path/to/document/root">
         Order deny,allow
         Allow from all
         Options FollowSymLinks 
     </Directory>
</VirtualHost> 

/path/to/document/root は適宜読み替えてくださいね。

これで http://takahahisfumiki.info にブラウザでアクセスすると、 /path/to/document/root にあるページが表示されるはずです。

3. Google analyticsでビューを作成する

さて、あとはAnalyticsのトラッキングコードを仕込むだけなのですが、ポイントはビューを作成することです。

ビューは以前「プロファイル」と呼ばれていましたが、要するに同じトラッキングコードで複数の計測パターンを可能にするためのものです。

一番右にあるのがビューです。元プロファイルって書いてあります
一番右にあるのがビューです。元プロファイルって書いてあります

ビューのデフォルトは「すべてのWebサイトのデータ」とかになっていると思いますが、以下の項目を変えましょう。

ビュー名
高橋文樹ローカル環境など、わかりやすい名前に
WebサイトのURL
http://takahashifumiki.info など、上で設定したFQDN

あとは適当でオッケーです。

URLだけ変えれば大丈夫だと思われ
URLだけ変えれば大丈夫だと思われ

4. トラッキングコードをちょっと変える

これは必要なのかどうかよくわからないのですが、一応やってみてください。

ユニバーサルアナリティクスのコードの一部をこんな風に変更します。

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'example.com'});
//↓こうする
ga('create', 'UA-XXXX-Y', {
     cookieDomain: window.location.hostname
}); 

リアルタイムですぐに試せる

さて、ここまで設定すると、Google Analyticsの「リアルタイム」リポートですぐに試すことができます。

リアルタイムイベントでread(読了)とoutbound(外部遷移)が取れています
リアルタイムイベントでread(読了)とoutbound(外部遷移)が取れています

イベントがちゃんと発生しているかとか、そういうのはこれでわかりますね。

おまけ:FQDNでやるメリット

さて、「こんなめんどくせー設定やりたくねーよ、localhostでいいじゃん」という方もいるかもしれません。そのご意見はごもっともなんですが、こうやって一々まともなFQDNを設定することには次のようなメリットがあります。

  • Google Analyticsに限らず、Facebook、TwitterなどのAPIを利用する場合サイトの登録を求められるケースがあり、その際にlocalhostを登録できないことがある。Webfontなどのサービスを利用する場合も同様。

あれ、一個しかない……。もっとあると思ったんですがね。なんですかね。どこいっちゃったんでしょう。

Google Analyticsによるアクセス解析入門~Universal Analyticsを使ったWebマーケティング実践テクニック100

Google Analyticsによるアクセス解析入門~Universal Analyticsを使ったWebマーケティング実践テクニック100 [書籍]

著者衣袋 宏美

出版社技術評論社

出版日2013 年 12 月 20 日

商品カテゴリー大型本

ページ数280

ISBN4774161926

ga.jsからanalytics.jsへの切り替えも始まりました。

Supported by amazon Product Advertising API

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2013 年 12 月 10 日にプログラミングの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

世界のみなさん、あなたの生命か詩か、二者択一、どちらかを選びなさい。もし詩に対して真剣な処置を講じなければ、文明は万事休することになる。遅疑逡巡してはならない。明日からは新しい時代が足を踏み出すだろう。詩はもはや存在しないだろう。古びた霊感に対してあまりにも重過ぎる竪琴は破壊されるだろう。詩人たちは虐殺さるべきである。

— アポリネール

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。