Flash: How to use Flash or Flex or Ajax with Google Conversion tracking

Google Conversion tracking is immensely useful if your are using PPC (PayPerClick e.g. Adsense) to drive traffic to your rich media site, to help optimize (automatically, even!) the campaign as to what ads/keywords are using.

A few weeks ago, I was only used to working with google analytics. Which is conceptually similar, in the are both owned by google, both are used to measure business performance of your website or RIA,  but it turns out completely different in implementation! 

Google analytics is a general purpose hit tracking, and is useful especially inconjunction with A/B or multivariate testing of the site, without regards to how much money is being spent in the commerce side.  Think of this as a traffic pattern of your site. 

Google Conversion tracking is all about the $$$. Like keeping you from losing it!   PPC campaigns can be quite expensive, $.25- $1.00 per click is pretty common in unoptimized campaigns. Given only like 1-3% of all the traffic will convert into a sale, making sure that you are making each precious marketing dollar go as far as possible.

Analytics is really easy to use with flash, there are libraries to call javascript to call google or through AS3 library call google directly.  Conversion on the other hand, is hard to use with google. They give you a cut and paste code meant to be put into a html that loads once, However when you have a rich media site, AJAX, Flex there isn't really a page load during switching between segments.

There are 2 possible solutions so far.

1) DIV Injection
2) IFrames or Hidden Frame

SOLUTION #1: Div Injection

Injection is a superior choice as your flash can (security permitting) add all the javascript and related code it needs without the owner of the site having to do anything special.

This following self contained snippet could go in any AS3 file, to call the google Analytics pageTrack. It also niftily amends the document with the google javacript.

import flash.external.ExternalInterface;
var myJavaScript:XML = 
<script>
    <![CDATA[
        function(gaCode){
 
 
 
 
   var gaScript = document.createElement("script");
   gaScript.id="gaJS";
  gaScript.type = "text/javascript";
  gaScript.src ="http://www.google-analytics.com/ga.js";
   var head = document.getElementsByTagName("head")[0];
   head.appendChild(gaScript);
 
// sometime after it's done loading the script above, call the page track //
   var  myDiv = document.createElement("div"); 
   myDiv.id ="track";
	myDiv.style.width = "0px"; 
	myDiv.style.height = "0px";
	var ptScript = document.createElement("script");
   	ptScript.id="ptJS";
	ptScript.type = "text/javascript";
	ptScript.innerHTML ='try { var pageTracker = _gat._getTracker(\"'+gaCode+'\"); pageTracker._trackPageview();} catch(err) {}';//gaCode;//"alert('hello');";
	//ptScript.appendChild(document.createTextNode("alert('hello');"); //didn't work for me.
 
	myDiv.appendChild(ptScript);
	document.body.appendChild(myDiv);
 
 
 
        }
    ]]>
</script>;
 
 
ExternalInterface.call(myJavaScript, conversion_code_txt.text); //e.g. "UA-12345678-9");//

Just copy and paste into a flash movie, publish and test on a webserver. You should be able to see with FireFox+FireBug the call to the ga.js library (if it's not already cached) and the second to the conversion script in the NET tab.

If you need more help on the approach, see this This 10 pager on actionscript.orrg

It is a GREAT resource on all the many things that can be done with the technique of javascript/vbscript injection.

SOLUTION #2: IFrames

Iframes are generally considered evil, but in this case they are necessary.  Basically you have to call out from your actionscript code to a conversion javscript, which creates a iframe via javascript then loads in the html page

So YOUR ACTIONSCRIPT > ExternalInterface -> Javascript iframe loader-> iframe loads > google conversion code fires.

WARNING:  we used this approach on one of our download pages, one where flash triggers a download of an installer simultaneously calling out to google Conversion.   While it worked locally, when live on the website, only one call would work, and it seemed intermittent....

TESTING YOUR CONVERSIONS BEFORE GOING LIVE

WARNING: Google Conversions don't show up in reports right away taking 3-24 hours. So this can make testing slow.

Here's the protocol for testing

Go into your campaign manager, setup the conversion/action, then generate the conversion code you get from google  into a file  (e.g iconversion.html).  MAKE SURE YOU PUT IT IN BETWEEN THE BODY TAGS. Put a javascript alert so you can see it working. e.g
<br /> <html></p> <p><head><br /> <!-- Google Code for Downloads Conversion Page --><br /> <script><br /> alert('iconverted');<br /> </script></p> <p></head><br /> <body><br /> <script language="JavaScript" type="text/javascript"><br /> <!--<br /> var google_conversion_id = YOURCONVERSION_ID;<br /> var google_conversion_language = "en_US";<br /> var google_conversion_format = "1";<br /> var google_conversion_color = "fafafa";<br /> var google_conversion_label = "XXXXXYOUR CODEXXXXX";<br /> if (1.0) {<br /> var google_conversion_value = 1.0;<br /> }<br /> //--><br /> </script><br /> <script language="JavaScript" src="http://www.googleadservices.com/pagead/conversion.js"><br /> </script><br /> <noscript><br /> <img height="1" width="1" border="0" src="http://www.googleadservices.com/pagead/conversion/YOURCONVERSION_ID/?value=1.0&label=XXXXXYOUR CODEXXXXX&guid=ON&script=0"/><br /> </noscript><br /> </body><br /> </html><br />
Test that locally make sure you see the alert.

Upload that page to your server. e.g. www.troyworks.com/iconversion.html.   Open up a browser and test that page in the browser, you should see the alert() you set up.

Setup a trial ad in your campaign that points to that, with some keyword unlikely to be clicked on (e..g I bid on my site troyworks.com). If your using a clients website for testing, make sure you have keywords corresponding to their site, or landing page text or google won't accept it (thinking it's spam)

Looking in the reports you should see 0 conversions.  Give google a few minutes to promote the ad live.

Once it's finished (and assumingly approved) Open up a browser and search for the keyphrase you used in google.com, Your ad should show up on the side of the search results. Click on it, and you should be taken to the iconversion.html page, and see the alert pop up.

if you've gotten this far, then the next step is setting up the real landing page, and adding a javascript call to have that iconversion page loaded up into an hidden iframe. Let's call this index.html

Inside it you'll need a javascript area like

<br /> <script type="text/javascript" ><br /> function conversion(aurl) {<br /> //alert ("conversion");<br /> ifrm = document.createElement("IFRAME");<br /> var aurl= "iconversion.html?" + Math.random();<br /> alert("conversion " +aurl);</p> <p> ifrm.setAttribute("src", aurl);<br /> ifrm.style.width = 640+"px";<br /> ifrm.style.height = 480+"px";<br /> document.body.appendChild(ifrm);<br /> return "";</p> <p>};</script><br />

Then in your flash code you need something simple to call that javascript to call
<br /> if(ExternalInterface.available) {<br /> var res:Object = ExternalInterface.call("conversion", page);<br /> trace("got return value " + res);<br /> }<br />
NOTE: Sorry about the extra
tags, something wonky with my conversion routine.

I created a simple swf that just called that above function and used it in the index page. Testing locally as soon as the swf loaded I got the javascript alert.

Upload to the webserver, repeat the direct test, and then the test through the ad. You should see the alert and in the latter case 3-12 hours later the conversion should show up in your reports.

At this point you can turn on the automanage campaign feature...and google will try to get your bids low as possible and your positions as good as you've specified. Take down the scaffoling (e.g. alert tags) and use wherever you've decided on.

Good Luck!

Tagged as: analytics, flash, google analytics, google conversion tracking