3.3. 外 部 ライブラリの 利 用 ここでは 幾 つか 外 部 のライブラリの 有 効 活 用 例 をご 紹 介 します 3.3.1.jQuery を 使 って 外 部 リンク 計 測 を 簡 単 にする jquery は 無 料 でオープンソースである 軽 量 な JavaScript ライブラリです 第 2 部 で 説 明 した 通 り 外 部 へのリンクがクリックされた 時 に バーチャル( 仮 想 )ページビュー をカウントするには リンクをクリックした 時 に JavaScript が 実 行 されるように リン クの<a>タグのプロパティーで onclick にトラッキングコードを 入 れるという 方 法 があり ます ページによっては この 外 部 リンクが 多 数 あって <a>タグの onclick を 全 部 書 きかえ るのが 面 倒 です そこで jquery を 使 って<a>タグがクリックされた 時 に 処 理 するようなス クリプトを 記 述 することができます 下 記 は 非 同 期 ga コードの 際 の 実 装 例 です </head>の 直 前 に 実 装 します まずは jquery を 先 に 読 み 込 んでおいて ga 非 同 期 コードの 後 にもう 一 つのスクリプトを 記 述 します 太 字 部 分 が 追 記 した 部 分 になります <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript"> var _gaq = _gaq []; _gaq.push(['_setaccount', 'UA-*******-1']); _gaq.push(['_trackpageview']); (function() { var ga = document.createelement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(ga, s); })(); </script> 230
<script type="text/javascript"> $(function(){ $('a').click(function(){ var url = $(this).attr('href'); if( (url.match(/^http(s?): / //)) &&(url.indexof(window.location.host) == -1) ){ _gaq.push(['_trackpageview', '/click/' + encodeuri($(this).text())]); } }); }); </script> 動 作 としては <a>タグがクリックされた 時 に 稼 働 ($('a').click(function(){});)し <a> タグのリンク 先 が http から 始 まっている つまり 絶 対 パスで 記 述 されているものは 外 部 サ イトへのリンクだとみなして アンカーテキストを 抽 出 (encodeuri($(this).text()))し て /click/の 文 字 列 の 後 に 繋 げるという 処 理 をして そのページが 1 ページビューあった という 記 録 をするというものです /click/という 仮 想 のディレクトリ 配 下 のページのようなパターンにしておくことで レ ポート 上 でも コンテンツの 詳 細 からドリルダウンしてみれば まとめてみることがで きるという 訳 です 記 述 方 法 はいろんな 書 き 方 ができるようです 上 記 のコードは 下 記 metaboy さんのブログを 参 考 にしました http://metaboy.blog23.fc2.com/blog-entry-1345.html ryownet(りょうねっと)さんは 下 記 のように 記 述 しています <script type="text/javascript"> $(document).ready(function(){ $("a[href^=http]").click(function(){ var url = $(this).attr('href'); if( url.indexof(location.hostname)<0){ var text = $(this).text(); _gaq.push( ['_trackpageview', '/click/' + encodeuri(text)] ); } }); }); 231
</script> http://analytics.ryow.net/2010/11/26-232618.php 実 践 CMS*IA では 下 記 のように 記 述 しています <script type="text/javascript"> $(document).ready(function(){ $('a').filter(function() { return this.hostname && this.hostname!== location.hostname }).click(function(){ _gaq.push(['_trackpageview', '/click/' + encodeuri($(this).text())]); }); }); </script> http://www.cms-ia.info/news/automate-exit-link-tracking-with-jquery/ ただ 私 がテストした 限 りでは 一 部 のブラウザでそもそも onclick での 計 測 が 出 来 ていな いという 問 題 があることがわかりました 具 体 的 には Chrome と Safari で Google Analytics の GIF 画 像 のリクエストを 送 信 する JavaScript が 実 行 されませんでした リン クは 正 常 に 動 作 していますが これはこの jquery を 使 った 方 式 だけではなく 第 2 部 でもご 紹 介 した Google が 例 示 し ている 普 通 の 方 法 でも 同 じでした ブラウザあるいはそのバージョンによって 全 て 問 題 なく 動 作 している 訳 でもないということに 注 意 しましょう その 辺 りの 経 緯 は 下 記 をご 参 考 になって 下 さい http://ibukuro.blogspot.com/2010/11/google-analyticsonclickchromesafari.html 232
3.3.2.gaAddons を 使 って 各 種 クリック 計 測 を 簡 単 にする gaaddons は Stephane Hamel 氏 が 開 発 した 外 部 リンクやダウンロードなどのクリック 計 測 を 簡 単 にできる JavaScript のプログラムです 現 在 では 非 同 期 ga.js コードにも 対 応 しています 個 人 や 非 営 利 ではフリーで 利 用 できますが 企 業 サイトやコンサルタントの 利 用 などにはライセンスフィーが 必 要 です http://gaaddons.com/doc/index.htm < 非 同 期 ga コードの 際 の 実 装 > 下 記 は 非 同 期 ga コードの 際 の 実 装 例 です </head>の 直 前 に 実 装 します 太 字 部 分 が 追 記 した 部 分 になります gaaddons-2.1.1.min.js を 上 記 URL から 入 手 し 計 測 するサイト にコピーしておきます jquery のファイルをまず 呼 び 出 しておいてプログラムを 実 行 させ ます そして _trackdownload などの 記 述 を 追 加 します <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="/path-to-your-scripts/gaaddons-2.1.1.min.js"></script> <script type="text/javascript"> var _gaq = _gaq []; _gaq.push( ['_setaccount', 'UA-XXXXX-X'], ['_trackdownload'], ['_trackoutbound'], ['_trackmailto'], ['_trackpageview'] ); (function() { var ga = document.createelement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(ga, s); })(); </script> 呼 び 出 せる 関 数 はこの 3 つだけではありません 次 のような 関 数 があります 233
_formanalysis 入 力 フォームで 最 後 どこまでカーソルが 進 んだかを 追 跡 する _setdayofweek 閲 覧 曜 日 をカスタム 変 数 にする _setdualmode 自 分 が 用 意 したサーバへデータを 送 る _setxdomain クロスドメインの 計 測 を 自 動 で 行 う _trackerror 404 や 500 エラーを 簡 単 に 計 測 する _trackloadtime ページのロード 時 間 を 計 測 する _trackrealbounce 30 秒 など 一 定 時 間 が 経 過 したら 直 帰 と 看 做 さない 計 測 をする _4Q iperceptions の 調 査 システムと GA の 統 合 を 行 う これらの 関 数 に 関 してはこちらをご 覧 になって 下 さい http://gaaddons.com/doc/calls.htm それでは 冒 頭 にご 紹 介 した 3 つの 関 数 について 解 説 します _trackoutbound 外 部 へのリンクがクリックされた 回 数 を 計 測 します デフォルトでは イベント として カウントされます コンテンツ > イベントトラッキング > カテゴリで outbound という カテゴリが 出 来 ます アクションは click となります ラベルは 飛 び 先 の URL です 外 部 リンクでのダウンロードの 場 合 は _trackdownload と 共 に 計 測 がされます また ドメインを 跨 ぐ 計 測 とは 互 換 性 はありませんので 注 意 しましょう またデフォルトではこ のトラッキングは 直 帰 率 に 影 響 を 与 えます(つまり 動 作 すれば 直 帰 になりません) 下 のスクリプトは 全 てのオプションまで 表 示 したものになります {} 内 はオプションで すので デフォルトで 構 わなければ 前 述 の 一 行 の 記 述 で 問 題 ありません _gaq.push(['_trackoutbound', { onbounce: true, // optional boolean method: 'event', // optional 'event' 'page' category: 'outbound', // optional string action: 'click', // optional 'click' 'mouseup' value: 0, // optional real include: /./, // optional regex exclude: /^$/, // optional regex format: '/%category%/%action%/%hostname%%pathname%' // optional string }]); onbounce はデフォルトでは true となって 他 にアクションが 発 生 しなくても 直 帰 とな 234
りません false にすると 他 にアクションが 発 生 しなければ 外 部 リンクのクリックだけな ら 直 帰 となります method はデフォルトではイベントの 扱 いですが page とすればバーチャル( 仮 想 ) ページビューの 扱 いになります category はデフォルトでは outbound というカテゴリのイベントになりますが 別 のカ テゴリ 名 を 指 定 することができます action は mouseup と 指 定 すると リンクのクリックではなく 右 クリックでメニュー を 表 示 するようなものも 含 めて 右 左 中 央 関 係 なく 全 てのマウスクリックをカウントする ようになります value は method でイベントを 選 択 した 場 合 に このイベントに 割 り 当 てられる 値 のこ とです デフォルトでは 0 となります include はラベルの 飛 び 先 の URL の 対 象 を 指 定 するフィルタするもので exclude は 特 定 の 飛 び 先 の URL を 除 くフィルタです format はトラッキングのための 分 類 を 指 定 する ものです 詳 細 は 下 記 をご 覧 ください http://gaaddons.com/doc/_trackoutbound.htm _trackdownload ファイルがダウンロードされた 回 数 を 計 測 します デフォルトでは ページビュー とし てカウントされます 外 部 リンクでのダウンロードの 場 合 は _trackdownload と 共 に 計 測 がされます デフォルトでは 拡 張 子 の doc docx xls xlsx ppt pptx exe rar zip pdf xpi mp3 が 対 象 です コンテンツ > コンテンツで/download/というパスにファイル 名 がつい て 表 示 されます またデフォルトではこのトラッキングは 直 帰 率 に 影 響 を 与 えます(つま り 動 作 すれば 直 帰 になりません) 下 のスクリプトは 全 てのオプションまで 表 示 したものになります {} 内 はオプションで すので デフォルトで 構 わなければ 前 述 の 一 行 の 記 述 で 問 題 ありません _gaq.push(['_trackdownload', { onbounce: true, // optional boolean method: 'page', // optional 'page' 'event' category: 'download', // optional string action: 'click', // optional 'click' 'mouseup' 235
value: 0, // optional real include: /.(docx* xlsx* pptx* exe rar zip pdf xpi mp3 mp4 flv wmv)$/i, // optional regex exclude: /^$/, // optional regex format: '/%category%/%action%/%hostname%%pathname%' // optional string }]); 前 項 の_trackOutbound と 同 様 なオプションの 内 容 になりますので ここではそれぞれ を 詳 しく 述 べるのは 省 略 しますが 下 記 を 参 考 として 下 さい http://gaaddons.com/doc/_trackdownload.htm _trackmailto mailto のリンクがクリックされた 回 数 を 計 測 します デフォルトでは イベント として カウントされます コンテンツ > イベントトラッキング > カテゴリで mailto というカ テゴリが 出 来 ます アクションは click となります ラベルはリンクアドレスです また デフォルトではこのトラッキングは 直 帰 率 に 影 響 を 与 えます(つまり 動 作 すれば 直 帰 にな りません) 下 のスクリプトは 全 てのオプションまで 表 示 したものになります {} 内 はオプションで すので デフォルトで 構 わなければ 前 述 の 一 行 の 記 述 で 問 題 ありません _gaq.push(['_trackmailto', { onbounce: true, // optional boolean method: 'event', // optional 'event' 'page' category: 'mailto', // optional string action: 'click', // optional 'click' 'mouseup' value: 0, // optional real include: /./, // optional regex exclude: /^$/ // optional regex }]); 前 項 の_trackDownload と 同 様 なオプションの 内 容 になりますので ここではそれぞれ を 詳 しく 述 べるのは 省 略 しますが 下 記 を 参 考 として 下 さい http://gaaddons.com/doc/_trackmailto.htm < 同 期 ga コードの 際 の 実 装 > 同 期 ga.js コードの 場 合 は 下 記 URL から gaaddons.js をダウンロードして 計 測 対 象 サイト 内 に 置 いたうえで 下 記 スクリプトを 同 期 ga.js コードの 下 に 追 記 するだけです 236
http://blog.immeria.net/2009/01/google-analytics-script-to-track.html Outbound リンクと Email リンク Download リンクの 3 つに 対 応 しているものと 思 われます <script src='gaaddons.js' type='text/javascript'></script> 全 てイベントとして 計 測 されます アクションは 3 つとも click となります カテゴリ はそれぞれ outbound mailto download です ラベルはそれぞれ 飛 び 先 の URL メ ールアドレス ダウンロード 先 の URL です ダウンロードに 対 応 する 拡 張 子 は doc docx xls xlsx ppt pptx exe zip pdf xpi が 対 象 です 237
3.4. 各 種 ツール 活 用 3.4.1.HTTP(S) 通 信 ログを 確 認 するツール Fiddler2 (for Win) < Fiddler2 とは> Fiddler は 自 分 のパソコンとインターネット 間 の HTTP(S) 通 信 のログを 確 認 することが できるツールです プロキシとして 動 作 し HTTPS のアクセスにも 対 応 しています ま た フ リ ー ウ エ ア の ア プ リ ケ ー シ ョ ン な の で 無 料 で す た だ し Windows7/2000/XP/2003/Vista/2008/だけに 対 応 しています その 他 のシステム 要 件 はダ ウンロードページで 確 認 して 下 さい http://www.fiddler2.com/fiddler2/ Fiddler2 の 具 体 的 な 利 用 用 途 としては アクセス 解 析 ツールのデータが 正 常 に 送 信 され ているかチェックをすることを 取 り 上 げます < Fiddler2 の 実 装 > 以 下 の 手 順 は Windows XP ブラウザは Internet Explorer 7.0 の 場 合 です まず 下 記 Fiddler2 のダウンロードページにアクセスします http://www.fiddler2.com/fiddler2/version.asp 図 3.4.1.1 Fiddler2 のダウンロードページ 238
次 に 上 部 の Install Fiddler2 をクリックします ファイルのダウンロード 画 面 が 出 てきますので ファイルを 保 存 し ダウンロードした Fiddler2Setup.exe をダブルクリッ クします 図 3.4.1.2 ダウンロードした Fiddler2Setup.exe のアイコン 起 動 した 画 面 でファイルの 実 行 ボタンを 押 すと License Agreement の 画 面 になるので 確 認 の 上 右 下 の I Agree ボタンを 押 します 図 3.4.1.3 License Agreement の 画 面 インストール 先 のフォルダーを 指 定 してから 右 下 の Install ボタンを 押 します こ れでインストールは 終 了 です 239
図 3.4.1.4 インストール 先 指 定 画 面 < Fiddler2 の 起 動 > インストールした Fiddler2 を 起 動 すると 図 3.4.1.5 のように 立 ち 上 がります 図 3.4.1.5 Fiddler2 の 起 動 画 面 ここで Internet Explorer を 立 ち 上 げると Fiddler2 がプロキシとなるように 自 動 的 に 設 定 が 変 更 されます 確 認 方 法 ですが まず Internet Explorer の ツール メニューか ら インターネットオプション 画 面 を 表 示 させ 接 続 タブを 表 示 させます 240
図 3.4.1.6 Internet Explorer7.0 のインターネットオプション ここで 右 下 の LAN の 設 定 をクリックし ローカルエリアネットワーク(LAN)の 設 定 画 面 で LAN にプロキシサーバーを 使 用 する のところにチェックがされているはず です 図 3.4.1.7 LAN の 設 定 画 面 241
ここで 右 下 にある 詳 細 設 定 ボタンをクリックします 使 用 するプロキシのアドレスが 127.0.0.1 で ポートが 8888 となっているはずです これで Fiddler2 が Internet Explorer の 動 きを 追 跡 します 図 3.4.1.8 プロキシの 設 定 ブラウザによっては 手 動 でプロキシを 設 定 しなければならないこともあるので Fidller2 起 動 後 にブラウザを 立 ち 上 げて 何 も Fiddler2 が 反 応 しないようであれば ブラウ ザのプロキシ 設 定 画 面 を 確 認 し プロキシのアドレスを 127.0.0.1 ポートが 8888 と 設 定 してみてください < Fiddler2 の 利 用 > 図 3.4.1.9 は www.yahoo.co.jp へアクセスした 時 の Fiddler2 の 動 きを 示 したものです 左 の 画 面 には HTTP リクエストとレスポンスが 一 つずつ 記 録 されているのがわかります 右 側 の 画 面 では 左 の 一 つのラインを 選 択 した 場 合 に その 該 当 情 報 が 表 示 されます この 例 は 1 番 上 のラインを 選 択 した 時 の 表 示 画 面 です Inspectors タブで 右 上 は Headers を 表 示 し 右 下 も Headers を 表 示 しましたので Request Headers と Response Headers の 情 報 が 見 ることができます ここからは Cookie の 内 容 なども 見 ることができます 242
図 3.4.1.9 Fiddler2 の HTTP リクエストとレスポンスのヘッダー 情 報 図 3.4.1.10 は 同 じく www.yahoo.co.jp へアクセスした 時 の Fiddler2 の 動 きを 示 した ものです この 例 は 1 番 上 のラインを 選 択 した 時 の 表 示 画 面 です Inspectors タブで 右 上 も 右 下 も Raw を 選 択 しています ここでは HTTP Request と HTTP Response の 生 デ ータを 見 ることができます 243
図 3.4.1.10 Fiddler2 の HTTP リクエストとレスポンス 情 報 図 3.4.1.11 はあるページにアクセスした 時 のデータですが Host の 列 を 見 ると 該 当 サイトでないサイトへのリクエストがあることがわかります このページでは Google Analytics と Yahoo!アクセス 解 析 の 計 測 がされているということがわかる 訳 です 図 3.4.1.11 Fiddler2 でアクセス 解 析 データを 見 る 244
トラフィックのキャプチャーを 一 時 停 止 したい 場 合 は File メニューの Capture Traffic を 選 択 することでオンオフを 切 り 替 えることができます チェックマークが 付 い ていれば オン(キャプチャー 中 )ということになります 全 てのリクエストを 表 示 してしまうと 非 常 に 見 づらくなるので 画 像 ファイルのトラフ ィックだけを 除 く 場 合 や 304(キャッシュからの 読 込 )のトラフィックを 除 くようなフィ ルタを 掛 けることも 可 能 です 具 体 的 には Rules メニューで Hide Image Requests や Hide 304s を 選 択 します こちらもチェックマークが 付 けば 機 能 が 作 動 している ということを 表 します 245
3.4.2.GA 計 測 タグ 実 装 チェックには WASP (for Firefox) < WASP とは> Web Analytics Solution Profiler/Debugger (WASP)は Firefox の 機 能 拡 張 プログラム です アクセス 解 析 ツール 広 告 ネットワーク 行 動 ターゲティング 多 変 量 テストツー ルのウェブページにおける 実 装 状 況 がチェックできます アクセス 解 析 に 関 連 しては JavaScript ビーコン 型 の 計 測 タグの 実 装 を 簡 単 にチェック できます チェックの 頻 度 が 多 くないアナリストなら 無 料 版 で 十 分 だと 思 いますが プロ 向 けの 有 料 版 もあります http://webanalyticssolutionprofiler.com/ < WASP( 無 料 版 )の 実 装 > 本 家 のページでも Firefox のアドオン 紹 介 ページからでもダウンロードできます http://webanalyticssolutionprofiler.com/try.htm ( 本 家 のダウンロードページ) https://addons.mozilla.org/ja/firefox/addon/web-analytics-solution-profile/ ( Firefox のアドオン 紹 介 ページ) 図 3.4.2.1 本 家 のダウンロードページ ( http://webanalyticssolutionprofiler.com/try.htm) 246
本 家 のダウンロードページを 使 う 場 合 は まずこのページへアクセスし 上 方 にある 緑 色 の Add to Firefox ボタンをクリックします ブラウザ 上 方 にインストール 不 可 のア ラームがでた 場 合 ( 図 3.4.2.2 参 照 )は 右 の 許 可 ボタンを 押 してインストールを 許 可 して 下 さい 図 3.4.2.2 許 可 ボタンを 押 す インストール 画 面 が 出 てきたら 右 下 の 今 すぐインストール ボタンを 押 して イン ストールします 図 3.4.2.3 インストール 画 面 再 起 動 を 促 されるので Firefox を 再 起 動 します 図 3.4.2.4 再 起 動 画 面 247
再 起 動 するとライセンス 契 約 が 示 されるので 右 下 にある Agree ボタンを 押 して それに 同 意 すると インストール 終 了 を 示 すウェブページへ 誘 導 されます 図 3.4.2.5 Firefox のアドオン 紹 介 ページ ( https://addons.mozilla.org/ja/firefox/addon/web-analytics-solution-profile/) Firefox のアドオン 紹 介 ページからダウンロードする 場 合 は 中 央 の Continue to Download ボタンを 押 します するとライセンス 契 約 のページに 移 動 するので 下 方 に ある 同 意 してインストール ボタンを 押 します 図 3.4.2.6 ユーザライセンス 契 約 の 画 面 あとは 図 3.4.2.3 にあるインストール 画 面 と 同 様 の 流 れになります 248
< WASP( 無 料 版 )の 利 用 > WASP をインストールした 状 態 で Firefox を 立 ち 上 げますと ブラウザのステイタスバ ーの 右 側 にある 蜂 のシンボルマークが 表 示 されているエリアがあります ここにマウスを のせると 今 見 ているウェブページに 実 装 してある 各 種 計 測 タグの 状 況 などがポップアッ プで 表 示 されます Google Analytics のデ ータが 送 信 されている ことを 示 している このエリアにマウ スオーバーすると 表 示 される 図 3.4.2.7 WASP の 表 示 画 面 図 3.4.2.7 の 例 では アクセス 解 析 の Google Analytics 広 告 効 果 測 定 系 の Google AdWords のコンバージョンタグ テストツールの Google Website Optimizer のコードな どが 実 装 されているということが 上 部 の 黄 色 のエリアに 表 示 されます 下 部 の 黄 緑 のエリ アにはインターネット 視 聴 率 の Alexa での 順 位 や 外 部 リンク 数 などの 情 報 が 表 示 されます またこの 蜂 のシンボルマークが 表 示 されているエリアをクリックすると ブラウザの 左 側 のエリアに 図 3.4.2.8 のような 表 示 が 現 れます 有 料 版 ではここで 無 制 限 に 関 連 する 詳 細 情 報 を 確 認 することが 可 能 になります このツールは サイトをリニューアルした 際 などに ざっとサイトを 見 て 回 って アク セス 解 析 の 計 測 タグが 機 能 していないページがないかをチェックするような 場 合 に 有 効 だ と 思 います 249
図 3.4.2.8 WASP の 詳 細 表 示 画 面 250
3.4.3.GA のレポートカスタマイズには Greasemonkey (for Firefox) < Greasemonkey とは> Greasemonkey(グリースモンキー)は Firefox の 機 能 拡 張 プログラムです 指 定 ドメ インや URL に 対 し JavaScript によるユーザサイドスクリプトを 追 加 することの 出 来 る 機 能 拡 張 です あるユーザスクリプト 形 式 に 従 った JavaScript を 組 み 合 わせて ウェブペ ージ 閲 覧 時 に 実 行 することができます ユーザスクリプトのファイル 名 は.user.js で 終 わります つまり Greasemonkey 単 体 で 機 能 するのではなく この 機 能 拡 張 の 上 で 動 くユーザスク リプトをさらにインストールする 必 要 があります 当 然 Google Analytics だけでなく 様 々 なウェブページ 上 で 動 かすことのできるユーザスクリプトが 多 数 あります Google Analytics で URL とページタイトルを 同 時 に 表 示 できるプログラムを 実 装 する 例 などをご 紹 介 します 信 頼 できるプログラムを 実 装 しないといけないので 難 易 度 は 上 級 向 けとなります ご 紹 介 したプログラムに 関 しても 責 任 は 負 えません < Greasemonkey の 実 装 > 図 3.4.3.1 の Firefox のアドオン 紹 介 ページからダウンロードできます 中 央 の Firefox へ 追 加 ボタンを 押 します 図 3.4.3.1 Greasemonkey のダウンロードページ ( https://addons.mozilla.org/ja/firefox/addon/greasemonkey/) 251
続 いて 図 3.4.3.2 の 右 下 の 今 すぐインストール ボタンを 押 します 図 3.4.3.2 Greasemonkey のインストール 画 面 再 起 動 を 促 されるので Firefox を 再 起 動 します 図 3.4.3.3 Greasemonkey の 再 起 動 画 面 252
Firefox を 再 起 動 すると ブラウザのステイタスバーの 右 下 に 下 記 のように 猿 のアイコ ンが 表 示 されます これで 動 作 しています この 猿 のアイコンをクリックすると 薄 い 表 示 になり 無 効 の 状 態 を 示 します 図 3.4.3.4 Greasemonkey のステイタスバー 表 示 < Greasemonkey の 利 用 > ここでは 三 つの 例 をご 紹 介 します 一 つ 目 は Google Analytics のコンテンツメニュー の 中 に 追 加 でメニューが 現 れるユーザスクリプトを 実 装 してみます URL とページタイ トルを 併 記 してページビュー ランキングを 表 示 してくれるメニューです まず 下 記 URL にアクセスします http://sakuratan.biz/archives/2446 図 3.4.3.5 の 一 番 下 の JavaScript へのリンクをクリックすると ユーザスクリプトのイ ンストール 画 面 が 起 動 しますので 左 下 の インストール ボタンを 押 します 以 上 でイ ンストールは 終 わります 図 3.4.3.5 ユーザスクリプトのあるページ(http://sakuratan.biz/archives/2446) 253
図 3.4.3.6 ユーザスクリプトのインストール 画 面 続 いて Firefox で Google Analytics にログインします レポート 画 面 に 入 って 猿 のア イコンを 右 クリックすると 下 図 のように 今 インストールしたスクリプト Google Analytics Top Contents and Title にチェックが 入 り が 有 効 になっていることがわかり ます 図 3.4.3.7 猿 のアイコンを 右 クリックした 時 の 表 示 さて Google Analytics のコンテンツメニューを 展 開 します( コンテンツ をクリッ ク) そうすると 図 3.4.3.8 のように 標 準 のメニュー 構 成 には 存 在 しないメニュー Top Contents + Title が 出 現 します 254
図 3.4.3.8 Top Contents + Title メニュー このメニューでは 下 図 のように URL とページタイトルを 併 記 してみることのできる 画 面 になります 図 3.4.3.9 Top Contents + Title のレポート 表 示 255
ユーザスクリプトの 管 理 は 図 3.4.3.7 画 面 の 下 から 2 番 目 の ユーザスクリプトの 管 理 を 選 択 します 選 択 後 の 画 面 は 下 図 のようになります ここで 各 ユーザスクリプトの 削 除 編 集 などを 行 うことができます 図 3.4.3.10 ユーザスクリプトの 管 理 画 面 二 つ 目 のユーザスクリプトをご 紹 介 します これは Google Analytics の 一 部 のメニュー (ドメインや URL が 表 示 される)において 該 当 の URL のはてな 被 ブックマーク 数 Twitter での 言 及 数 (Topsy) facebook の 言 及 数 (いいね!とシェアの 合 計 )が 追 加 表 示 されるスクリプトです まずこのスクリプトを 提 供 している Creazy!(クリエイジー!)のウェブページにアク セスします http://creazy.net/2010/12/google_analytics_with_facebook_counter.html そして ページの 中 段 にあるスクリプトのリンクをクリックします Firefox+ Greasemonkey Safari+ GreaseKit Google Chrome で 動 作 するということですが Firefox に 実 装 してみます http://userscripts.org/scripts/source/43912.user.js 256
図 3.4.3.11 の 通 り ユーザスクリプトのインストール 画 面 が 起 動 しますので 左 下 の イ ンストール ボタンを 押 します 一 つ 目 のユーザスクリプトの 例 ではご 説 明 しませんでし たが インストールが 成 功 すると 図 3.4.3.12 のように ステイタスバーの 右 側 に 表 示 が 出 るのがわかります 以 上 でインストールは 終 わりです このユーザスクリプト 名 は Google Analytics with SBM です 図 3.4.3.11 ユーザスクリプトのインストール 画 面 図 3.4.3.12 ユーザスクリプトインストール 完 了 このユーザスクリプトが 有 効 になるのは トラフィックの 参 照 サイト コンテンツ の 上 位 のコンテンツ 上 位 リンク 先 ページ 上 位 離 脱 ページ です 図 3.4.3.14 でタブに 追 加 されている Show SBM は 解 析 結 果 の 表 示 件 数 を 変 更 した り ページ 数 を 変 えたりすると Ajax によって table が 書 きかわるのですが 一 時 画 像 が 消 えてしまうので 再 表 示 させたい 時 にクリックします 実 際 にこのタブに 何 かレポートが 表 示 されるということではありません 257
図 3.4.3.13 Google Analytics の 上 位 コンテンツのレポート 表 示 画 面 図 3.4.3.14 Show SBM タブ 追 加 で 表 示 されたそれぞれ 数 字 をクリックすると ( b の 右 隣 の 数 字 をクリックすると) コメントの 詳 細 が 確 認 できるはてなブックマーク ( t の 右 隣 の 数 字 をクリックすると) Topsy のページに 遷 移 します facebook に 関 しては 数 字 表 示 のみです バージョンアップを 重 ねていますので このユーザスクリプトの 作 者 のページの 履 歴 を 掲 載 しておきます http://creazy.net/2009/03/google_analytics_with_sbm_userscript.html http://creazy.net/2010/08/google_analytics_with_sbm_twitter.html http://creazy.net/2010/12/google_analytics_with_facebook_counter.html 258
三 つ 目 のユーザスクリプトをご 紹 介 します これは Google Analytics に 標 準 の セカン ダリディメンション にない 項 目 で 深 堀 することができるスクリプトです まずこのスクリプトを 提 供 している ROI REVOLUTION のウェブページにアクセスし ます http://www.roirevolution.com/blog/2008/10/google_analytics_report_enhancer_updates.php そして ページの 中 段 にあるスクリプト(GAREnhancer)のリンク(ckick here とあ ります)をクリックします http://www.roirevolution.com/script/garenhancer.user.js 図 3.4.3.15 の 通 り ユーザスクリプトのインストール 画 面 が 起 動 しますので 左 下 の イ ンストール ボタンを 押 します インストールが 成 功 するとステイタスバーの 右 側 に 表 示 が 出 ます 以 上 でインストールは 終 わりです このユーザスクリプト 名 は GAREnhancer です 図 3.4.3.15 ユーザスクリプトのインストール 画 面 Google Analytics に 標 準 の セカンダリディメンション は 図 3.4.3.16 の 通 りです 一 方 GAREnhancer 起 動 後 の セカンダリディメンション は 図 3.4.3.17 のようにな ります 259
図 3.4.3.16 Google Analytics に 標 準 の セカンダリディメンション 図 3.4.3.17 GAREnhancer 起 動 後 の セカンダリディメンション 以 下 の 項 目 が 追 加 されています <トラフィック> ソース/メディア 参 照 URL 2 ページ 目 離 脱 ページ < 地 域 > マーケット 260
<ブラウザ> ブラウザバージョン OS のバージョン ブラウザと OS < AdWords> 広 告 グループ 広 告 掲 載 ネットワーク マッチタイプ 一 致 した 検 索 クエリ プレースメンドのドメイン プレースメント URL 広 告 フォーマット ターゲット タイプ 表 示 URL リンク 先 URL <カスタム 変 数 > 5 つの 値 と 5 つの 変 数 < 時 間 > 時 間 帯 曜 日 日 ( 月 間 ) 日 週 月 < 検 索 >(サイト 内 検 索 のこと) 検 索 クエリ サイト 内 検 索 のカテゴリ < 商 品 >(EC タグ 実 装 の 場 合 ) 商 品 商 品 の SKU 商 品 カテゴリ トランザクション アフィリエーション 261
請 求 先 の 都 市 請 求 先 の 地 域 請 求 先 の 国 / 地 域 レポートの 表 示 例 を 幾 つか 列 挙 してみます A. 参 照 元 サイト + 参 照 URL トラフィック > 参 照 サイト を 表 示 し セカンダリディメンションに 参 照 URL を 選 択 します 参 照 サイトだけの 場 合 は レポートに 表 示 された(サブ)ドメインをク リックすれば ドリルダウンすることができますが デフォルトでドメイン+パス 名 の セットで 見 ることができます 図 3.4.3.18 参 照 元 サイト+ 参 照 URL B. 新 規 ユーザーとリピーター + 曜 日 ユーザー > 新 規 ユーザーとリピーター を 表 示 し セカンダリディメンションに 曜 日 を 選 択 します 図 3.4.3.19 新 規 ユーザーとリピーター + 曜 日 262
項 目 が 多 くなることが 多 いので エクセルなどにダウンロードして 加 工 する 方 がよいと 思 います 参 考 にした URL: http://susumukatachi.jp/archives/1525 http://susumukatachi.jp/archives/1709 263
3.4.4.GA 送 信 データの 内 容 確 認 には Chrome) Google Analytics Tracking Code Debugger (for < Google Analytics Tracking Code Debugger とは> Google Analytics Tracking Code Debugger は Google Analytics の JavaScript の 計 測 コードが 正 しく 動 作 しているのかを Chrome ブラウザで 確 認 するための 機 能 拡 張 です < Google Analytics Tracking Code Debugger の 実 装 > 下 記 の Chrome の 機 能 拡 張 の 紹 介 ページからダウンロードできます 上 部 の インスト ール ボタンを 押 します https://chrome.google.com/extensions/detail/jnkmfdileelhofjcijamephohjechhna 図 3.4.4.1 Google Analytics Tracking Code Debugger のダウンロードページ ( https://chrome.google.com/extensions/detail/jnkmfdileelhofjcijamephohjechhna) 続 いてインストール 確 認 ボタンを 押 して( 図 3.4.4.2) インストール 完 了 画 面 が 右 上 に 表 示 されればインストール 完 了 です 折 れ 線 グラフのような 小 さなアイコンがブラウザの 右 上 の 方 に 追 加 されていると 思 います 264
図 3.4.4.2 インストール 画 面 図 3.4.4.3 インストール 確 認 画 面 < Google Analytics Tracking Code Debugger の 利 用 > Google Analytics の Tracking Code を 調 べたいウェブページを 開 き 続 いて Chrome ブラウザ 右 上 の 設 定 アイコン -> ツール -> JavaScript コンソールを 選 択 あるいは Ctrl +Shift + J のキーボード 操 作 を 行 い JavaScript コンソールの 画 面 を 開 きます 図 3.4.4.4 JavaScript コンソール 画 面 265
そして Chrome ブラウザのメニューの 右 上 に 追 加 されたアイコンボタンをクリックし て この 機 能 拡 張 を 作 動 させます そうするとこのアイコンボタンに ON という 文 字 が 加 わります 図 3.4.4.5 Google Analytics Tracking Code Debugger を ON にした 画 面 一 方 JavaScript コンソールの 画 面 の 方 には 分 かりやすい 形 で Google Analytics の Tracking Code が 送 信 しているデータの 内 容 が 表 示 されます 図 3.4.4.6 のようにそれぞ れのパラメータと 値 のセットが 1 行 ずつ 表 示 されます 例 えばこれは ソー ス が google であ ることを 示 している 図 3.4.4.6 送 信 データの 内 容 の 確 認 画 面 266
3.4.5.Cookie の 状 態 を 確 認 するツール Edit This Cookie (for Chrome) < Edit This Cookie とは> Edit This Cookie は Chrome ブラウザで Cookie の 状 態 を 確 認 編 集 などをすること のできる 機 能 拡 張 です ここでは Google Analytics の Cookie がどのように 動 作 している かについて 見 ていきます < Edit This Cookie の 実 装 > 下 記 Chrome の 機 能 拡 張 の 紹 介 ページからダウンロードできます 上 部 の インストー ル ボタンを 押 します https://chrome.google.com/extensions/detail/fngmhnnpilhplaeedifhccceomclgfbg 図 3.4.5.1 Google Analytics Tracking Code Debugger のダウンロードページ 続 いてインストール 確 認 ボタンを 押 して( 図 3.4.5.2) インストール 完 了 画 面 が 右 上 に 表 示 されればインストール 完 了 です クッキーのアイコンがこの 機 能 拡 張 です 図 3.4.5.2 インストール 画 面 267
図 3.4.5.3 インストール 確 認 画 面 < Edit This Cookie の 利 用 > Google Analytics の Cookie を 調 べたいウェブページを 開 き 続 いて この 右 上 のクッ キーのアイコンをクリックします ブラウザ 右 上 のこ のクッキーのアイ コンをクリック 選 択 した Cookie の 内 容 図 3.4.5.4 Edit This Cookie の 起 動 画 面 Google Analytics の Cookie については 第 2 部 でも 触 れているのでここでは 詳 しく 触 れませんが 上 図 では utma utmb utmc utmz が Google Analytics の Cookie になります また fpc とあるのは Yahoo!アクセス 解 析 の Cookie です 各 項 目 をクリックすると 該 当 の Cookie の 内 容 が 展 開 されて 見 ることができるように なります 268