Using Google Analytics In Your Flash Projects

Download Example Files

Many times people think that you lose tracking ability in your projects if you use Flash. Of course you can set up multiple SWFs and host them on separate HTML pages on your site, but why bother? You can use Google Analytics to track your button clicks and report to you what buttons users clicked on your site to get to what sections of the SWF file.

I've recently had to do this on two projects. Google recently updated Analytics to use a new tracking code to display many more statistics so in case you're still using the old code, I'll show you how to do both and in both AS2 and AS3. The HTML code is the same for both AS versions since that is the actual code for the tracking, but I've separated out the code into two parts. The first demonstrates the tracking code for the legacy approach while the second shows the new code.

HTML:
  1. <!-- LEGACY GOOGLE ANALYTICS CODE -->
  2. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4.     _uacct = "UA-000000-0";
  5.     urchinTracker();
  6. </script>
  7.  
  8. <!-- NEW GOOGLE ANALYTICS CODE -->
  9. <script type="text/javascript">
  10.     var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  11.     document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  12. </script>
  13. <script type="text/javascript">
  14.     var pageTracker = _gat._getTracker("UA-000000-0");
  15.     pageTracker._initData();
  16.     pageTracker._trackPageview();
  17. </script>

Now, the difference between the AS2 and AS3 approach is obviously the way that button events are handled. Other than that, the way to use the tracking code is the same. Let's take a look at both.

AS2:

Actionscript:
  1. // legacy tracking code
  2. indexLegacy_mc.onRelease = function():Void
  3. {
  4.     getURL("javascript:urchinTracker('/home/indexLegacy');");
  5. };
  6.  
  7. // new tracking code
  8. indexNew_mc.onRelease = function():Void
  9. {
  10.     getURL("javascript:pageTracker._trackPageview('/home/indexNew');");
  11. };

AS3:

Actionscript:
  1. indexLegacy_mc.addEventListener(MouseEvent.MOUSE_UP, doLegacyRelease);
  2. indexNew_mc.addEventListener(MouseEvent.MOUSE_UP, doNewRelease);
  3.  
  4. indexLegacy_mc.buttonMode = true;
  5. indexNew_mc.buttonMode = true;
  6.  
  7. // legacy tracking code
  8. var legacyURL:String = "javascript:urchinTracker('/home/indexLegacy');";
  9.  
  10. function doLegacyRelease($evt:MouseEvent):void
  11. {
  12.     navigateToURL(new URLRequest(legacyURL));
  13. }
  14.  
  15. // new tracking code
  16. var newURL:String = "javascript:pageTracker._trackPageview('/home/indexNew');";
  17.  
  18. function doNewRelease($evt:MouseEvent):void
  19. {
  20.     navigateToURL(new URLRequest(newURL));
  21. }

So what exactly is happening here and how does the info get recorded? Well, the way this works is that you can make a "trail" for your tracking. For instance, in the example files, I've made two buttons, indexLegacy_mc and indexNew_mc, which are just to show the two different setups depending on what code you're using. Theoretically, because we don't have a site to store it on, these buttons are on the "home" page. Therefore, when I click the button, I want to report to Google Analytics that I clicked the indexNew or indexLegacy button on the home page, which tells me that I've headed to whatever part of the site that button takes me to. In turn, Google Analytics records that click and tracks it. I'd love to show a screenshot of this in action, but you'll have to trust me on it as it is agency work and I cannot show off the stats. I also don't actually have this example hooked up anywhere in my Google Analytics account so just take my word for it, young grasshopper.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

38 Comments

[...] Many times people think they lose tracking of their projects if they use Flash.  You can use Google Analytics to track your button clicks and report to you what buttons users clicked on your site to get to what sections of the SWF file. Recently Google updated Analytics to use a new tracking code to display many more statistics so in case you’re still using the old code, I’ll show you how to do both and in both AS2 and AS3. A Flash friend has posted this  on his blog http://evolve.reintroducing.com/2008/01/09/tips-n-tricks/using-google-analytics-in-your-flash-projec... [...]

[...] Fonte [Evolve] [...]

great introduction to google analytics. i was wondering if it possible to track a dynamic site. ie how to pass a variable to the javascript rather a static name... is that anything you've tried?

thanks
anders

Hey anders,
That's a very good question, and although I haven't tried nor am I proficient with JavaScript, I'd imagine you would be able to do this but just formulating the string dynamically that gets passed to the javascript call. If you try it, let me know if it works out for you. Thanks!

I have been using http://www.mochiBot.com. But this is a good One. Thanks Matt for sharing this.

Platfuse,
I've never used MochiBot but I keep hearing about it. I went ahead and signed up and I'll have to take a look when I get some time about what all the fuss is over. 😛 Thanks for the heads up.

Hey - quick question from a novice Flash coder; I added code similar to what you mentioned above, but each time my eventListener is called, Flash opens a new window in the browser. How can I stop that from happening? Thanks!

are you testing inside of the Flash environment or on a site? if you are testing inside of the Flash IDE, it'll do that because it recognizes a getURL (or navigateToURL) as a call to a URL, whereas when its on a server it silently fails because there is javascript in the HTML page that knows how to handle the call.

if you're using AS3, do a search on this site for the Environment class which will allow you to check if its a live site or the Flash IDE and react accordingly.

Do you know if its possible to track a file using only Flash? (for instance, embedding a SWF on a page in a corporate CMS without having access to the HTML, PHP or Java.)

James,
As far as I know, there is no system that uses only Flash to track. You can try MochiBots as someone else suggested, but i'm not familiar with it and am not sure how it tracks. good luck.

[...] Read the article No Comments Leave a Commenttrackback addressThere was an error with your comment, please try again. name (required)email (will not be published) (required)url [...]

Hi Matt,

There are some limitations if directly call google analytic's javascript function. I recommend to write a wrapper function. Details are here,
http://flashrevolution.net/flash-website-tracking-with-google-analytics/

Using the "javascript:" pseudo-protocol is oldschool and seems so over-complicated in AS3, why not do it the proper way using ExternalInterface? It works exactly the same in AS2 and AS3:

ExternalInterface("pageTracker._trackPageview", "path/to/resource");

or

ExternalInterface("urchinTracker", "path/to/resource");

Hey 5566/Theo,
Yeah, with the new Flash Player ExternalInterface is definitely the way to go. I haven't had a chance to update my code yet but what Theo wrote is what the update will look like pretty much. Thanks.

Hm... new? ExternalInterface was introduced in Flash Player 8, released two years and eight months ago.

I said the new Flash PLAYER, not IDE, EI was introduced in Flash CS2 (8) which I'm well aware of, and if you've been following the security restrictions for the new flash player, there is a note in there about using "javascript:" vs ExternalInterface, I'm talking about version 9.0.124 or whatever this new one is.

Ok, sorry, as I read your comment you seemed to suggest that ExternalInterface was a new feature, but now I get what you meant.

No worries, I could see how you may have misunderstood. No harm done.

I am not very flash savvy - so I have a question about Google Analytics and flash. Is adding the Analytics scripting to the flash buttons/pages necessary only when you have a self-contained flash site, where everything is nested in a single HTML document? You mentioned in your intro text to this page about developers who create multiple SWF files on individual HTML pages - and this is precisely how this site was built. We did this because we thought it would help track it. However, after reading this (and only recently hearing about Google Analytics) - is it worth going in an adding script to all the HTML pages, and to the flash buttons?

Sorry if this is a dumb question - this is all very new to me!
Thanks!

Hey James,
Not a dumb question at all. A very good one, actually. If I understand you correctly, you have a separate SWF for each section of your site that lives on its own HTML page, correct? If that is the case, it is up to you if you want to track the button clicks in Flash or if you only want to track the html pages and when a user clicks somewhere to arrive there.

The point of this system that I outlined here is that normally in Flash movies you may have more than one button and you want to track when someone clicks on it (essentially saying they went to a different section of the SWF) so that Google Analytics knows to record that a user visited that "section" of the site.

So, for your setup, if you have buttons in your movies but on separate HTML pages, its up to you if you want to track the button click or if you want to put in only the Google Analytics code for HTML (not the flash version) on each separate HTML file of your site. However, if you have more than one button on a page that has a SWF file and that button takes you somewhere inside of that same swf file on the same HTML page, you'll probably want to use this method to track where that is going in the SWF because you aren't physically changing HTML pages.

Hope thats somewhat understandable.

I’m a bit of a novice with AS3 and had hacked together putting GA code on redirect pages so I could track clickthroughs for a video ad… this code is so much better.

My question: What would you suggest to track when a user clicks the play button on the video component? That’s the missing piece between impressions and clickthroughs that I’m being asked to provide.
thanks.

Kevin,
I'm not sure that I'm understanding your question. You can track whatever you'd like, it's up to you to choose the "path" that displays in GA when you have a click.

Using Google Analytics In Your Flash Projects...

Using Google Analytics In Your Flash Projects...

[...] Using Google Analytics In Your Flash Projects [...]

Folosirea Google Analytics in Flash...

Foloseste Google Analytics pentru a tine evidenta clicurilor pe butoane si afla ce butoate au fost clicate....

Hey Matt,

Thanks for your helpful breakdown of this topic. I just want to make sure I understand what you meant (as I too am an AS3 rookie).

Say I have a button that opens up an FLVPlayback instance. In the function assigned to the eventlistener, I would basically copy and paste the following code, right?

var newURL:String = "javascript:pageTracker._trackPageview('/html/Movie01played.html');";
navigateToURL(new URLRequest(newURL));

This would then "silently" execute the tracking code I've added into specified html page, right?

Theoretically, I could then create a separate html page with the GA tracking code for every click I'd like to track. In this case, say "Movie1played.html". These pages I could then list in the Goal Seek section of Google Analytics, right?

Just want to make sure I get the picture.

Thanks for your time,

Dewet van Rooyen
Somerset West, South Africa

Dewet,
That sounds about right 😛

[...] class is a follow-up to my original post about using Google Analytics in your Flash projects. PLAIN TEXT [...]

[...] I’ve previously made posts about tracking using Google Analytics in your Flash projects as well as a utility class to do that as well, both of those things were AS2 (even though they are [...]

Using Google Analytics In Your Flash Projects...

You can use Google Analytics to track your button clicks and report to you what buttons users clicked on your site to get to what sections of the SWF file....

Action script 2.0
I have 6 buttons on my flash site.

Home
Info
...

I have this code in my html:

what code should put in my buttons?

Can some one help me.

Thanks

To be honest i didn't know that this would be possible with Analytics. I'll give it a try and see how it would work. Thank you for this tutorial.

Cool post. I really like your idea and i think it would be useful for my projects.

Electric Fence for Dogs...

[...]This was pointed out by[...]...

Many thanks for this website. I am sorry for the offtopic inquiry, but would you advocate blogEngine over WordPress? cause I am considering about working with that.

If you are going for best contents like me, just pay a visit this
website everyday because it offers quality contents, thanks

Kitchen layouts deal with all of the aspects that go into creating a kitchen in-detail.
Each area of the kitchen is resolved in detail, by giving measures of all add-ons, from
your sink to the cupboards, as well as the lighting.
There are numerous in making their own kitchen designs, designing products overly that guide a
man. A person make an effort to construct the kitchen according to measurements and
their layouts, and may possibly also start to see the newest kitchen lay-out of pals.

The development of Smartphones before few years
has been exceptional. Nearly everyone today works on the Smart Mobile Phone; if you are looking over this post it is
not fairly impossible that you just are reading it from
your Smart Phone. This increase has affected virtually all sectors.
Social media is one such sector where Smart Mobile Phones have made a massive difference in its increase.
The growth rate continues to be instrumental. Most people are
connected socially 24*7 thanks to these intelligent devices.
Login to your social-network to link to several
individuals and you do not have to sit on desktop computer
or your laptop after returning home after work.

Leave a comment

(required)

(required)