<?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>Think2Loud &#187; Google Analytics</title> <atom:link href="http://think2loud.com/tag/google-analytics/feed/" rel="self" type="application/rss+xml" /><link>http://think2loud.com</link> <description>Random thoughts from a few geeks</description> <lastBuildDate>Wed, 04 Jan 2012 01:43:02 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.3.1</generator> <xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" /> <item><title>Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.</title><link>http://think2loud.com/105-use-jquery-with-google-analytics-to-track-clicks-on-outgoing-links-from-your-site/</link> <comments>http://think2loud.com/105-use-jquery-with-google-analytics-to-track-clicks-on-outgoing-links-from-your-site/#comments</comments> <pubDate>Wed, 27 Aug 2008 02:32:52 +0000</pubDate> <dc:creator>Josh</dc:creator> <category><![CDATA[JavaScript]]></category> <category><![CDATA[Google Analytics]]></category><guid isPermaLink="false">http://www.think2loud.com/?p=105</guid> <description><![CDATA[<p>So you have a nice site or blog with lots of links to other places. Wouldn't it be nice to use the power built into Google Analytics to track those links, without having to add the necessary JavaScript to every link? Here is a very easy way: Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. <a href="http://think2loud.com/105-use-jquery-with-google-analytics-to-track-clicks-on-outgoing-links-from-your-site/">Read More</a></p><p><a href="http://think2loud.com/105-use-jquery-with-google-analytics-to-track-clicks-on-outgoing-links-from-your-site/">Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.</a></p>]]></description> <content:encoded><![CDATA[<h2>1. Download jQuery and install Goolge Analytics.</h2><p>Go to <a target="_blank" href="http://www.jquery.com" target="_blank">jQuery.com</a> and get the latest version. Then add the script include into the header of your site.</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span> src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;jquery-1.2.6.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div><p>Now go to <a target="_blank" href="http://www.google.com/analytics" target="_blank">Google Analytics</a>. Set up an account and follow the directions to get tracking running. Go ahead, do it now, I&#8217;ll wait. You should now have some script on your site that looks like:</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> gaJsHost <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;https:&quot;</span> <span style="color: #339933;">==</span> document.<span style="color: #660066;">location</span>.<span style="color: #660066;">protocol</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;https://ssl.&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;http://www.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>unescape<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;%3Cscript src='&quot;</span> <span style="color: #339933;">+</span> gaJsHost <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;google-analytics.com/ga.js'
type='text/javascript'%3E%3C/script%3E&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> pageTracker <span style="color: #339933;">=</span> _gat._getTracker<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;YOUR ACCOUNT NUMBER HERE&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> pageTracker._trackPageview<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><h2>2. Add the jQuery to start tracking links.</h2><p>In the head section of your page, you will need to add a few lines of JavaScript. You will need to setup the jQuery .ready function and add the code to that.</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>Next use a jQuery selector to select all a tags on the page with a rel=&#8221;external&#8221;. To do this, pass jQuery the a tag element with the attribute selector option.</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;a[rel*='external']&quot;</span><span style="color: #009900;">&#41;</span></pre></div></div><p>with this we add a click function to our jQuery object.</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;a[rel*='external']&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>With the last part we put in the function call to the Google Analytics code and we pass it the href that our a tag is pointing to.</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">pageTracker._trackPageview<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'/outgoing/'</span><span style="color: #339933;">+</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>This code makes the call to Google Analytics and passes a page path of &#8220;/outgoing/&#8221; and the url of where the click was headed. In your Google Analytics under content, you will see pages that start with &#8220;/outgoing/&#8221;. These are clicks that took people off your site. See below for how it looks in Google Analytics.</p><p><a href="http://zippy.think2loud.com/wp-content/uploads/2008/08/outgoing.png" rel="lightbox[105]"><img class="alignnone size-full wp-image-121" title="outgoing" src="http://zippy.think2loud.com/wp-content/uploads/2008/08/outgoing.png" alt="" width="500" height="204" /></a></p><p><a href="http://think2loud.com/105-use-jquery-with-google-analytics-to-track-clicks-on-outgoing-links-from-your-site/">Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.</a></p>]]></content:encoded> <wfw:commentRss>http://think2loud.com/105-use-jquery-with-google-analytics-to-track-clicks-on-outgoing-links-from-your-site/feed/</wfw:commentRss> <slash:comments>76</slash:comments> </item> </channel> </rss>
<!-- Served from: think2loud.com @ 2012-02-03 22:10:07 by W3 Total Cache -->
