Google Analytics Incoming Link Tracking Code For Flash Games

March 5, 2013

Filed under: Game Development — Simon Walklate

We’ve been using our own custom written link tagging and tracking code along with Google Analytics for some time now. It basically means we can track all traffic from links within viral Flash games, at the website end, including the specific game the visitor came from and the link they clicked within the game. Check out my previous post for details of why it’s advantageous and what it provides. I’ve also recently updated the code to send the data by hash tagging the URL, as opposed to using a standard query string, so no duplicate content issues with search engines. It consists of a small Javascript file which is installed on the destination website (usually the game developer or sponsor) and AS3 code which handles opening and tagging the links. This all allows you to see reports like this one:

Google Analytics Viral Game Incoming Link Tracking Report

You can finally easily see accurate details of website traffic on a per game basis. But not only can you see correlation between individual games and website actions, such as goal conversions and Adsense earnings, you can also drilldown to identify which links within the game produce the best results.

It’s perfect for Flash game sponsors and developers to install in their games and websites, to give much more detailed information about what actually happens when the visitor, who came via your game link, hits your website. It takes a little bit of setting up, but once it’s installed on your website, you won’t need to worry about it again. You’ll just need to use the supplied AS3 class to open any links you want to tag in your Flash games.

Anyway, I’ve decided to share the code, if anyone wants to use it, feel free. The only thing I ask is, please leave copyright notices intact and if you want to share it, please link to this blog post where people can download the code and see the installation instructions. If you do use it, although not essential, a link back to our website, from your website or blog, would be very much appreciated. Oh and the obligatory disclaimer…all code is provided as is with no guarantees, you use it at your own risk.

Right, let’s get on with the installation instructions then!

Download the Tagging/Tracking Code

You can download the code here.

Install the Javascript on Your Website

In order to send the link data to Google Analytics you need to install the Javascript part.

First of all, upload the contents of the ‘javascript’ directory into your website root directory. Then you need to include the Javascript file in your website by adding the following to your HTML document <head>:

<script language="JavaScript" src="/scripts/gagametracker.js" type="text/JavaScript"></script>

Then add one line to your Google Analytics tracking code (‘passTagToGA();’ in bold) like so. (You must be using the latest GA tracking code by the way):

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);


Then that’s it.

The only other thing I should mention is it uses custom variables to send the link data (slots 1 and 2 by default). If you are already using Google Analytics custom variables and need to configure which slots to send the data to you can by passing them to the function like so:

passTagToGA(gameNameSlotNo, linkNameSlotNo);

You’ll also need to bear that in mind when setting up your custom reports in the final step.

Tag Links From Your Flash Games

Now you need to send the link data from the Flash game to your website. Opening the links with the tags inserted is all handled by the main AS3 class. Just copy the contents of the ‘as3′ directory into your main Flash project directory and use it as follows:

Initialise the tracker, usually after your pre-loader somewhere. Obviously replacing ‘game name’ with the name of the game you’re linking from:

import com.themotionmonkey.utils.GALinkTagger;
GALinkTagger.init("game name");

Then the following code will open the link as well as send the info to Google Analytics. Obviously, make sure you import the GALinkTagger class again into any classes that use this:

GALinkTagger.openURL("url", "link name");

So you might use something like:

GALinkTagger.openURL("", "splash page");

Setting up the Custom Reports

Now you just need to set up the custom reports in your Google Analytics account.

Select your website profile, then the ‘Customisation’ tab then ‘New Custom Report’. You can create as many different custom reports and you need/want using ‘Custom Variable (Value 01)’ (the game name) and ‘Custom Variable (Value 02)’ (the link name). Or if you have configured it to use different variable slots, then use those instead. Here’s an example of a basic report configuration that will show details for each game and then drilldown to the link names for each game, when you click a game name (click to show full size image):

Google Analytics Flash Game Custom Report Setup

The filters at the bottom just make sure the report only shows traffic where those custom variables are set, i.e. traffic that came from a game.

And that’s it. It does take a bit to set up, but you only have to set up the Javascript tracking code on your website and the custom reports once. Then it’s just a case of using the GALinkTagger to open links in future games.

Feel free to let me know what you think and any issues you might have in the comments below.

Leave a Reply

The Motion Monkey • PO Box 2859 • Bristol • BS6 9GN • UK • Tel: 0117 230 7711