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内で読み込みますので、ここでは読み込み不要です。

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

Leave a Reply