Categories
GoogleAnalytics

gaPlugin.js マイナーアップデート

gaPlugin.jsをマイナーアップデートさせました。
ちょっとバグフィックスと、ちょっと機能を追加しました。

ダウンロードはこちらから
gaPlugin.js

変更点

CV -> 対象範囲をパス名までからGETパラメータ(?以下)までに変更
timeToComplete -> cookieのExpire指定がおかしかったので修正
getParam -> パラメータが無いときもデータを送信していたので、送信しないように変更
メソッド:virtualPVPlusを追加


新機能vritualPVPlus

たいした機能ではないですが、一定時間以上ページに滞在したユーザーは直帰とさせないために、バーチャルページビューでページビューを飛ばしてしまうという機能です。
GAのセッション定義とは少し変わってしまうので、完璧にセッションを管理できているわけではないですが、ほぼほぼ問題なく直帰と見なすことを防ぐことができると思います。

.virtualPVPlus(seconds)
*機能:
引数で指定した秒数後に「パス名+_時間over」というページビューを送信します。
例:「/index.html_30over」
基本的には指定した時間以上経過した人を直帰としてみなさないようにするためのものです。
そのため、セッションの最初のページでのみ、動作するようにしています。
(30分の有効期限をもったcookieで管理しています。有効期限はページが開かれる度に更新されます)

*引数:
seconds : バーチャルPVが動作するまでの時間

Categories
GoogleAnalytics

Getting Started gaPlugin.js : gaPlugin.jsの簡単な設定方法

2011/03/12修正。

gaPlugin.jsのダウンロード

gaPlugin.jsの具体的な使い方に関する説明がちょっとというか、かなり少なかったので、JSがわからない人向けに簡単な説明をしたいと思います。

ただし、Google Analyticsのカスタム変数とイベントトラッキングの最低限の知識は前提としますので、Google Codeのカスタム変数とイベントトラッキングの項目は事前に読んでおいてください。

カスタム変数 – Google Analytics

イベントトラッキングの概要 – Google Analytics

今回取得するデータ

とりあえず、今回はGAで一般的に取得できる項目に加えて以下のデータを取得できるようにしたいと思います。

  • コンテンツのグループ化
  • GETパラメータを持ったユーザー
  • コンバージョンしたユーザー
  • アクセスした曜日
  • アクセスした時間帯
  • 外部サイトへのリンク・DLリンク

設定ファイル(gaConf.js)のセッティング方法

設定ファイル:gaConf.jsで設定を行います。
それでは、お好きなテキストエディタでgaConf.jsを開いてください。デフォルトのものは日本語文字も使っていますので、文字コードに気をつけてください。デフォルトはUTF8で書かれています。

全般設定 : cnf

まずは全体の設定をします。
gaConf.jsの
cnf : {
という項目を見てください。

//全般設定
cnf : {
//アカウント名 : UA-XXXXXX-Xを入力してください。
account : "UA-XXXXXX-X",
//ページレベルでのカスタム変数のスロット名を配列形式で入力してください。
pageLevel : [1]
},

* account
まずはaccountの所のUA-XXXXXX-Xを、ご自身で取得されたGoogle Analyticsのアカウント名に変更してください。これは必須設定項目です。ここを間違えると、データがあらぬ方向へ飛んでいくので注意してください。

*pageLevel
ちょっとわかりにくいかもしれないですが、カスタム変数でページレベルの変数(scope->3)を利用しているスロット番号を記載してください。
カスタム変数はイベントトラッキングでもデータが送信してしまうので、2重送信を防ぐために、ここで設定した変数をイベントトラッキングデータ送信時に削除しています。ここで設定しないと、外部リンククリックした時も、カスタム変数で設定した値(コンテンツグループなど)がPVとしてカウントされてしまいます。
今回はコンテンツグループの箇所でページレベルのカスタム変数を利用するので、
pageLevel : [1]
としておいてください。
2つ以上利用する場合は
pageLevel : [1, 2]
などカンマ区切りで記載してください。

コンテンツグループの設定

次にコンテンツグループの設定です。
ココが一番ややこしいところだと思います。

//コンテンツグループの設定
cg : {
//コンテンツグループに利用するカスタム変数のカテゴリを指定してください。
category : "ContentGroup",
//コンテンツグループのスコープを設定してください。(デフォルト3 -> PageLevel)
scope : 3,
//コンテンツグループを正規表現で指定してください
//グループ名:/グループ定義/
pages : {
groupA : /.+sampling.+/,
groupB : /ga_test.html$/,
groupC : //test/ga//,
topPage : /^/$|^/index.html$/
}
},

*category :
category欄にはカスタム変数で送信されるカテゴリ名を指定してください。
レポートにはこのカテゴリ名が表示されます。

*scope :
scope欄はカスタム変数のスコープです。
ここを何にするのかは、実はちょっと難しい問題なのですが、とりあえずページレベル「3」としておいてください。

ちなみに、ページレベルで設定した場合は、GAレポート画面でのカスタムレポートでうまくクロス集計できないというよく分からないバグ?があります。。。。
*追記:「セッション」がおかしな値にになってしまいますが、セッション数を出したい場合は、「ユニークイベント数」を利用すれば良さそうです。

*pages :
pages欄でコンテンツグループのルールを設定します。
「グループ名」:「ルール」
という書き方で記載してください。
グループ名は自由に記載して大丈夫です(JavaScriptの予約語と被らないようにしてください)。
このグループ名がGoogle Analyticsのレポートに表示されます。
ルールは正規表現で指定することができます。
ココで記載した正規表現がルート以下のパス名(ドメイン・GETパラメータは含みません)と評価され、マッチされたもの左側に記載された「グループ名」に含まれると判断します。
(JavaScriptのlocation.pathnameと評価しています)

例えば、/products/配下全てを「product」というグループ名で纏めたい場合は
product : /^/products//,
と記載してください。
(正規表現の詳しい説明は省きます)

ここで指定しなかったURLがあった場合は、全て「other」というグループにまとめられます。

(ちなみに、別のコンテンツグループ群を作って別のカスタム変数に入れることもできます)

Getパラメータを持ったユーザー

Getパラメータを持ったユーザーをカウントするための設定は「getPar」という欄にあります。

getPar : {
//カスタム変数のカテゴリ名を指定してください。
category : "Parameter",
//スコープを指定してください(デフォルト2 -> Session Level)
scope : 2,
//取得するパラメータ名を指定してください。
paramName : "cid"
},

*category :
ここにはカスタム変数で利用するカテゴリ名を記載してください。GAのレポート画面で表示されます。

*scope :
ここで、カスタム変数のスコープを記載してください。通常はセッションレベルで利用されると思いますので、「2」としておいてください。ユーザーレベル「1」を利用することも考えられます。

*paramName :
ここに取得したいパラメータの名称を記載してください。
上の設定例では、
http://web-analytics-or-die.org/?cid=neko
というURLが表示されたとき、
「neko」という値が取得され、GAのレポート画面で表示されるようになります。

utm系のパラメータは階層化できて便利なのですが、ちょっと設定が面倒なのと、なぜか通常のヒット数を出してくれないので、これで代用することができます。

コンバージョンしたユーザー

コンバージョンユーザーの取得設定は「cv」欄で行います。

//コンバージョンユーザーの取得
cv : {
//カスタム変数のカテゴリ名を指定してください。
category : "conversed",
//スコープを指定してください(デフォルト1 -> User Level)
scope : 1,
//コンバージョンしたユーザーにつける名前を指定してください。
cvName : "conversed",
//コンバージョンとするURLを正規表現で指定してください。
urlstring : [//test/ga/index.html/, //test/ga/index2.html/]
},

*category :
カスタム変数のカテゴリ名です。他の項目と同様です。

*scope :
カスタム変数のスコープです。セッションレベルについてはGAレポート側でちゃんと設定していれば、アドバンスドセグメントで普通に追えるので、ユーザーレベルにしておいたほうが良いかと思います。ユーザーレベルにしておけば、セッションを超えてコンバージョンしたユーザーを追跡することができます。

*cvName :
コンバージョンしたユーザーにつける名前です。カスタム変数のvalueとして記録されます。

*urlString :
コンバージョンとして定義するURLを正規表現でしていしてください。
ここはパラメータも含めて評価します。

設定は以上です!
他の項目はとりあえず無視しておいてください。

トラッキングセッティング

次にgaPlugin_start.jsの設定を行います。

設定ファイル読み込み

//load configure file. Set the pathname for configure files
var gaConf1 = gaConf.conf1;
var _gaTrackName = "_firstTracker";
var firstTracker = new GaPlugin(gaConf1.cnf, _gaTrackName);
//Cross Domain Tracking Setting
//_gaq.push([_gaTrackName+'._setDomainName', '.sample.com']);
//_gaq.push([_gaTrackName+'._setAllowLinker', true]);
//_gaq.push([_gaTrackName+'._setAllowHash', false]);

ここはクロスドメイン用の設定なので、とりあえず無視しておいてください。

機能の有効化

firstTracker.contentGroup(1, gaConf1.cg);
//firstTracker.dirGroup(1);
firstTracker.getParam(2, gaConf1.getPar);
firstTracker.cv(3, gaConf1.cv);
firstTracker.weekDay(4);
firstTracker.dayTime(5);
//firstTracker.debug();

_gaq.push([_gaTrackName+'._trackPageview']);
//firstTracker.virtualPageviews(gaConf1.cg)

ここで機能を有効化します。
今回はコンテンツグループ、パラメータ、コンバージョン、曜日、時間帯を取得できるようにしますので、上記の通りにしてください。
括弧内の数字はスロット名です。1~5まで設定することができます(基本的には)。

機能の有効化は必ず
_gaq.push([_gaTrackName+’._trackPageview’]);
の前に記載してください。
_trackPageviewまでのデータが送信されます。

オンロードイベント

次に自動外部リンク取得の有効化を行います。

window.onload=function(){
//firstTracker.autoLink(gaConf1.autoLink);
firstTracker.autoLink();
//firstTracker.timeToComplete(gaConf1.timeToComplete);
//firstTracker.allowLinker(gaConf1.allowLinker);
//firstTracker.movieTrack(gaConf1.movie);
};

firstTracker.autLink(); で外部リンク・DLリンクの取得が可能になります。
こまかい設定も設定ファイル(gaConf.js)のautoLink欄で行うこともできます。
その場合は
firstTracker.autoLink(gaConf1.autoLink);
のようにして設定ファイルを読み込むようにしてください。

デフォルトでは
firstTracker.timeToComplete(gaConf1.timeToComplete);
が有効化されているので、頭に「//」を付けて機能を無効化させてください。

これでトラッキングセッティングは終了です!

HTMLページでの設定

HTML側ではタグの直前あたりで、「gaPlugin.js」と「gaPlugin_start.js」を読み込んでください。

<script type="text/javascript" src='/ga/gaPlugin.js'></script>
<script type="text/javascript" src='/ga/gaConf.js'></script>
<script type="text/javascript" src='/ga/gaPlugin_start.js'></script>

src=”パス名” といった感じで記載してください。
通常のGAコード(ga.jsの読み込みなど)もgaPlugin.js内に含まれていますので、これまでのGAコードは削除してください。
gaConf.jsonはgaPlugin_start.js内で読み込みますので、ここでは読み込み不要です。

これで設定完了です!!
そんな難しくないはず!!

Categories
GoogleAnalytics

Google Analytics機能拡張プラグイン gaPlugin.js version2を公開します。

以前、微妙に公開していましたが、かなり使いづらい状態だったので、特にインターフェイス周りを整理し直して、バージョンアップをしました。
今回のバージョンアップでようやく実用レベルにはなったと思います。

gaPlugin.jsのダウンロード
(githubに移行しました)

*注意:
まだベータ版です。利用は自己責任でお願いします。
利用は自由ですが、商用で利用される場合はご連絡いただけると助かります。
追記: とりあえずMITランセンスにしておきます。

特徴

・データ取得機能の強化
Google Analyticsに不足している機能を気軽に補完することができます。
外部サイトリンクのクリック数や曜日別のセッション数など、あると便利なデータを簡単に取得できるようになります。

・複数アカウントの対応
GAが対応している複数アカウントをサポートしました。
2つ以上のアカウントを使って自在にデータを取得することができます。
例えば、1つ目は通常のページビューを取得し、2つ目はグループ化したページビューを取得するということができます。
当然、1アカウント5個までと制限されているカスタム変数も、2アカウントなら10個使うことができます。

・柔軟なカスタマイズ
GAがサポートする範囲内であれば、柔軟にカスタマイズすることができます。
例えば、5個のカスタム変数全てをコンテンツグループに利用することもできます。
通常の_setCustomVarを利用して、個別にカスタム変数を利用することも可能です。

・プラグインを一切使っていません
jQueryやprototype.jsなどのプラグインを一切使わずに作成しています。
シンプルな設計になっているので、プラグインを使った場合と比べて、高速に動作するはずです。また、プラグイン同士の衝突も回避できます。

・設定ファイルで一括管理
基本的に機能を全て設定ファイルで管理するので、各ページごとに異なったタグを入れる必要がありません。全ページ同じタグで簡単に導入することができます。
(一部例外あり)

機能一覧

・外部サイトリンク、ダウンロードリンクの自動取得
外部サイトのクリックや、ファイルのダウンロードクリックを自動的に取得することができます。もうaタグ内にonClick=~なんて書く必要がありません。

・コンテンツグループの設定
コンテンツをグループ化して取得することができます。
通常のレポートでは不可能だったグループ別のセッション数を取得することができます。

・タスク終了までの時間取得
あるページの表示から、あるページの表示までにかかった時間を取得できます。
例えば、フォームの入力ページの表示から、入力完了ページまでの時間を取得できます。

・ムービー閲覧時間の取得
15秒おきにカスタムイベントリクエストを送信することによって、ムービー等の閲覧時間を取得できるようになります。
当然直帰したユーザーも含めた滞在時間が取得できます。

・グループ化バーチャルページビュー
通常のtrackPageviewsの代わりに、コンテンツグループを利用することができます。
コンテンツグループをページビューとみなすことによって、GAのパス解析機能を使うことが可能です。
つまり、あるコンテンツグループの次に見たグループ、ランディングとなったグループなどを追跡できます。
複数アカウント利用と組み合わせると強力な機能になります。

・コンバージョンしたユーザーの特定
コンバージョンしたユーザーを追跡することができます。
GAレポート画面上でもコンバージョンした追跡することは可能ですが、カスタム変数を使っているため、セッションを越えたユーザー単位で追跡することができます。

・パラメータ取得
指定したパラメータを持ったURLを表示すると、そのパラメータの値を取得します。
キャンペーン等の簡易取得に利用できます。

・ディレクトリグループ
コンテンツグループは設定するのが面倒という人には、トップディレクトリをコンテンツグループとして設定することができます。

・_link の自動設定
クロスドメイン解析に必要な_linkも自動的に設定することができます。
それぞれのリンクにonClick~と書く必要はありません。

・曜日の取得
曜日を自動的にカスタム変数に格納します。
曜日別にデータを見ることが可能になります。

・時間帯の取得
朝、昼、夕方などページが見られた時間帯を自動的に取得します。

利用方法

A. 動作ファイル(gaPlugin_start.js)の記述
1. コンフィグファイルの読み込み
var gaConf = loadJson(“/test/ga/js/gaConf.json”);
コンフィグファイルのパスを指定してください。
JSONファイルを読み込みます。

2.トラックネームの設定
var _gaTrackName = “_firstTracker”;
マルチアカウントトラッキングに必要なトラッカーの名称を設定します。
名称はどんなものでも構いません。

3.計測用オブジェクトの作成
var firstTracker = new GaPlugin(gaConf.cnf, _gaTrackName);

4.各種設定
クロスドメイン用の設定など各種設定してください。

5.機能のON
利用する機能を定義してください。

6.trackPageview
データを送信します。
_gaq.push([_gaTrackName+’._trackPageview’]);
メソッド:virtualPageviewsを利用することもできます。
(併用はできません)

7.onloadイベントの設定
autoLinkなどonloadイベントを設定します。

8.2つめのアカウント設定
複数アカウントを利用する場合は、2つめ以降のオブジェクトを生成してください。
方法は1-7と同様です。

B.HTMLファイルへの記述
gaPlugin.jsと動作ファイル(gaPlugin_start.js)を読み込んでください。

 <script src="/js/gaPlugin.js" type="text/javascript"></script>
 <script src="/js/gaPlugin_start.js" type="text/javascript"></script>

gaPluginのAPI

API一覧
new
.contentGroup
.dirGroup
.getParam
.cv
.dayTime
.weekDay
.virtualPageviews
.autoLink
.timeToComplete
.allowLinker

——————————–
new (conf, trackName)
*機能:
計測用オブジェクトを作成します。

*引数:
conf : 全般設定のコンフィグ
trackName : 任意の文字列

*confCgの形式:

    //全般設定
    cnf : {
    //アカウント名 : UA-XXXXXX-Xを入力してください。
        account : "UA-XXXXXX-X",
    //ページレベルでのカスタム変数のスロット名を配列形式で入力してください。
        pageLevel : [1]
    },

——————————–
.contentGroup(slot,confCg);
*機能:
設定ファイルに記載したURLルールに基づいて、コンテンツをグループ化します。
カスタム変数を利用します。

*引数:
slot : カスタム変数のスロット番号(1-5)
confCg : コンテンツグループのコンフィグ

*confCgの形式:

    //コンテンツグループの設定
    cg : {
        //コンテンツグループに利用するカスタム変数のカテゴリを指定してください。
        category : "ContentGroup",
        //コンテンツグループのスコープを設定してください。(デフォルト3 -> PageLevel)
        scope : 3,
        //コンテンツグループを正規表現で指定してください
        //グループ名:/グループ定義/
        pages : {
            groupA : /.+sampling.+/,
            groupB : /ga_test.html$/,
            groupC : //test/ga//,
            topPage : /^/$|^/index.html$/
        }
    },

——————————–
.dirGroup(slot);
*機能:
トップディレクトリでグループ化します。
ルートディレクトリの場合は「top」となります。
カスタム変数を利用します。

*引数:
slot : カスタム変数のスロット番号(1-5)

——————————–
.getParam(slot, confPar);
*機能:
設定ファイルに指定したパラメータを持っている場合、その値をカスタム変数に保存します。
カスタム変数を利用します。

*引数:
slot : カスタム変数のスロット番号(1-5)
confPar : コンテンツグループのコンフィグ

*confParの形式:

    //GETパラメータの取得
    getPar : {
        //カスタム変数のカテゴリ名を指定してください。
        category : "Parameter",
        //スコープを指定してください(デフォルト2 -> Session Level)
        scope : 2,
        //取得するパラメータ名を指定してください。
        paramName : "cid"
    },

——————————–
.cv(slot, confCv)
*機能:
設定ファイルに指定したURLのページを閲覧したとき、コンバージョンユーザーとして定義することができます。
カスタム変数を利用します。

*引数:
slot : カスタム変数のスロット番号(1-5)
confCv : コンテンツグループのコンフィグ

*confCvの形式:

    //コンバージョンユーザーの取得
    cv : {
        //カスタム変数のカテゴリ名を指定してください。
        category : "conversed",
        //スコープを指定してください(デフォルト1 -> User Level)
        scope : 1,
        //コンバージョンしたユーザーにつける名前を指定してください。
        cvName : "conversed",
        //コンバージョンとするURLを正規表現で指定してください。
        urlString : [//test/ga/index.html/, //test/ga/index2.html/]
    },

——————————–
.dayTime(slot);
*機能:
アクセスした時間帯を記録します。
0時-5時:late night
5時-9時:early morning
9時-12時:morning
12時-15時:after noon
15時-18時:evening
18時-21時:late evening
21時-24時:night
として、定義されます。
ユーザー側の時間が記録されるため、時差がある場合はサーバー側と異なる時間帯が記録されます。
カスタム変数を利用します。

*引数:
slot : カスタム変数のスロット番号(1-5)

——————————–
.weekDay(slot);
*機能:
アクセスした曜日が記録されます。
ユーザー側の時間が記録されるため、時差がある場合はサーバー側と異なる曜日が記録されることがあります。
カスタム変数を利用します。

*引数:
slot : カスタム変数のスロット番号(1-5)

——————————–
.virtualPageviews(confCg);
*機能:
コンテンツグループをページビューとして、カウントします。
通常の_trackPageviewと併用できません。

*引数:
confCg : コンテンツグループのコンフィグ
(形式は.contentGroupの設定と同じです。)

—————————-
.autoLink(confLink)
*機能:
外部サイトへのリンク、DLリンクを自動的に取得できるようになります。
カスタムイベントを利用します。

*引数:
confLink : オートリンクのコンフィグ
(省略することができます)

*confLinkの形式:
    //オートリンクの設定
    autoLink : {
        //除外するドメイン名を配列で指定してください。
        internalDomain : ["www.sample.com"],
        //
        category : {
            offSite : "OffSiteLink",
            download : "DownLoadLink"
        },
        //取得するDLファイルを設定
        dlFiles : {
            emailLink : /^mailto:(.+)$/i,
            pdf: /^(.+.pdf)$/i,
            zip: /^(.+.zip)$/i,
            PowerPoint: /^(.+.pptx?)$/i,
            Excel: /^(.+.xlsx?)$/i,
            Word: /^(.+.docx?)$/i
        }
    },

—————————-
.timeToComplete(confTC)
*機能:
設定ファイルに記載したスタートページを表示してから、終了ページを表示するまでの時間をカウントします。
カスタムイベントを利用します。

*引数:
confTC : timeToCompleteのコンフィグ

*confLinkの形式:
    //timeToCompleteの設定
    timeToComplete : {
        //カスタム変数のアクション名を指定してください。
        action : "timeToComplete_TEST",
        //計測開始URLを配列で指定してください。
        startUrl : [/ga/start1.html$/, /ga/start2.html$/],
        //計測終了URLを配列で指定してください。
        endUrl : [/ga/end1.html$/, /ga/end2.html$/],
        //利用するcookie名を指定してください。
        cookieName : "_utmTimeToComp"
    },

—————————-
.allowLinker(confLinker)
*機能:
クロスドメインサイトの取得に必要な_linkを自動的に設定します。
_setAllowLinkerをtrueにしておく必要があります。
aタグのみ対応しています。
formタグでのPOSTによるサイト遷移については対応していません。

*引数:
confLinker : allowLinkerのコンフィグ
*confLinkerの形式:

    //Cross Domain用Trackingの設定
    allowLinker : {
        //許可するサイトのURLを指定してください。
        allow : ["www.sample.co.jp", "www.sample2.co.jp/"]
    }

——————————–

Categories
GoogleAnalytics

[ga]utm_系のパラメータを短い1つのパラメータで代用する方法 その2

久しぶりにGAネタです。
以前、utm_系のパラメータを短い1つのパラメータで代用する方法 を書きましたが、
これだとファイル内に設定が必要なので、ちょっと面倒かなと思います。
個別設定をなくすために、一つのパラメータをディリミタで区切って、2つ分の情報を付与する方法で作り直しました。

また、utm_系のパラメータを使った場合、GA側ではリファラーを見れなくなるという素敵な仕様なので、utm_contentなどに、どのページで使われているかの情報を付けなくてはいけません。ということは、自動配信系の広告の場合はどのページからやってきたのかを追えなくなってしまいます。

なので、utm_mediaとutm_campaignにはリファラー情報を自動付与するようにしました。
utm_sourceとutm_campaignについては一つのパラメータにディリミタ(_)を挟んで入れるようにします。
例えば、?gaParam=yahoo_ sale
というパラメータを付与した場合
utm_source : yahoo
utm_campaign : sale
utm_media : リファラー元ドメイン(ない場合はnoRef)
utm_content : リファラー元URL(ない場合はnoRef)

と付きます。

例:
http://tanakanakana.happy888.net/ga_rd2/index.html?gaParam=yahoo_sale

リダイレクト先:
http://tanakanakana.happy888.net/ga_rd2/index.html?utm_sorce=yahoo&utm_campaign=sale&utm_media=web-analytics-or-die.org&utm_content=web-analytics-or-die.org/

これだと 管理も楽で良いかもって思っています。
ソースコードは↓です。

ga_rd2.js

var _ga_url = {

  //パラメータを取得
    getQuery : function(name){
        if(location.search){
                var query = location.search;
                query = query.substring(1,query.length);
                var qArray = [];
                qArray = query.split("&");
                for(var i=0;i<qArray.length;i++){
                    var param = qArray[i].split("=");
                    if(param[0] === name){
                        return param[1];
                    }
                }
            }
        },

    //リファラーを取得
    get_ref : function(){
      var ref = (document.referrer).replace(/https?:///, "")
      var ref = ref.replace(/?.+$/, "")
      if(ref){
        return [ref.split("/")[0], ref]
      }else{
        return ["noRef", "noRef"]
      }
    },


    //パラメータの設定
    get_param : function(str){
          var param_arr =  (this.getQuery("gaParam")).split("_");
          var ref_arr = this.get_ref()

          //各変数を設定
                var u_source = "?utm_sorce=" + param_arr[0];
                var u_media =  "&utm_media=" + ref_arr[0];
                var u_campaign = "&utm_campaign=" + param_arr[1];
                var u_content =  "&utm_content=" + ref_arr[1];

                return (u_source + u_campaign + u_media + u_content)
        },
//GAコードの生成(標準のものから変更しています)
  ga_script : function(){
          document.write ("<script type='text/javascript' src='/js2/gaPlugin.js'></script><script type='text/javascript' src='/js2/gaConf.js'></script>");
  },
    main : function(){
        param = this.getQuery("gaParam");
            if((!(location.search).match(/utm_/)) && param){
          utm_param = this.get_param(param);
          //alert(utm_param);
                red_url = ( location.pathname + utm_param);
             location.href = red_url
            }else{
          this.ga_script();
        }
        }

}

_ga_url.main();

ちなみに、gaParamというパラメータを持った場合はGAコードを読み込まないようにしています。これであれば、間違いなく2重でカウントするということはなくなります。

Categories
GoogleAnalytics

[ga]utm_系のパラメータを短い1つのパラメータで代用する方法

GAのパラメータって長いですよね。
utm_sourceだとか、utm_campaignだとか。
それはそれで階層化できて便利な反面、パラメータの管理が複雑になって大変になってしまうという負の側面もあります。
ポイントは4つもパラメータを付けなくてはいけないという点だと思います。
それによって、管理が複雑になってURLが長くなってしまいます。
短縮URLを使わずにURLをTwitterやFacebookとかに載せるのは難しい状態です。

以前、Web担当者フォーラムで
長くて汚いutm_*パラメータ付きURLをキレイにするGoogle Analytics用の少しマニアックなスクリプト
という記事があったので、これにインスパイアされて1つパラメータで4つのパラメータの代用をするスクリプトを書きました。
Web担の方はページが表示された後にリダイレクトされてパラメータ消えるという何が嬉しいのかいまいちわからない仕組みでしたが、こちらは逆にどこかのサイトにURLを張るときにパラメータ1つで4つ分の意味を持たせるというスクリプトです。

仕組みは単純です。
1.パラメータを見る
2.JS内の定義データと照合させる
3.マッチしたら、定義データの通りにutm_系のパラメータを展開させる
4.utm_付きのURLにリダイレクトさせる

例)
http://tanakanakana.happy888.net/async.html?twitid=neko
にアクセスすると、
http://tanakanakana.happy888.net/async.html?twitid=neko&utm_source=twitter&utm_medium=twitter&utm_campaign=neko&utm_content=neko2010_10_2
にリダイレクトされます。
当然、utm_系のデータはGAに記録されます。
http://tanakanakana.happy888.net/async.html?twitid=neko
はGAにデータが飛ぶ前にリダイレクトされるので計測されません。

こんな感じです。
現在は一つのJSファイルの中に定義データも含めていますが、
定義データはjsonでDBから吐き出すみたいな感じだと運用しやすいかもしれません。

ga_rd.js

var _ga_url = {
//config
    conf : {
        twitid : ["twitter", "twitter"],
        mixiid : ["mixi", "mixi"]
    },

    getQuery : function(name){
        if(location.search){
                var query = location.search;
                query = query.substring(1,query.length);
                var qArray = [];
                qArray = query.split("&");
                for(var i=0;i<qArray.length;i++){
                    var param = qArray[i].split("=");
                    if(param[0] == name){
                        return param[1];
                    }
                }
            }
        },

    get_param : function(str){
            var date = new Date();

            var param_str = this.getQuery(str)
            return "&utm_campaign=" + param_str + "&utm_content=" + param_str + date.getFullYear() +"_" + date.getMonth() + "_" + date.getDay()
        },


    main : function(){
        for (var i in this.conf){
            if((!(location.search).match(/utm_/)) && this.getQuery(i)){
                //alert(i);
                var str = "&utm_source=" + this.conf[i][0] + "&utm_medium=" + this.conf[i][1] + this.get_param(i);
                var url_str = document.URL + str;
            location.href = url_str;
            }
        }
    }
}
_ga_url.main();

conf 内で各パラメータのutm_sourceとutm_mediumを定義します。
utm_campaignはパラメータのvalue値、utm_contenはvalue値+日付にしています。
全部指定するのは面倒なので、とりあえずこうしていますが、
DBから吐き出す仕組みがあれば、全て指定するようにしてもいいと思います。

Categories
GoogleAnalytics

アクセス解析ツールのタグチェック

ビーコン型のアクセス解析ツールは高機能で便利なのですが、
タグの挿入作業が非常に面倒です。
それに加え、データが取れているのかを検証しなくてはいけません。

カスタマイズを行っている場合は、JavaScriptが正確に動作しているのかをチェックする必要があるので、
プログラムでソースコードを舐めるだけでは不十分です。
ブラウザ上でJavaScriptを実行させてから、パケットを解析する必要があります。

タグ挿入はテキストエディタやスクリプト言語などで置換一発でできますが、
タグチェックはなかなか大変です。

■ブラウザをクローリングさせる方法
一番ラクなのは、ローカルにプロキシを立てて、ログを保存し、
ブラウザをクローリングさせる方法です。
出来上がったログをプログラムで整形すれば完成です。
私はRubyを使って、実装しています。
プロキシ(Webrickで作成)を立てる
→ IE操作(win32ole)して、クローリング。
→  ログを整形

ただし、onClickでデータを取ろうとすると、クローリングでは中々うまくとれません。
あと、httpsはデータがとれません。。。。

■HttpFoxでパケットをキャプチャ
しょうがないので、FireFoxのアドオン「HttpFox」 でパケットキャプチャをします。
FireFoxで評価対象のリンクをクリックしまくります。
iMacrosを使えば自動化できたりします)

「utm」(Google Analyticsの場合)、「2o7」(SiteCatalystの場合)などで、
フィルターを掛けると、欲しいデータのみが出てきます。

絞られたどれか一つを選んで右クリック→「Copy All Rows」で全データをクリップボードにコピーできます。

ここからが肝です。
出てきたデータを整形しなくてはいけません。
それを自動化するJavaScriptを作成しました。
これが言いたかっただけです。

SiteCatalyst用
Google Analytics用
の2種類を用意しています。

HttpFoxからコピーしたデータを上のテキストエリアにいれて、
「変換」を押せば、完了です!
エクセルにでもコピペしてください。
わかりやすいデータになっています。

ソースコードはこんな感じです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>解析用パケットデータ変換</title>
<script language="JavaScript">

<!--
var change = {
    //ここで取得したいデータを定義
    //SiteCatalyst用
    /*コメントアウトしてください。
    conf : {
        tool : "SiteCatalyst",
        varStr : ["pageName", "g", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "c10", "v1", "v2", "v3", "v4", "v5", "pev1", "pid"],
        },
    */


    //Google Analytics用
    conf : {
        tool : "GoogleAnalytics",
        varStr :  ["utmwv", "utmn", "utmhn", "utme", "utmcs", "utmsr", "utmsc", "utmul", "utmje", "utmfl", "utmdt", "utmhid", "utmr", "utmp", "utmac", "utmcc"],
        },

    str : function()    {
        var tmp = document.getElementById("input").value;
        return tmp.replace(/rn/g, "n");
    },
    makeArr : function(str){
        var tempArr = str.split("n");
        //console.log(tempArr[2]);
        var resArr = new Array;
        for (var i=0; i<tempArr.length; i++){
            resArr.push(tempArr[i].split("&"));
        }
        return resArr;
    },
    extra : function(arr){
        var exArr = new Array;
        for(var i=0; i<arr.length; i++){
            for(var j=0; j<this.conf.varStr.length; j++){
                tmpReg = new RegExp("^" + this.conf.varStr[j] + "=");
                if(arr[i].match(tmpReg)){
                    exArr[j] = arr[i].replace(tmpReg, "");
                }
            }
        }
        return exArr;
    },
    toStr : function(arr){
        var tmpStr = this.conf.varStr.join("t") + "n";
        for(var i=0; i<arr.length; i++){
            tmpStr = tmpStr + arr[i].join("t") + "n";
        }
        return tmpStr;
    },
    decode: function(str){
        if(this.conf.tool == "SiteCatalyst"){
            console.log(this.conf.varStr);
            return unescape(str);
        }
        if(this.conf.tool == "GoogleAnalytics"){
            console.log(this.conf.varStr);
            return unescape(decodeURI(str));
        }
    },

    go : function(){
        var str1 = this.str();
        var arr1 = this.makeArr(str1);
        var arr2 = new Array;
        for(var i=0; i<arr1.length; i++){
            arr2[i] = (this.extra(arr1[i]));
        }
        var formStr = this.toStr(arr2);
            console.log(this.conf.varStr);

        document.getElementById("output").value = this.decode(formStr);
        document.getElementById("output").focus();
        document.getElementById("output").select();
    }
}

var char = function(){
    document.getElementById("input").value = "";
    document.getElementById("output").value = "";
}



-->
</script>
</head>
<body>
<form id=form3>
<textarea id="input" rows="15" cols="40" onFocus="javascript:char();"></textarea>
<p>
<a href="#" id="submit" onClick="javascript:change.go();return false;">変換</a>
</p>
<textarea id="output" rows="15" cols="40"></textarea>
</form>
</body>
</html>

Google Analyticsの場合は「utme」をもう少し分解した方がわかりやすいかもしれないですね。

Categories
GoogleAnalytics

GAでOvertureの指定キーワードを取得する方法

基本的にはutm_termにキーワードを入れれば良いのですが、
それが出来ない場合が多々あります。
トラッキングURLをONにして、カスタムフィルタを以下のように
設定すれば、データを取得できます。
トラッキングURLをONにすると、
OVRAW
OVKEY
OVMTC
OVADID
OVKWID
OVCAMPGID
OVADGRPID
というパラメータが付きます。
・OVRAWはユーザーが入力したキーワード
・OVKEYは購入したキーワード
・OVMTCは検索の種類です(スポンサードサーチ?インタレストマッチ?)
OVRAWはリファラーで取れるので必要なくて、その他はID系なので、特に必要ありません。
OVKEYとOVMTCを組み合わせて、ユーザー定義に表示させています。
やっぱりカスタムフィルタは色々活用しがいがありそうです。
Categories
GoogleAnalytics

ライブラリの非同期トラッキング移行

以前、作ったGA用ライブラリの非同期トラッキングへの移行ができました。
非同期トラッキングへの移行作業は、結構大変かなと思っていたのですが、思っていたよりもスムーズにできました。

動作するファイルは↓に置いています。
【通常】
http://tanakanakana.happy888.net/async.html
【クロスドメインのテスト】
http://tanakanakana.happy888.net/async2.html
【追加ライブラリ】
http://tanakanakana.happy888.net/async3.html

機能を再掲すると、
■標準ライブラリ:gaPlugin.js、gaConf.js
外部サイトへのリンク、DLリンク(.zip,.pdfなど)を自動的に取得
(カスタムイベント)
コンテンツグループを正規表現で指定
(マルチカスタム変数)
パラメータクエリをマルチカスタム変数へ格納
コンバージョンしたユーザーを区別
(マルチカスタム変数)

■追加ライブラリ:ga_scroll.js
(外部ライブラリのjQuery.jsとjquery.mousewheel.min.jsが必要)
ページレベルでの詳細データを取得するためのライブラリです。
UserInsightのレポーティング無しでのパクリです
スクロールされた位置を記録(最下部)
滞在時間を記録
ホイールアップの回数
ホイールダウンの回数
マウスクリックの回数
これらをカンマ区切りで1つのマルチカスタム変数に格納します。
一つだけ抜き出して、カスタムイベントに入れています。
(デフォルトではスクロール位置。滞在時間に変更も可能)

ちなみに、ページ離脱時のタイミング(onUnload)でデータを取得しているので、
ほんとにほんとの滞在時間を取得することができます。
ただし、onUnloadはきまぐれなイベントなので、結構動作しないときがあります。
ブラウザを閉じるときはやばいです。
ページ遷移は大体とれます。
あと、jQueryを使っているので、パフォーマンスが落ちます。
基本的にはランディングページとかで詳しく見たい場合にのみ使うようなイメージです。

まだちょっと設定がシンプルじゃないので、もうちょっとシンプルにしてほしいなーって感じです。あと間接効果をどうするか。。。。

Categories
GoogleAnalytics

非同期トラッキングへの移行のポイント

urchin.jsではなく、ga.jsを使っている場合は、移行する必要はないと思います。

多少計測ミスが起きづらくなるみたいですが、大してメリットもないので。
が、もし移行したい場合はちょっと面倒かもしれないです。
通常の解析しかしていない場合は、GA画面上で出てくるコードスニペットを貼りつければいいだけなので、全然大したことないのです。
ただし、以前のコードでは</body>の直前が基本でしたが、非同期コードでは
<body>直後が推奨されています。こないだまで<head>ないでしたが。
非同期コードの場合は結局どこで置いても大して変わらなそうです。
何らかのカスタマイズが行われている場合は面倒がおきます。
基本的に以前のコードでは、
pageTracke._setCustomVar(index, name, value, opt_scope);
みたいな形で入っていたものが、
_gaq.push([‘_setCustomVar’,index, name, value, opt_scope]);
という形になります。
_gaq.pushの後に配列形式でデータを入れていきます。
最初の変数は、メソッド(_setCustomVarなど)で、2つ目移行はメソッドに対する引数が入ります。
このような形式で統一されています。
カスタムイベントの場合は
_gaq.push([‘_trackEvent’, category, action, optional_label, optional_value);
です。
クロスドメイン用のsetAllowLinkerは
_gaq.push([‘_setAllowLinker’, true],):
となります。
_gaq.pushの中身はまとめることもできて、
_gaq.push(
[‘_setAccount’, ‘UA-12345-1’],
[‘_setAllowLinker’, true],
[‘_setAllowHash’, false],
[‘_setCustomVar’,1,”test1″,”testa”, 3],
[‘_setCustomVar’,2,”test2″,”testb”, 3],
[‘_trackPageview’]
);
こんな形で書くこともできます。
基本的には、これまでpageTrackerで利用できたメソッドは全部利用できるみたいです。
まだサイト上にあるマニュアル も微妙に変わってなかったりしますが、同じような感じでなんとなくいじってたら、うまく動きました。
Categories
GoogleAnalytics

Google Analyticsで、どこまでスクロールしたのかが分かる

2011年4月24日追記
このファイルは完全に修正しました。
最新版は下のページにあります。
http://web-analytics-or-die.org/?p=355

このページのスクリプトは、バグまみれなので、使わないようにしてください。

———–

GAを使って、どこまでスクロールされたのかを取得するプラグインを作成しました。
User Insightの機能いいなって思って作りました。

ついでに、
・ページでの滞在時間
・マウスクリック回数
・マウスホイール(上)利用回数
・マウスホイール(下)利用回数
も取得しちゃっています。

トラックイベントの変数に最大スクロール位置を入れて、
ひとつのカスタム変数の中に「:」区切りで全ての値を入れています。
GAを使って簡単にデータを取ることを目的としていますので、マウス位置の動きとかをとりたい場合は、素直にUserInsightを入れましょう。

サンプルサイト
http://tanakanakana.happy888.net/scroll.html

ga_scroll.js
(2011/4/24 リンク外しました。)

var firstTime = new Date().getTime();

$(function() {

    var conf = {
    //カスタムリンクに入れる変数を設定
        link_var : "scroll_p",
    //マルチカスタム変数で利用するスロット
        slot : 1,
    //マルチカスタム変数のカテゴリ名
        category : "pageData",
    //サイト内で使用しているページレベルのカスタム変数
        page_var : [1,2],
    //_trackEvent(category, action, optional_label, optional_value)
    //トラックイベントのカテゴリ名
        l_category : "pageData",
    //トラックイベントのアクション名
        l_action : "scroll_point",
    //トラックイベントのラベル名
        l_label : "scroll_point"
    }


    //初期化
    var d = {
        scroll_p : 0, //スクロール位置
        durTime : 0.00, //滞在時間
        wheelUp : 0,  //ホイールアップの回数
        wheelDown : 0, //ホイールダウンの回数
        mClick : 0 //マウスクリックの回数
    }

    //前処理:ページレベルのカスタム変数を消去
    for(var i=0; i<conf.page_var.length; i++){
        pageTracker._deleteCustomVar(i);
    }

    var getVar = function(){
        for(var s in d){
            if(s == conf.link_var){
                return eval("d." + s);
            }
        }
    }

    var setVar = function(d_array){
        var temp = d_array[0];
        for(var i=1; i < d_array.length; i++){
            temp = temp + ":" + d_array[i];
        }
        return temp;
    }


    var loopWait = function(timeWait) {
        var timeStart = new Date().getTime();
        var timeNow = new Date().getTime();
         while( timeNow < (timeStart + timeWait ) )
     {
         timeNow = new Date().getTime();
    }
        return;
    }

    $(window).scroll(function(){
        var temp_p = $(window).scrollTop();
        if(d.scroll_p < temp_p){
            d.scroll_p = temp_p
        }
        //console.log(d.scroll_p);
    });

    $(window).mousewheel(function(e,del){
        if(del>0){
            d.wheelUp++;
            }else{
            d.wheelDown++;
        }
        //console.log("up:"+ d.wheelUp + ",down:" + d.wheelDown);
    });

    $(window).click(function(){
        d.mClick++;
        //console.log(d.mClick);
    });

    $(window).unload(function(e){
        var nowTime = new Date().getTime();
        d.durTime = (nowTime - firstTime)/1000;
        var cstmLink = getVar();
        var d_array = [d.scroll_p, d.durTime, d.wheelUp, d.wheelDown, d.mClick];
        var cstmVar = setVar(d_array);
        //console.log(cstmLink + ">>" + cstmVar);

        //mcvにセット
        pageTracker._setCustomVar(
            conf.slot,
            conf.category,
            d_array,
            3
        );
        //トラックイベント
        pageTracker._trackEvent(
            conf.l_category,
            conf.l_action,
            conf.l_label,
            parseInt(cstmLink)
        );
        loopWait(50);
    });


 });

トラックイベントに入れる変数は変更可能です。
滞在時間をトラックイベントにすることもできます。
これを使うと念願の直帰ユーザーの滞在時間まで取れます!
(クロス集計で余裕でだせます!)
トラックイベントを利用すると、GAの画面上で平均値を出すことができるので、
パッとみたいものをトラックイベントに入れれば良いかと思います。

■諸注意
*重くなります
作るの大変そうだったので、JavaScriptのライブラリ(jQueryとjQueryプラグイン)を使っています。
一般的な環境では気にならない程度ですが、確実にサイトのパフォーマンスは下がります。
その他のライブラリ(prototype.jsなど)を使っている場合は、そのままでは共存できません。コードを改編すれば、共存することもできますが、ライブラリを2つ使うと、パフォーマンスが落ちるので、あまりオススメしません。
逆に既にjQueryを使っているサイトであれば、パフォーマンスの問題はそれほどないです。

*動作がとろくなります
ビーコンを読み込むイベントは「onUnload」イベントを使っています。
ページを移動した時、ページを閉じたときに、ビーコンを読み込んでいます。
その際、50msの遅延処理を行っているので、ちょっと遅いなくらいに感じるかもしれないです。

*全部のデータが取れるわけではないです
onUnloadイベントは結構テキトーなイベントでブラウザによっては取得できないこともあります。全てのデータを取るというつもりではなく、あくまでも傾向を知るという形で使った方が良いかと思います。
Google Chromeでは遅延処理が効かなくなっていたので、取れない場合もあるかもしれないです。
ブラウザごとの挙動の違いは↓にまとまっています。
http://hisasann.com/housetect/2008/09/onunload.html

*全ページに入れることはあまりオススメしません
動作が重くなるので、全ページに入れることはあまりオススメできません。
ランディングページなど、ココぞというページにだけ使う方が良いかと思います。
GAの仕様として1セッション当たり500リクエストまでに制限されていますが、 ページ移動時、ページ閉じる時だけなので、その点は問題ないと思います。

*これまでのプラグインとは一応共存できる
これまで作った他のプラグインとは一応共存できているみたいです。
ただし、オフサイトリンククリック時にも 50msの遅延処理を行っているので、さらに重く感じるかもしれないです。
サンプルサイト

■インストール方法

各種jsを用意し、アップロードした後、
GAコードが適切に入っているHTMLのヘッダ内に

<script src=’jQueryへのパス’></script>
<script src=’jquery.mousewheel.min.jsへのパス’></script>
<script src=’ga_scroll.jsへのパス’></script>

を入れてください。パスは適宜変更してください。
これだけできっと動きます。