アナリティクス SWF:開発者向け Google Analytics Flash Tracking

Product
Video Cloud
対象となる役割
開発者
バージョン
Brightcove 5
モジュール
Player API
エディション
すべて

このトピックでは、Google Analytics Flash Tracking 向けにアナリティクス SWF を開発する方法を説明します。

Video Cloud の柔軟なプレーヤ アーキテクチャにより、自身のカスタム SWF コンポーネントをプレーヤに組み込むことができます。Google の Flash Tracking 機能では、ページ内の JavaScript コードに依存することなく、どこで公開されていてもプレーヤを追跡することができます。この機能の詳細については、開発者向け Google Analytics Flash Tracking を参照してください。

ActionScript を使い慣れていない場合は、Video Cloud 標準の Google Analytics との統合機能のご利用をおすすめします。Google 用にイベントを簡単に構成する方法については、「Google Analytics との統合」を参照してください。

さらにここをクリックすると、Open Source @ Brightcove の Google Analytics SWF を利用できます。簡単な解析がすぐにでき、データ収集要件のためのカスタマイズも可能です。

始める前に、入門用トピック「アナリティクス SWF を開発する」を参照してください。さらに、「Flash 専用 Player API SWC を使用する」「カスタム プレーヤ コンポーネントを作成する」、および「プレーヤの ActionScript ラッパー クラス」を参照してください。

このトピックでは、次の点について学習します。

  1. Google Analytics アカウントを設定する
  2. ActionScript 3 で Google Analytics Flash Tracking SWF コンポーネントを開発する
  3. Google Analytics SWF を Video Cloud プレーヤに追加する
  4. Google Analytics で Video Cloud のデータを見る

Google Analytics アカウントを設定する

Google Analytics の統合を行うには、まず、Google Analytics アカウントを開くことから始めます。その開設は無料です。

Google Analytics アカウントを作成し、サインインした後に、Web サイト プロファイルを作成します。Web サイト プロファイルとは、レポートを表示するための Google 上の名前のことです。Web サイト プロファイルでは、さまざまな方法でデータをフィルタリングし分割するために、同じ Web サイト(またはプレーヤ)に対して複数のプロファイルを作成できるので非常にパワフルです。ここでは、手始めにプロファイルを 1 つ作成してみましょう。

既存の Google Analytics アカウントを使用する

ページ ビューを追跡するために Web サイトのプロファイルを Google Analytics に作成済みの場合でも、同じ Web サイトに対して、Video Cloud データの追跡専用に新しいプロファイルを作成することを強くおすすめします。専用のプロファイルを作成しなかった場合、追跡しようとしている別の Web サイトのデータを上書きしてしまう可能性があります。「Google Analytics Help ドキュメント」でプロファイルの詳細を参照してください。

プロファイルを作成するには、以下の手順を行います。

  1. [Add Website Profile] リンクをクリックします。
  2. [Add a Profile for a new domain] フィールドに、プレーヤの URL を入力します。ただし、実際の HTML ファイル名は含めません。
  3. 必要に応じ、プロファイルのタイムゾーン設定を編集し、保存します。

プロファイルを作成すると、Google Analytics には追跡コードと、英数字で構成された「AA-123456-A」といった Google アカウント ID が表示されます。

注:Google Analytics の新しい Flash Tracking 機能の利用には、JavaScript の追跡コードは不要です。ただし Google アカウント ID は必要です。この ID をどこかに書き留めておいてください。アナリティクス SWF の開発時に必要になります。

ActionScript 3 で Google Analytics Flash Tracking SWF コンポーネントを開発する

このコンポーネントのソースを zip ファイルとしてダウンロードできます。このサンプル ファイルは、プレーヤのロード、メディアの開始、およびストリームの完了イベントを、追跡する Google Analytics に送信します。コンポーネントを拡張し、さらに多くのイベントを発生させることも簡単に行えます。

次のステップを使用して、Google Analytics SWF コンポーネントを作成します。

  1. ActionScript 3 の .as ファイルを作成し、.fla シェル ファイルにリンクさせます。.fla には、.as ファイル以外には実際には何も含まれません。サンプルの .fla ファイルを、このセクションの最初に記載されているコード ソース zip ファイルでダウンロードできます。このサンプルには、Flash CS4 以降を使用している必要があります。
  2. Google の説明に従って、必要なコンポーネント ファイルをインストールします。この例では AnalyticsLibrary のコンポーネントおよび手法を使用します。詳細は Google のドキュメントを参照してください。
  3. コードの最初の数行でパッケージを開始し、必要なライブラリをインポートし、クラスを宣言し、そして Video Cloud プレーヤのデータ保持に使用するいくつかの基本的な変数を宣言します。
  4. ここで、実行時に Google アカウント ID で代入する定数を定義します。
    // 定数
    var ACCOUNT_ID : String = loaderInfo.parameters.gid;
    var BRIDGE_MODE : String = "AS3";
    var DEBUG_MODE : Boolean = false;
    コンポーネントは実行時に、URL パラメータ gid から Google アカウント ID を読み込みます。このドキュメントの後半では、Publishing モジュールで Google ID を使用して URL をセットアップします。この例では、ActionScript 3 Bridge モードを使用し、debugfalse に設定します。これらのオプションについての詳細は、Google ドキュメントの追跡モードを参照してください。
  5. setInterface 関数で、必要な Video Cloud Flash 専用プレーヤ API モジュールをインポートし、テンプレートのロード イベントおよびコンテンツのロード イベント用のイベント リスナを追加します。
  6. onTemplateReady イベント ハンドラで、プレーヤ イベント用のイベント リスナを追加します。
  7. fireEvent 関数でイベント情報を収集し、それを Google Analytics に送信します。

イベントの追跡とページの追跡

Google は、Web サイト上で追跡を行うため 2 つの API を提供しています。1 つ目の API はページ ビューを追跡し、もう 1 つの API は具体的なイベントを追跡します。イベント追跡 API は、Flash コンテンツとの対話を追跡する目的で設計されました。つまり、視聴者が Video Cloud プレーヤと対話するときに発生する「動画再生」、「動画一時停止」などのイベントです。

イベントには 3 つのレベルのデータが関連付けられています。

  • カテゴリ:追跡したいオブジェクトをグループ化する方法として指定する名前。
  • アクション:通常は、Video Cloud のプレーヤまたは動画で視聴者が行うイベントや対話のタイプを指定する、アクション パラメータを指定します。
  • ラベル:ラベルは、特定のアクションに関する追加情報を提供する機会を指定します。例えば、動画の「一時停止」アクションが存在する場合、アクションが動画を一時停止したときにラベルが動画のタイムコードを指定する機能を提供します。

イベントの詳細は、Google Analytics ドキュメントを参照してください。

Video Cloud サンプル コードでのイベント追跡

サンプルの Video Cloud コードは、次のイベントを追跡します。

  • Video start:動画が開始されると発生します
  • Video completed:動画再生が完了すると発生します
  • Video progress:(100% 完了を含む)再生が 4 分の 1 完了するごとに発生します
  • Player load:動画再生が始まる前にプレーヤがロードされると発生します

発生するイベントおよびそれらに関連するカテゴリ、アクション、およびラベルのリストを次に示します。

イベント名 カテゴリ アクション ラベル
Video start video_start 動画名 動画タイムコード
Video completed video_complete 動画名 100
Video progress video_progress 動画名 完了した割合(.25、.5、.75、1)
Player load player_load プレーヤを埋め込んでいる URL プレーヤを埋め込むページを参照したリファラ URL

fireEvent 関数:Google にプレーヤ イベントを通知する

fireEvent 関数を使用して、Google Analytics でイベントを追跡する方法を見てみましょう。Google Analytics にイベントを送信する前に、現在ロードまたは再生されているプレーヤ、プレイリスト、および動画に関する情報を収集する必要があります。

private function fireEvent(eventName:String,loc:Number):void {
    var experienceId:Number  = _bcExperience.getExperienceID();
    var playerName:String  = _bcExperience.getPlayerName();
    var action:String = "";
    switch (eventName) {
    case EVENT_PLAYER_LOAD:
        var experienceURL:String = _bcExperience.getExperienceURL();
        var referrerURL:String = _bcExperience.getReferrerURL();
         _tracker.trackEvent(eventName,experienceURL,referrerURL);
         break;
         // add additional cases here if needed
    default:
         var video:Object = _bcVideo.getCurrentVideo();
         var playlistId:Number  = video.lineupId;
         var videoId:Number   = video.id;
         var videoName:String = video.displayName;
          _tracker.trackEvent(eventName,videoName,loc.toString());
    }

}

この例では、プレーヤ ロードについては、他の動画タイプのイベントとは違う情報を送信するよう選択しました。プレーヤ ロードについては、プレーヤがロードされた URL に加え、参照 URL を送信しました。他のイベントについては URL を送信せず、イベントが発生したときに再生されるコンテンツについて、より詳しい情報を送信しました。trackEvent() メソッドが呼び出されると、コンポーネントはイベントを追跡用に Google Analytics に送信します。具体的には、追跡プログラムは、Google Analytics アカウントでカウントを作成または増分します。

registerEvents 関数:イベント リスナを追加する

以下のコード スニペットが、tracker という名前の、新しい Google Analytics 追跡オブジェクトを作成します。コードは、プレーヤ ステージ、Google アカウント ID(すでに定義してある定数)、ブリッジ モードおよびデバッグ モードの設定(これらもすでに定義してある定数)への参照を渡します。

その後、テンプレート ロード イベントのイベント リスナを追加します。

private function registerEvents():void {
   _bcStage = _bcExperience.getStage();
 
   // Video Cloud プレーヤ ステージおよび Google アカウント ID への参照を持つ 
   // Google トラッカを作成
    _tracker = new GATracker(_bcStage, ACCOUNT_ID, BRIDGE_MODE, DEBUG_MODE);
 
    _bcVideo = player.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
    if (_bcVideo != null) {
        _bcVideo.addEventListener(MediaEvent.BEGIN, onMediaBegin);
        _bcVideo.addEventListener(MediaEvent.COMPLETE, onMediaComplete);
        // 注:ここで Video Cloud プレーヤ イベント リスナを追加できる
    }
 
    // BC メニュー イベントを追跡したい場合、ここで Menu モジュールへの参照を取得
    //_bcMenu = player.getModule(APIModules.MENU) as MenuModule;
 
    fireEvent(EVENT_PLAYER_LOAD);
}

initialize 関数:プレーヤ モジュールへの参照を取得する

initialize 機能は、プレーヤのモジュールへの参照、この場合は experienceStage を取得します。

まず始めに、プレーヤで ExperienceModule が使用可能であるかどうかを確認します。使用できない場合は、プレーヤ インスタンスでこの API が有効になっていないということであり、必要な API クラスがロードされていません。Video Cloud Studio Publishing モジュールで行ったプレーヤ設定に関わらず、loadModules() を呼び出して、これらのクラスを強制的にロードすることができます。MODULES_LOADED がディスパッチされるまで待機します。またこのコードは、ロード時にステージが使用可能かどうかも確認します。Google Analytics に初めてのプレーヤ イベントを通知する前に、ステージが使用可能かどうかの確認をすることは重要です。

/*
 * プレーヤは対話の準備が完了。ステージへのアクセスがないかチェックする。
 */
 override protected function initialize():void {
    _bcExperience = player.getModule(APIModules.EXPERIENCE) as ExperienceModule;
    _bcStage = _bcExperience.getStage();
    if (_bcStage == null) {
          _bcExperience.addEventListener(ExperienceEvent.ADDED_TO_STAGE, onAddedToStage);
    } else {
          registerEvents();
    }
}

Google Analytics SWF を Video Cloud プレーヤに追加する

Google Analytics Tracking SWF コンポーネントを作成し、コンパイルした後には、プレーヤで使えるようにする必要があります。Google Analytics SWF を使用するには、次の手順を行います。

  1. プレーヤからアクセスできる URL で、SWF をホスティングします。
  2. Brightcove ドメインおよび Google ドメインのデータに対する Flash プレーヤからのアクセスを許可するよう、crossdomain.xml ファイルをセットアップしておく必要があります。そのためには、次のドメインをサイトの crossdomain.xml ファイルに追加します。
    <allow-access-from domain="*.brightcove.com" />
    <allow-access-from domain="*.google-analytics.com" />
    この変更を行うため、Web 管理者への問い合わせが必要になることがあります。crossdomain.xml ファイルは、ドメインに配置されているファイルで、信頼するサードパーティ ドメインのリストが含まれています。このファイルの編集の方法が分からない場合は、Web 管理者にご相談ください。詳細と、サンプルのクロスドメイン ファイルについては、クロスドメイン セキュリティのトピックを参照してください。
  3. プレーヤで、Google Analytics SWF を使用するよう設定します。これを行うには、Publishing モジュールでプレーヤ設定を編集するか、「アナリティクス SWF を開発する」で説明されているように、プレーヤ テンプレートのモジュールとして SWF を追加します。アナリティクス SWF の URL を入力する際に、gid パラメータを使用して、Google の ID を渡す必要があることに注意してください。たとえばアナリティクス SWF の URL を設定するには、次の gid URL パラメータを含めます。
    http://mysite.com/analytics.swf?gid=AA-123456-A
  4. [オプション] アナリティクス SWF を使用するプレーヤに ActionScript/JavaScript API を有効化します。これは、Publishing モジュールの [Edit Settings] ダイアログボックスで行います。プレーヤで API を有効にしない場合でも、統合のためのサンプル コードは動作します。それは、ActionScript のコードに直接、API を有効にする処理を組み込んであるためです。

Google 追跡コードを含むプレーヤが公開されると、イベントが Google レポートに表示されるまでに最長で 24 時間かかります。

Google Analytics で Video Cloud のデータを見る

ここまでの手順で説明したように、Google Analytics にデータを送出するようにプレーヤを設定すると、Google Analytics のレポートで動画のデータを見ることができるようになります。次に、以下の手順を行います。

  1. Google Analytics アカウントにログインします。
  2. 左サイドバーのメニューでクリックして [Content] レポートを表示し、サブメニューから [Event Tracking] を選択します。
  3. Top Events はフロント ページに表示されることに注意してください。
  4. 動画名は、Event Action セクションの下に表示されることに注意してください。

イベントを追跡する

図 1. Google Analytics Event Tracking ページの例を示します。

注意と制約事項

Google Analytics を使用するには、次の制約事項とその他の情報に留意してください。

  1. 各プレーヤ、またはカスタム プレーヤ テンプレートに、Web Analytics SWF に対するパスを設定することはできますが、すべてのプレーヤのアカウント レベルには設定することができません。
  2. Google Analytics には、ページ ビューの制限があります。Google Analytics は、毎月最大で 500 万のページ ビューを提供する無償のサービスです。サイトに毎月 500 万以上のページ ビューがある場合は、Google Analytics サービスの中断を回避するには、アクティブな AdWords アカウントにリンクする必要があります。Google Analytics は現在、アクティブで実行中のキャンペーンを少なくとも 1 つ持ち、毎日 $1 以上(または、米国以外の通貨の場合は、それに相当する額)の予算のある AdWords アカウントとして、アクティブな AdWords アカウントを定義しています。
  3. Google では、Google Analytics で設定された永続的な追跡クッキーを無効にしないよう推奨しています。無効にすると、New Vs. Returning と Visitor Loyalty(またはこれらに限らない)のいくつかのレポート、および Traffic Sources 下のすべてのレポートで、データが失われます。サイトですべてのクッキーを無効にする必要がある場合は、Google Analytics の Web サイトに記載の情報に従って行ってください。

 

タグ
サンプル, ユーティリティ SWF