CS5のSiteCatalyst拡張機能でFlashをアクセス解析する方法
FlashのSiteCatalystによるアクセス解析は以前も可能でしたが、Flash Professional CS5からは公式エクステンションが提供され、ActionScriptを書かずにパネルでの操作だけで設定が可能になりました。
Flash中で発生する任意のイベントでカスタム変数をセットできます。
架空の要件を想定した設定の手順を具体的に紹介します。
要件
Flashでアニメーション付きのメニューを作り、導入している。
これまでは、クリック時のURLにパラメータを付けることで外部サイトへの誘導数を集計していたが、オンマウスの回数も取得し、文言やデザインなどクリエイティブ面の改善につなげたい。また、リンク先サイトごとに分かれた複数のレポートからクリック数を集めるのも面倒なので、自分のアカウントのみで集計できるようにしたい。
Flash
アニメーションつきメニュー（付属サンプルそのまま）
SiteCatalystの設計
一つのカンパニー(アカウント)の中に、本番用とテスト用の二つのレポートスイートを作成。
取得したい変数は下記
- サーバ変数：
- サイトのドメイン名
- カスタムトラフィック変数5：
- メニュー名
- カスタムイベント6：
- オンマウス回数
- カスタムイベント7：
- クリック回数
- ページ：
- 未使用（オンマウスやクリックなのでPVには含めない）
設定手順
流れは以下の６ステップです。
- エクステンションを呼び出し、SiteCatalystにログインする
- 計測用のライブラリを作る
- オンマウスとクリック用の計測用トラッカーを作る
- テスト
- 本番用にパブリッシュ
1. エクステンションを呼び出し、SiteCatalystにログインする
Flashのプロジェクトを開いた状態で、エクステンションのパネルを開いてログイン。アカウントさえあれば、特別な権限は不要です。
図:ログイン:
2. 計測用のライブラリを作る
次に、データの収集と送信用の基本ライブラリを作成します。
データを収集するSiteCatalyst側の設定に依存するので、ウィザードに従って各種設定内容を入力していきます。
（SiteCatalyst側のRSや変数の設定を先に行っておく必要があります）
パネルの「ライブラリを作成」をクリックします。
図:ライブラリを作成:
ウィザードは「基本設定」と「詳細設定」を選べますが、基本設定だと後でActionScriptの修正が必要になることが多いので、「詳細設定」がオススメです。
図:WizardのModeをSelect:
まず、データを収集する「レポートスイート」（Google Analyticsではプロファイルに該当）を指定します。SiteCatalyst上に存在するレポートスイートのIDをメニューから選択し、本番環境と開発環境のそれぞれに送信するかどうかを指定します。
図:RSIDをSelect:
通常は図のように、それぞれ一つずつにチェックを入れます。本番環境を複数のレポートスイートで計測すると、計測コストが増える（契約したコール数が減る）のでご注意。
次に、計測する変数をFlash上のクラスとマッピングします。
図:VariableをMapping:
こちらもRSIDと同じように、SiteCatalyst側で設定済みの変数を左側でメニューから選択し、Flash上での名前をつけていきます。最初は有効化されている変数がすべて表示されていますが、計測しない変数は削除（マッピングを解除）しておきます。
「レポートスイートの不整合」というのは、本番と開発で指定したレポートスイートの設定が一致しない、というアラートです。図では、変数の名前が一致していません。これは便利な機能ですね。通常のHTML＋JavaScriptによる計測でもこの機能があると便利そうです。
次に、それぞれの変数のデフォルト値と、値の定義を必須とするか、を指定します。
図:VariableのSetting:
今作成しているライブラリを使って、この後、複数のトラッカー（アクション）を作成することになります。トラッカーを設定する時のデフォルト値と、値の定義を必須にするかどうか、です。計測されるデータ自体を必須（空以外）にする、という意味ではありません。
成功イベントのみ、設定が別画面になっています。
図:Event変数のSetting:
最後に、ライブラリの共通設定を指定します。
図:Library全体のSetting:
パッケージとクラス名はFlash制作者が名づけます。その下の設定については、SiteCatalyst管理者に情報をもらう必要があります。
これでウィザードが終了。.flaと同じ階層に、ライブラリのファイルとフォルダが作成されました。
図:CreateされたLibrary Files:
ライブラリが作成された状態のパネル
図:LibraryがSetされたPanel:
3.トラッカーを作る
続いて、オンマウスとクリック用のトラッカーを作成します。Flashエレメントを選択してから「トラッカーを追加」をクリック。
図:Create Tracker:
計測対象のフレームを選択して、次に進みます。
図:Configure Tracker:
上の３つは、Flash側の設定です。
トラッカー名はFlash制作者が自由に名づけます。
ライブラリは、上記で作成したものが選択状態になっているはずです。
Flashイベントは、計測するタイミングとして、Flash上のイベントを指定します。今回は、clickを選択しました。
serverの値として「www.rakuten.co.jp」がセットされているのは、ライブラリ作成時にこの値をデフォルトとして指定しておいたからです。
その左にチェックマークがあるのは、値をセットするのが必須、という意味です。これもライブラリ作成時に必須項目に指定しました。
URLとURL名は、トラッカーの種類として「カスタムリンク」を選択すると表示されます。これはSiteCatalystの仕様です。オンマウスやクリックはページビューではないため、今回はカスタムリンクとして計測することにしました。「URL名」は少し分かりにくいですが、ページ名の代わりにリンク名（ラベル）を指定します。この値は、SiteCatalystのカスタムリンクレポート上で表示されます。SiteCatalyst管理者（または設計者）に確認しておく必要があります。
オンマウス用のトラッカーも同様に作成しました。Flash側のイベントとしては、Focus Inを選択してあります。
トラッカーを作成すると、アクションが作成されます。
図:Created Action:
4. テスト
パブリッシュしてテストしてみました。Firefoxで開き、HttpFoxというアドオンでHTTPパケットを調べるのが便利です。
図:Debugging HTTP Request with Firefox and HttpFox:
パラメータとして、意図した変数がセットされていればOKです。
SiteCatalystにログインして、カスタムリンクのレポートを見てみると、
図:SiteCatalyst Report:
問題なく計測されていました。インスタンス数＝クリック数です。
この後必要なこと
Flashは10年ぶりのほぼ素人ですが、GUIのみでサクっと設定できました。
実際はこの後さらに、ActionScriptをカスタマイズする必要があります。
- 成功イベントをセットする
- URLは固定値「https://www.rakuten.co.jp」ではなく、各メニューのリンク先URLを動的にセットする
いずれにしても、効率が高まったのは間違いないですね。今後積極的に活用してみたいと思います。
関連エントリー：Dreamweaver CS5のTest&TargetエクステンションでA/Bテストを準備する手順