<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Daniel Eneström &#187; ExternalInterface</title>
	<atom:link href="http://blog.enestrom.com/tag/externalinterface/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.enestrom.com</link>
	<description>Ramblings of a web developer</description>
	<lastBuildDate>Wed, 27 Jan 2010 19:49:14 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Google Analytics and Flex using ExternalInterface</title>
		<link>http://blog.enestrom.com/20081114/google-analytics-and-flex-using-externalinterface/</link>
		<comments>http://blog.enestrom.com/20081114/google-analytics-and-flex-using-externalinterface/#comments</comments>
		<pubDate>Fri, 14 Nov 2008 10:17:09 +0000</pubDate>
		<dc:creator>Daniel Eneström</dc:creator>
				<category><![CDATA[Adobe Flex]]></category>
		<category><![CDATA[Tips & Tricks]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[ExternalInterface]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Google Analytics]]></category>

		<guid isPermaLink="false">http://blog.enestrom.com/?p=64</guid>
		<description><![CDATA[A big issue for people creating flash sites is getting the site to work well with Google Analytics. &#8220;The page doesn&#8217;t refresh. How can I track the clicks?&#8221;
Well, it is actually very easy. If you look at the trace script Google Analytics gives you to add to your HTML code you can find a call [...]]]></description>
			<content:encoded><![CDATA[<p>A big issue for people creating flash sites is getting the site to work well with Google Analytics. &#8220;The page doesn&#8217;t refresh. How can I track the clicks?&#8221;</p>
<p>Well, it is actually very easy. If you look at the trace script Google Analytics gives you to add to your HTML code you can find a call to a method that actually records the event. This method is simple to call using JavaScript.</p>
<p>I have solved it like this in my latest Flex App (which is a public site). NOTE: This is for the new trace code version.</p>
<p><strong>1. Paste the Google Analytics trace code as usual just before the &lt;/BODY&gt; tag.</strong><br />
Check your Google Analytics account for the correct code.</p>
<p><strong>2. See to it that your embedded flash works with ExternalInterface.</strong><br />
This can be a bit tricky, but in my experience the things that do the trick are to change <em>allowScriptAccess</em> to <em>always</em> and inside the Flex App call a custom JavaScript function on <em>creationComplete</em> like so: <em>ExternalInterface.call(&#8217;initFlash&#8217;)</em>. In my html this initFlash function creates a variable reference to the embedded flash. This sort of &#8220;creates the connection&#8221; between them. I&#8217;m not sure why this is so, but for me it works, so I&#8217;m happy with that. If there is a need I would be glad to create a more thorough tutorial on the use of ExternalInterface. Just let me know.</p>
<p><strong>3. Create a custom JavaScript that passes the URL you want to register to the Google Analytics script.</strong><br />
This is not necessary, but I have found it easier to work with, as you don&#8217;t need to edit you call from inside of Flex if something changes in the Google code or such.</p>
<div class="geshi no javascript">
<div class="head">function trackURL(url)</div>
<ol>
<li class="li1">
<div class="de1"><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; pageTracker._trackPageview<span class="br0">&#40;</span>url<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p><strong>4. Call your custom javascript from within Flex.</strong><br />
I created a static class for this. (I love static classes). I named it <em>Analytics.as</em> and placed it in the root source folder in the Flex App. It looks like this. All it does really is call the JavaScript using ExternalInterface, but putting it within a static class lets you call it from anywhere in your application without having to pass on references to this or that object or function.</p>
<div class="geshi no actionscript">
<div class="head">package</div>
<ol>
<li class="li1">
<div class="de1"><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="kw3">public</span> <span class="kw2">class</span> Analytics</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">external</span>.<span class="me1">ExternalInterface</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw3">static</span> <span class="kw2">function</span> track<span class="br0">&#40;</span><span class="kw3">url</span>:<span class="kw3">String</span><span class="br0">&#41;</span> : <span class="kw3">void</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ExternalInterface.<span class="kw3">call</span><span class="br0">&#40;</span><span class="st0">&quot;trackURL&quot;</span>, <span class="kw3">url</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>And anywhere in your app write:</p>
<div class="geshi no actionscript">
<ol>
<li class="li1">
<div class="de1">Analytics.<span class="me1">track</span><span class="br0">&#40;</span><span class="st0">&#39;/path_to_tha_page_you_want_to_track/&#39;</span><span class="br0">&#41;</span>;</div>
</li>
</ol>
</div>
<p>(NOTE: You have to start your path with a slash).</p>
<p><strong>There you go.</strong> It now should track the URL:s you want and give you nice statistics.</p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fblog.enestrom.com%2F20081114%2Fgoogle-analytics-and-flex-using-externalinterface%2F&amp;linkname=Google%20Analytics%20and%20Flex%20using%20ExternalInterface"><img src="http://blog.enestrom.com/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://blog.enestrom.com/20081114/google-analytics-and-flex-using-externalinterface/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
