Helpful stuff on Flash, ActionScript, After Effects etc

cases, code, tips and guidance

Archive for the ‘NetStatusEvents’ Category

ActionScript 3.0: tracking video progress using JavaScript and Google Analytics

with 2 comments

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.

first of all, check out this example that informs Google Analytics everytime the video either starts or stops

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).my screenshot that shows how many times my video has been started and stopped

kinda nice, right?

The ActionScript:
For ActionScripters, all the code can be read here..

package {
         
          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

Bookmark and Share

Written by admin

december 21st, 2009 at 11:14 pm