DoubleClick-InStream + AS3

DoubleClick-InStream

通常の Flv ビデオを FlvPlayBack や Video オブジェクトで再生する際に、何からの宣伝やコマーシャル用のプリロールやミッドロールやポストロールビデオを流す際に便利な DoubleClick-InStream。プラットフォームは Flash Player、Silverlight、Windows Media Player、Real Player に対応しています。リクエストする URL にアクセスすると doubleclick サーバが xml にリダイレクトして、広告タイプによって値を返してきて、それを Flash 側でどの様に表示するかをリスポンスの後に設定します。自分は FlvPlayBack を使用して他の Flv と連携する Flash in Flash タイプを使用したので、doubleclick サーバにアクセスすると勝手に Flv とリンク先が返ってきました。

自分も 100 %理解した訳ではなくドキュメントを読んでも分からない部分があったんですが、今回のプロジェクトでは上手く通常の Flv と宣伝用 Flv を難しいコードを記述すること無く同期出来たので、自分の為に忘れない様にメモ。

(1)インストール

MXP で入れるタイプと SDK で入れるタイプが google code より提供されています。タイプも Google In-StreamDoubleClick In-Stream があるようで、自分は Google In-Stream を使用したんですが、後者は書くソースが違って結果は同じようです。

(2)リクエストとリスポンス

下記の様な URL にアクセスします。ブラウザでアクセスすると Windows Media Player が起動しますが、Component や SDK ベースのコードベースでアクセスすると、内的な処理は XML で返ってるようです。その後の処理はどうなってるかはよく分かりません。

http://ad.doubleclick.net/pfadx/AngelaSite;kw=dclkvideo;sz=120x350;ord=3577745;

Google In-Stream の場合は AdsLoaderAdsRequest クラスを使用してアクセスするので、URLLoader クラスと URLRequest クラスのを使用する方法といたって基本は同じです。


(3)マッピング

リスポンスは AdsRequest.adType の値によって変わるようなので、この値を基に AdsLoader.load した際のイベントハンドラ内でどのようなメディアが返ってくるか判断します。Video の表示は VideoAdsManager を使用して行います。ここで凄いな!って思ったのは、videoAdsManager.load(flvPlayBack or VideoObject) / videoAdsManager.play(flvPlayBack or VideoObject) を設定するだけで、勝手に Flv が通常の FlvPlayBack や Video オブジェクトに表示されちゃうことです。後は AdEvent.COMPLETE イベントハンドラが呼ばれたら Flv の表示は終了なのでこのタイミングで任意の処理をします。1つ忘れては行けないことは videoAdsManager.clickTrackingElement に任意の DisplayObject を設定してやることです。そうしないとエラーになります。自分の場合はプリロールなので、AdEvent.COMPLETE が dispatch された時点で、次の通常の Flv を表示する様にコーディングしました。

(4)集計

ドキュメントによれば load や complete のトラッキングや AFV(Adsense for Video) でクリックのインプレッションをトラッキングしてくれるそうです。

(5)基本のソースの流れは下記な感じです。

package view.contents
{	
	import com.google.ads.instream.api.AdErrorEvent;
	import com.google.ads.instream.api.AdEvent;
	import com.google.ads.instream.api.AdLoadedEvent;
	import com.google.ads.instream.api.AdsLoadedEvent;
	import com.google.ads.instream.api.AdsLoader;
	import com.google.ads.instream.api.AdsManager;
	import com.google.ads.instream.api.AdsManagerTypes;
	import com.google.ads.instream.api.AdsRequest;
	import com.google.ads.instream.api.VideoAdsManager;
	import fl.video.FLVPlayback;	
	import flash.display.MovieClip;
	import flash.events.Event;
	public class TestDoubleClickInStream extends MovieClip
	{
		private var _compPlayer:FLVPlayback;
		private var _mcButton:MovieClip;
		private var _adsLoader:AdsLoader;
		private var _adsManager:AdsManager;
		public function TestDoubleClickInStream()
		{
			super();
			this.init();
		}
		private function init():void
		{
			this._compPlayer = this["compFlvPlayBack"];
			this._mcButton   = this["mcButton"];
			this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true);
		}
		private function onAddedToStage(evt:Event):void
		{
			this.loadAd();
		}
		private function loadAd():void
		{
			// AdsLoader
			this._adsLoader  = new AdsLoader();
			this.stage.addChild(this._adsLoader);
			this._adsLoader.addEventListener(AdsLoadedEvent.ADS_LOADED, onAdsLoaded, false, 0, true);
			this._adsLoader.addEventListener(AdErrorEvent.AD_ERROR, onAdError, false, 0, true);
			// Create AdsRequest
			var adsRequest:AdsRequest = new AdsRequest();
			adsRequest.adSlotWidth = 400;
			adsRequest.adSlotHeight = 300;
			adsRequest.adTagUrl = "http://ad.doubleclick.net/pfadx/AngelaSite;kw=dclkvideo;sz=120x350;ord=3577745;";
			adsRequest.adType = "video";
			adsRequest.maxTotalAdDuration = 12000;
			adsRequest.adSlotHorizontalAlignment = "center";
			adsRequest.adSlotVerticalAlignment     = "middle";
			adsRequest.contentId = "unique-content-identifier";			
			// Request ads
			this._adsLoader.requestAds(adsRequest);
		}
		private function playContent():void {	
			this._compPlayer.source = "http://www.covexstyle.com/test.flv";
		}
		private function onAdsLoaded(evt:AdsLoadedEvent):void
		{
			trace("Loaded");
			this._adsManager = evt.adsManager;
			this._adsManager.addEventListener(AdErrorEvent.AD_ERROR, onAdError, false, 0, true);
			this._adsManager.addEventListener(AdEvent.COMPLETE, onCompleteHandler, false, 0, true);
			if(this._adsManager.type == AdsManagerTypes.VIDEO)
			{
				var videoAdsManager:VideoAdsManager = this._adsManager as VideoAdsManager;
				videoAdsManager.clickTrackingElement = this._mcButton;
				this._adsManager.load(this._compPlayer);
				this._adsManager.play(this._compPlayer);
			}
		}
		private function onPrerollVideoLoadedHandler(evt:AdsLoadedEvent):void
		{
			trace("Loaded");
		}
		private function onCompleteHandler(evt:AdEvent):void
		{
			this.playContent();
		}
		private function onLoadedHandler(evt:AdLoadedEvent):void
		{
			trace("Loaded");
		}
		private function onAdError(evt:AdErrorEvent):void
		{
			trace("error: " + evt);
			trace(evt.error.errorType);
			trace(evt.error.errorMessage);
		}
	}
}

・・・・・

「参考サイト」
Double-Click InStream について
Google InStream API について

ページの一番上へ移動

トラックバック

この記事へのトラックバック URL は下記の通りです。
http://www.convexstyle.net/mt/mt-tb.cgi/133

コメントの投稿

初めて投稿される方のコメントは管理者の承認が必要となります。ご了承ください。