計測タグの便利な検証術 – 基本編

Adobe Analyticsでは非常に多面的な分析ができる反面、それだけサイト側から送られるデータの内容を検証することが非常に重要なタスクになると言えます。
そこで一般用途として、Adobe Analyticsでは検証用にDigital Pulse DebuggerというJavaScriptのブックマークレットを提供しています。
一方この記事では、さらに便利なツールがありますので、ご紹介したいと思います。

Adobe Analyticsの検証ツール

Adobe Analyticsで提供しているツールは、JavaScriptコードをブックマークに登録し、計測タグが埋め込まれているページで開くと、以下のようにポップアップウィンドウで計測内容が表示されるというものです。

「どの変数にどんな値がセットされて計測サーバにイメージリクエストとして送信されているか」を見やすく表示してくれるため、とても便利なブックマークレットです。
（Adobe Digital Pulse Debuggerについての詳細は、ヘルプをご参照ください）

ただしその仕組み上、どうしてもできないこともあります。

Digital Pulse Debuggerでは確認することができないリクエスト

上記のようなページロードと紐付かないようなリクエストを確認する場合、ブラウザの開発ツールや、ブラウザのWebインスペクタやHttpFox（Firefoxアドオン）などをお使いの方も多いと思います。イメージリクエストの送信状況の確認だけであればこれらでも十分ですが、本日はもう一歩先を行けるツール「Charles（チャールズ）」をご紹介させていただきます。

便利な検証ツール、Charles

Charles Web Debugging Proxy
http://www.charlesproxy.com

Charlesはローカルプロキシとして提供されているアプリケーションです。弊社提供のツールではないのですが、上記のようなDigital Pulse Debuggerでは難しいデバッギングやその他様々なシーンでコンサルタントも利用させていただいているアプリケーションになります。

これを使うことでローカルプロキシとしてブラウザとサーバとのやりとりに改変を加え、様々な検証を行うことができます。

Charlesを入れるとこんなに便利！

ここではAdobe Analyticsを利用されている皆様が利用できる、便利なCharlesの利用方法をいくつかご紹介させていただきます。

Adobe Analyticsのリクエストを絞り込む

まずは一番基本的な使い方として、Adobe Analyticsのリクエストだけを絞り込む方法。Charlesを立ち上げると以下のように通信内容が次々と表示されます。

Charlesが起動している状態でAdobe Analyticsが実装されているサイトを表示し、Filterに「b/ss」と入力することでAdobe Analyticsのイメージリクエストのイメージリクエストを発見しやすくなります。（HttpFoxなどでも同様です）

フィルタリングされたリクエストを選択し、「Request」の「Query String」を開くことでリクエストの内容も確認できます。

Map Localで擬似的にタグを挿入／編集する

CharlesのMap Localという機能を使うことで、Webサイトで読み込まれる特定のファイルをローカルファイルに差し替えて読み込ませることができます。

ブラウザ上は通常どおりのWebサーバに設置されたファイルとして処理されるため、 Adobe Analytics計測で利用するJSファイル（s_code.js）に修正を加えた場合などの動作確認を、ローカルで修正したファイルを参照しながら本番環境のブラウジングで容易に行うことが可能になります。手順は以下の通りです。

メニューの「Tools」から「Map Local」を開きます。

「Map Local Settings」が開いたら、「Add」をクリックします。

「Edit Mapping」で差し替えたいファイルを指定します。

※ 読み込まれるファイルのパスは「Host」にファイルへのFull Pathを記載することでProtocolやQueryなどは自動的に識別されます。

「Enable Map Local」と先ほどの差し替え設定にチェックが入っていることを確認し「OK」をクリックします。

Map Localの設定は以上です。
この状態で対象ページをリロードするとファイルが差し替えられた状態で読み込まれます。尚、差し替えられているかどうかの確認方法は、以下の通りです。

メインウィンドウの「Structure」で読み込まれるファイルを選択した時に「Overview」の「Notes」に「Mapped to local file:」という記述があれば差し替えられている状態です。

Map Local機能が有効になっていると、右下に「Map Local」と表示されます。一度設定すると「Map Local Settings」で「Enable Map Local」のチェックを外さない限り次回起動時も有効のままとなりますのでご注意下さい。

Map LocalでAdobe Targetのmboxを作ることも

このようにCharlesはWeb上のファイルであればローカル上のファイルと差し替えることができるので、Adobe Targetの事前の検証にも利用することができます。

例えばAdobe Targetでテストを行いたいページのHTMLをローカルに保存し、新たにmboxを書き加えたローカルファイルを上記機能を利用して参照できるようにようにします。こうすることにより、mbox.jsの読み込みやmboxの設定が実施されていないページでも、実際のシステムの修正を実施する前に、デザイン崩れなど確認をしておくことができるようになります。

ただSSL環境では…

今回イチオシのMap Local機能ですが、実はSSL環境下で行うためにはいくつかの設定が必要となります。そこで次回はSSL環境下でCharlesを利用する方法、そしてDynamic Tag Managementの実装確認などで役立つRewrite機能をご紹介させていただきます。

※SSL環境下での利用方法について、次回のポストまで待ちきれない！という方は、以下Charlesの公式サイトをご確認下さい。
http://www.charlesproxy.com/documentation/using-charles/ssl-certificates/

尚、本文中でも触れましたが今回ご紹介させていただいたCharlesは弊社が提供するアプリケーションではございません。サポート等も実施しておりませんので、ご自身の責任の範囲にてご利用いただくことになります。また、最新のアップデート状況についても、Charlesの公式サイトをご確認ください。

では引き続き、Adobe Marketing Cloud Japan Blogをよろしくお願いします。

筆者：川島 えり子 アドビ システムズ株式会社 コンサルティング部コンサルタント
カスタマーサポート業務を経て、広告代理店にてSiteCatalystの導入支援を担当。2012年より現職。現在は、コンサルタントとして、Adobe Analyticsの導入や企業のオンラインマーケティングを成功に導くための分析・最適化のコンサルティングサービスを提供している。