Archive for the ‘NetStatusEvents’ Category
ActionScript 3.0: tracking video progress using JavaScript and Google Analytics
adding Flash Video (.flv) to the internet is nice, but how can you tell if the video is really being seen?
well, listening for NetStatusEvents in ActionScript 3.0 helps you tell you more.
in this example I listen for 2 different events:
I listen for NetStream.Play.Start that tells me, if the video has started.. and
I listen for NetStream.Play.Stop that tells me, if the video has ended.
in this example the video is only about 15 seconds, but if the video was much longer, it might be useful to track other stuff to Google Analytics.
so, when the video starts I use ActionScript to call this JavaScript function:
ExternalInterface.call(“pageTracker._trackEvent(‘TrackingAfVideo’, ‘Analytics.flv’, ’start’)”);
and when the video stops I use ActionScript to call this JavaScript function:
ExternalInterface.call(“pageTracker._trackEvent(‘TrackingAfVideo’, ‘Analytics.flv’, ’stop’)”);
Google Analytics:
in Google Analytics I can then see how many times the video has started and how many times it has stopped.
check out this screenshot that shows the very first tracking of this video in Google Analytics (click to enlarge).
kinda nice, right?
The ActionScript:
For ActionScripters, all the code can be read here..
import caurina.transitions.Tweener;
import flash.display.Sprite;
import flash.events.NetStatusEvent;
import flash.external.ExternalInterface;
import flash.media.SoundTransform;
import flash.media.Video;
import flash.net.NetConnection;
import flash.net.NetStream;
import MonsterDebugger;
public class FLVAnalyticsContent extends Sprite {
private var _md:MonsterDebugger;
private var _duration:uint = 0;
private var _ready:Boolean = true;
private var _vid:Video = new Video();
private var _conn:NetConnection = new NetConnection();
private var _stream:NetStream;
private var _infobox:InfoBox;
public function FLVAnalyticsContent() {
init();
}
private function init():void {
trace("function init");
_md = new MonsterDebugger(this);
setupVideo();
}
private function setupVideo():void {
_conn.connect(null);
_stream = new NetStream(_conn);
_stream.bufferTime = 5;
_stream.addEventListener(NetStatusEvent.NET_STATUS, streamHandler, false, 0, true);
var videoVolumeTransform:SoundTransform = new SoundTransform();
videoVolumeTransform.pan = 0;
_stream.soundTransform = videoVolumeTransform;
var metaHandler:Object = new Object();
metaHandler.onMetaData = function(meta:Object):void {
_duration = meta.duration;
_ready = true;
//show all metadata in Output panel
for (var i in meta) {
trace(i + ": " + meta[i]);
}
//Resize vid instance if metadata exists
if(meta.width > 0) {
_vid.width = meta.width;
_vid.height = meta.height;
}
}
_stream.client = metaHandler;
_stream.play("Analytics.flv");
_vid.attachNetStream(_stream);
_vid.x = _vid.y = 0;
addChild(_vid);
setupText();
}
private function setupText():void {
_infobox = new InfoBox();
_infobox.x = 360;
_infobox.y = 546
addChild(_infobox);
}
private function streamHandler(evt:NetStatusEvent):void {
//trace("evt.info.code = "+evt.info.code+" & stream.time = "+_stream.time+" & evt.toString = "+evt.toString);
if(evt.info.code == "NetStream.Play.Start") {
trace("VIDEO HAS STARTED");
_infobox.alpha = 1;
ExternalInterface.call("pageTracker._trackEvent('TrackingAfVideo', 'Analytics.flv', 'start')");
_infobox.theText.text = "the video has started, Google Analytics has been informed";
fadeOut();
} else if (evt.info.code == "NetStream.Play.Stop"){
trace("VIDEO HAS ENDED");
_infobox.alpha = 1;
ExternalInterface.call("pageTracker._trackEvent('TrackingAfVideo', 'Analytics.flv', 'stop')");
_infobox.theText.text = "the video has ended, Google Analytics has been informed";
fadeOut();
Tweener.addTween(_infobox, {scaleX:1, time:3.5, onComplete:reStart});
}
}
private function fadeOut():void {
Tweener.addTween(_infobox, {alpha:0, time:2, delay:1});
}
private function reStart():void {
_stream.play("Analytics.flv");
}
}
}
—
Related blogposts on Flash Video:
Knowing how to calculate the compression of your Flash Video (.FLV)
ActionScript 3.0: how to control panning of a SoundTransform Object / laid back jazz video
ActionScript 3.0: using ASCuePoint with Flash Video (.flv)
ActionScript 3.0: how to add a fullscreen option to an FLV
ActionScript 3.0: looping an .flv with the FLVPlayback component