SWFObject+ExternalInterfaceでのGoogle Analytics設定

FlashとJavaSrciptの連携をするにはExternalInterfaceを使うと便利です。過去記事で面倒なやり方をエントリーしましたが今後はこちらのやり方で行こうと想います。

先日「Google Analytics」がFlashコンテンツのアクセス解析に対応しましたが、こちらのやり方は後でやってみるとして、とりあえずExternalInterfaceを使ってJavaSrciptと連携しGoogle Analyticsを使えるようにしてみます。

こんな感じです。

参考にさせて頂いたページ

• ryow.net Blog – FlashからGoogle Analyticsを使う（AS2、AS3両方対応）
• ryow.net Blog – SWFObjectを使ったExternalInterfaceまとめ
• Flash イベントをトラッキングするにはどうすればよいですか。 – Google Analytics ヘルプ センター

以下、上記のサイト様のマネマネです。
まず、ExternalInterfaceを使ってJavaSrciptと連携します。htmlの設定はこんな感じ。

<div id="externalFlash">
<script type="text/javascript">
	// <![CDATA[
	var so = new SWFObject('testGA.swf', 'external2', '350', '200', '9', '#ffffff');
		so.addParam('wmode', 'opaque');
		so.addParam('allowScriptAccess', 'always');
        so.write('externalFlash');
	// ]]>
</script>
</div>

1.SWFObjectを使ってFlashを表示させる部分をexternal**というdivで囲みます。
2.SWFObjectの第2引数をexternal**とします。
3.allowScriptAccessをalwaysに設定。

external**というidにするのがポイントのようです。Flashの設定は以下のようになります。(img1をクリックするとimg1用のページIDを送信)

import flash.external.ExternalInterface;
import flash.events.MouseEvent;
img1.addEventListener(MouseEvent.CLICK,clickTest)

function clickTest(event:MouseEvent)：void {
      ExternalInterface.call("pageTracker._trackPageview", "/flash/img1/");
    }

まず最初にexternalクラスのExternalInterfaceをimportして、callメソッドでJavaScript関数を呼び出します。call(”pageTracker._trackPageview”,”ページID”);という形式です。

さらにより使いやすくするためにpageTracker._trackPageviewを呼び出すためのクラスを作ります（ExGA.as）

package{
  import flash.external.*
  public class ExGA{

    public static function tracker(pageID):void{
      ExternalInterface.call("pageTracker._trackPageview",pageID)
    }
  }
}

このクラスを使ってできたサンプルがこんな感じです。（ドキュメントクラスMain.as）

package {
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;

	//Google Analytics
	import ExGA;

	public class Main extends MovieClip
	{

		//コンストラクタ
		public function Main():void {
			init();
		}

		public function init():void
		{
			//トラッキングに使うページID設定
			var page1:String = "/flash/433/";
			var page2:String = "/flash/peopot/";

			//イベントリスナー登録
			img1.addEventListener(MouseEvent.CLICK, clickTrack(page1));
			img2.addEventListener(MouseEvent.CLICK, clickTrack(page2));
		}

		public function clickTrack(pageID:String):Function
		{
			return function(event:MouseEvent):void
			{
				ExGA.tracker(pageID)
				//TextFieldにページIDを表示
				textArea.text = pageID;
			}
		}
	}
}

MouseEvent.CLICKで実行するclickTrackハンドラに引数を持たせ、その引数をExGAクラスのstatic関数trackに送って、MouseEventをもつハンドラ関数を定義しています。これによりクリックした画像により個別のページIDを持たせることができます。

サンプルデータ(36KB)