tag:blogger.com,1999:blog-26847496838228027912024-09-06T06:08:30.018+09:00alwaysnewhttp://www.blogger.com/profile/16016941814739942986noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-2684749683822802791.post-57216023386788600222012-08-15T09:08:00.000+09:002012-08-15T09:08:55.041+09:00<h3> </h3> <h3> GAカスタマイズでよく使われるonClick</h3> <div> <div> Google Analytics でページ内のPDFファイルへのリンクやボタンのクリックなど、標準のトラッキングコードでは収集されないデータを収集するためには、イベントトラッキングかバーチャルページビューを使います。<br /> <br /></div> <div> 普通よくやるのは、対象のエレメントのclickイベントハンドラからtrackEvent/trackPageviewメソッドを呼ぶ手法で、実際に下記のようなコードがあちこちで使われています。</div> <pre><code>&lt;a href="/path/to/pdf.pdf" onclick="_gaq.push(['_trackEvent', 'PDFLink', 'Click', this.href]);"&gt;PDFへのリンク&lt;/a&gt;</code></pre> </div> <div> このコード、実はやや問題があって、リンク先のPDFの読み込みが速いと、ビーコンをGoogleに送る前にリンク先のPDFが開いてしまい、ビーコンを送信していた元のページがunloadされ、結果としてイベント/PVがカウントされないことがあります。<br /> よくわからない図を描いてしまったので貼っておきますね。<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjph91UY7XZWFKQQ0zGGO_ZqUdCHuJTqjSvEOgaYBtqi5dyYXbkVUre_QOvpW5Qy3L0pLbxEjgi_5hlHZ7k264kcRkKbjF246LxfbmfPPxII0XJsdDWj70mFnNT707Werwvc_mmiiV4i10/s1600/onclick.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjph91UY7XZWFKQQ0zGGO_ZqUdCHuJTqjSvEOgaYBtqi5dyYXbkVUre_QOvpW5Qy3L0pLbxEjgi_5hlHZ7k264kcRkKbjF246LxfbmfPPxII0XJsdDWj70mFnNT707Werwvc_mmiiV4i10/s400/onclick.jpg" width="400" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <br /> この問題を避けるために、trackEvent/trackPageviewメソッドを_gaq(非同期実行キュー)に入れずに、_gat(トラッカーオブジェクト)を直接呼び出したり、trackEvent/trackPageviewメソッド呼び出し後に数十ミリ秒ウェイトさせたりと、ちょっと不細工な工夫をすることもよくあります。普通のリンクじゃなくて、別のウィンドウで開くなら(target="_blank"が付いていれば)こんな問題は起きないのですが…。<br /> <br /> <h3> 本当にonClickでいいのか?</h3> <div> <div> ところで、「リンクがクリックされた」ことを検知するのはonClickでほんとにいいんだっけ?という議論が本題です。onClickの他にも、よくよく考えるとonMouseDownというイベントがあります。</div> <dl> <dt>onClick</dt> <dd>マウスのボタンを押して離した後に発生するイベント</dd> <dt>onMouseDown</dt> <dd>マウスのボタンが押された瞬間に発生するイベント</dd></dl> </div> <div> <div style="font-size: medium; font-weight: normal;"> <br /></div> <div style="font-size: medium; font-weight: normal;"> ほとんど変わりないのですが、onMouseDownのほうが先に発生するので、上記のような「どこかへのリンクのクリックをイベントとして記録する」ような使い方ならどう考えてもこちらが有利な気がしますね。</div> <div style="font-size: medium; font-weight: normal;"> <br /></div> <div style="font-size: medium; font-weight: normal;"> <a href="http://www.cardinalpath.com/experiment-onclick-vs-onmousedown-event-tracking-in-google-analytics/" target="_blank">Cardinal Pathが実際のサイトで実験してみたらしく</a>、恐ろしい結果が…</div> <ul style="font-size: medium; font-weight: normal;"> <li>onMouseDownで計測したイベント数: 205</li> <li>Onclickで計測したイベント数: 122</li> </ul> <div style="font-size: medium; font-weight: normal;"> <div> 実際のページビューと比較しても、onMouseDownのほうが正確だと言えるようです。いままでonClickで実装したあのサイトやあのサイトは大丈夫だろうか…と心配になってしまう結果ですね。<br /> <br /> 実際に同様のコードでビーコンの飛ぶタイミングを見てみました。<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMhCqk4rBp8tJ9WKxrHMFJis3AgG1JOY9rMcq64lKZBTi19q8wcLClIPw1wkqUfjan7UiXD85Ab1mwvpNcZTe14E2zKFQaErNnRj7JqxNOyyTazM7umwnwKZfD2ujDFSDG9XDDqq2_p30/s1600/Google+Analytics+Event+Sample-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMhCqk4rBp8tJ9WKxrHMFJis3AgG1JOY9rMcq64lKZBTi19q8wcLClIPw1wkqUfjan7UiXD85Ab1mwvpNcZTe14E2zKFQaErNnRj7JqxNOyyTazM7umwnwKZfD2ujDFSDG9XDDqq2_p30/s640/Google+Analytics+Event+Sample-2.jpg" width="640" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> トラックパッドのタップでクリックしたので、mousedown -&gt; mouseupまでの間隔はかなり短いですが(11msec)、たしかにビーコンのリクエストが発生したタイミングが12msecほど違います。</div> </div> <div> <br /></div> <div> ただし、Cardinal Pathの筆者も計測方法に正しいとか間違ってるっていうのはないと記載しています。確かに、その指標がどうやって計測されているか理解していれば、正しく解釈できますからね。</div> <div> <br /></div> <div> また、実験で使用したコードを見たところ、onMouseDownとonClickを両方設定しているので、この実験のonClickの数値は若干少なめに出るような気がします。<br /> (1つイベント処理してビーコン送るより2つ送るほうが時間かかってonClickのビーコンが飛ぶ前にunloadされるんじゃないかと; ビーコンは非同期・並列でリクエストされるから関係ないかも)</div> <div> <br /></div> <div> あと、めったに無いですが、リンクをドラッグしたとき(リンクをメールに貼り付けるときや、クリックしようとしてやめたとき)もonMouseDownイベントは発生するような気がしますね…<br /> <br /></div> </div> <h3> 結論</h3> <div style="font-size: medium; font-weight: normal;"> いずれにせよ、この実験から分かるのは、</div> <div style="font-size: medium; font-weight: normal;"> <ul> <li>Google Analyticsでクリックイベントを取るなら、onMouseDownのほうが確からしい数値が取れる</li> <li>どんな方法で計測・分析するにしても、指標の正確な定義は忘れないこと</li> </ul> <div> という2点でした。</div> </div> <div style="font-size: medium; font-weight: normal;"> さて、いままでにやった実装を見なおさないと…<br /> <div> <br /></div> </div> </div> </div> alwaysnewhttp://www.blogger.com/profile/16016941814739942986noreply@blogger.com0tag:blogger.com,1999:blog-2684749683822802791.post-59484259281307475202012-04-30T22:58:00.001+09:002012-04-30T22:58:11.613+09:00<strike>GWで暇だったので、</strike>いろいろ記録しておくべきことを書こうと思い、ブログを始めました。<br /> <div> 日頃の業務でGoogle Analyticsをメインに、クライアントのWebサイトのアクセス解析導入・解析・報告を行なっていますが、エンジニアから見たGoogle Analyticsについて、ここでまとめておきたいと思います。</div> <div> <br /></div> <div> 具体的には、Google Analyticsって何をどこまで出来るのか、ということです。</div> <div> 一般的な説明は<a href="http://www.google.com/analytics/features/index.html">オフィシャルサイト</a>にまとめてありますが、「どういうふうに解析できるか」の視点で書かれています。</div> <div> エンジニアなら、どんなデータを収集できて、どんなふうにカスタマイズできるの?ってところに興味がありますよね? ありませんか…</div> <div> <br /></div> <div> Google Analyticsの開発者向けドキュメントは、<a href="https://developers.google.com/analytics/">https://developers.google.com/analytics/</a>&nbsp;にあります。ただし、日本語版のドキュメントはどうしても古いので、必ず英語版を参照します。</div> <div> <br /></div> <div> <a href="https://developers.google.com/analytics/devguides/">開発者ガイド</a>には、下記のトピックが載っています。</div> <div> <ul> <li>Collection</li> <ul> <li>Webサイトのトラッキング</li> <li>Androidアプリのトラッキング(!)</li> <li>iOSアプリのトラッキング(!)</li> </ul> <li>Configuration</li> <ul> <li>Management API: 設定情報へのアクセスAPI</li> </ul> <li>Reporting</li> <ul> <li>Core Reporting API: レポートデータへのアクセスAPI</li> </ul> <li>Social Data Hub: ソーシャルメディアのオーナー向け。SNSデータをGAに統合できます。</li> </ul> <div> 「Webサイト以外にも、Android・iOSのネイティブアプリのトラッキングまでできます。設定情報とレポートデータはAPIからアクセスできます。あと、SNS持ってたらデータを統合できるよ。」とのことです。さすがGoogle、エンジニアが気にしそう、興味持ちそうなことはわかってます。</div> </div> <div> <br /></div> <div> Android・iOSアプリのトラッキングやAPI、Social Data Hubの件はちょっと置いといて、Webサイトのトラッキングについて、何ができるか見てみましょう。</div> <div> <br /></div> <h3> 標準トラッキングコードで収集できるデータ</h3> <div> 特にカスタマイズせずに、各ページにトラッキングコードを挿入すると、下記のデータは自動的に収集されます。</div> <div> <ul> <li>ユーザ関連の情報</li> <ul> <li>地理的位置・使用言語</li> <li>ブラウザ情報</li> <li>ページロード時間</li> </ul> <li>流入経路</li> <ul> <li>Referrer・検索キーワード</li> </ul> <li>閲覧コンテンツ・遷移</li> </ul> <div> ちゃんと設定できていれば、下記のデータも取れます。</div> </div> <div> <ul> <li>ゴール達成: 申し込み完了などの目標が達成されたか</li> <li>サイト内検索</li> <li>AdSenseの収益</li> </ul> <h3> (ちょっと)カスタマイズしないとまずいケース</h3> <div> 標準トラッキングコードのままだとちょっとまずい、代表的なケースを下記にあげます。</div> <div> <ul> <li>サイトが複数のドメイン・サブドメインにまたがっている場合</li> <ul> <li>Cookieの有効ドメインの問題で、クロスドメインな遷移をすると、GAのセッションは別としてカウントされます。xxx.jp -&gt; xxx.comみたいな遷移をするときは、リンク元ページで<a href="https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiDomainDirectory#_gat.GA_Tracker_._link">_linkメソッド</a>を使ってセッション情報をGETパラメータで渡し、遷移先ページで<a href="https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiDomainDirectory#_gat.GA_Tracker_._setAllowLinker">_setAllowLinkerメソッド</a>をつけて、セッション情報を受け取りましょう。</li> <li>サブドメインが違うだけなら、<a href="https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiDomainDirectory#_gat.GA_Tracker_._setDomainName">_setDomainNameメソッド</a>でCookieのDomainを設定しましょう</li> </ul> <li>動的サイトで、違うコンテンツを表示するのにURLが一緒になる場合</li> <ul> <li>例えば申し込みシステムで、入力フォームと確認画面と完了画面のURLが全部一緒なんていうこともありますよね。GAはURLを基準にページを識別するので、ちょっと工夫が必要です。<a href="https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiBasicConfiguration#_gat.GA_Tracker_._trackPageview">_trackPageViewメソッド</a>に仮想URLを追加して、別URLにしてあげましょう。</li> </ul> </ul> </div> <h3> カスタマイズしないと収集できないデータ</h3> </div> <div> 普通のサイトで、普通の使い方をするなら標準トラッキングコードで十分ですが、それでは満足しないなら、カスタマイズしましょう。</div> <div> <ul> <li><a href="https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingCampaigns">キャンペーントラッキング</a>: 流入元のキャンペーン(広告・媒体)を区別するのに使います。</li> <ul> <li>AdWordsキャンペーンは、Auto-TaggingをONにすると自動的にトラッキングされます。</li> <li>Yahoo!リスティングなど、AdWords以外のメディアや、メールマガジンなどで集客していて、その効果をトラッキングしたいなら、ターゲットURLに<a href="http://support.google.com/analytics/bin/answer.py?hl=en&amp;topic=1308612&amp;answer=1033981">パラメータを追加</a>します。<a href="http://support.google.com/analytics/bin/answer.py?hl=en&amp;topic=1308612&amp;answer=1033981">Campaign URL Builder</a>を使うと、日本語のエンコードまでやってくれます。</li> </ul> <li><a href="https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingCustomVariables">カスタム変数</a>: カスタマイズできる機能の中で多分もっとも複雑です。トラッキングデータに任意のメタデータを付加できます。とにかく<a href="https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingEcommerce">ガイド</a>をしっかり読んで使いましょう。</li> <ul> <li>Page-Levelカスタム変数: ページのカテゴリや、動的コンテンツに何を出力したのかを記録するのに使います。</li> <li>Session-Levelカスタム変数: ログインしたユーザ/していないセッションを区別したり、キャンペーン告知Aを見たセッションだけを区別したりするために使います。</li> <li>Visitor-Levelカスタム変数: セッションが終わっても、Cookieにデータを記録して、次回のセッションでもデータを送ります。ユーザの性別・年代なんかを記録して、ユーザ層別の傾向を見たりするのに使います。</li> </ul> <li><a href="https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingEcommerce">Eコマーストラッキング</a>: ECサイトの売上データをトラッキングします。カート機能の注文完了画面にECトラッキング用のコードを挿入してデータを飛ばします。</li> <ul> <li><a href="https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiEcommerce#_gat.GA_Tracker_._addItem">_addItem</a>: トランザクションに含まれる商品の情報を追加します。</li> <li><a href="https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiEcommerce#_gat.GA_Tracker_._trackTrans">_trackTrans</a>: トランザクションに関する情報(合計金額・顧客の地域 etc.)を追加します。</li> </ul> <li><a href="https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide">イベントトラッキング</a>: なんでも任意のイベントの発生を記録します。</li> <ul> <li>JSで取れるイベントであれば、ハンドラに<a href="https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiEventTracking#_gat.GA_EventTracker_._trackEvent">_trackEvent</a>メソッドの呼び出しを書けば、発生したページと、_trackEventメソッドのパラメータに指定した、イベントカテゴリ・ラベル・値を記録してくれます。</li> </ul> <li><a href="https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingTraffic">検索エンジンの設定</a></li> <ul> <li>GAはReferrerを見て大体の検索エンジンからの流入を自動識別してくれますが、日本のマイナー検索エンジン(nifty searchなど)を検索エンジンからの流入として認識させたければ、<a href="https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiSearchEngines#_gat.GA_Tracker_._addOrganic">_addOrganic</a>メソッドを呼んで追加しておきます</li> </ul> <li><a href="https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingSocial">ソーシャルインタラクション</a>: ページ上の「いいね」・「ツイートする」などのSNSボタンの使用をトラッキングします。</li> <ul> <li>Google+ ボタンは勝手にトラッキングしてくれるはずです。</li> <li>AddThisを使っているなら、<a href="http://support.addthis.com/customer/portal/articles/381260-google-analytics-integration#.T56XAUyK6ZY">AddThisのヘルプ</a>に書いているように、GAのアカウント番号を設定すれば、自動的にビーコンが飛びます。</li> <li>そうでなければ、ボタンのクリックイベントか、ソーシャルプラグインの書き込み完了イベントのハンドラで、<a href="https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiSocialTracking">_trackSocialメソッド</a>を呼び出します。</li> </ul> <li><a href="https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingTiming">ユーザタイミング</a>: ページロード時間は標準トラッキングコードで収集してますが、任意のリソースのロード時間なんかを収集することもできます。</li> <ul> <li>非同期JSのロードで、ロード完了イベントのハンドラで<a href="https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiUserTiming">_trackTiming</a>メソッドを呼び出したりして使う。</li> </ul> </ul> <div> DevGuideに書いてる機能は以上です。GAはJSビーコン型なので、Javascriptでどうにかなることなら、大体のデータは取得してGAに飛ばせます。後は、飛ばしたデータをGAがどう処理して、どういうレポートに反映してくれるかの問題かと思います。</div> </div> <div> <br /></div> <div> 書いてみて思いましたが、いろいろ出来過ぎですね。</div> <div> それぞれの機能に絞って書いたほうが良かったかも…。</div>alwaysnewhttp://www.blogger.com/profile/16016941814739942986noreply@blogger.com0