adding outbound tracking to analytics

Author: jmstriegel

offline.html

@@ -126,31 +126,31 @@ <h2>Starting From Scratch?</h2>
             <h3>Raspberry Pi Model B</h3>
             <div class="cost">$35</div>
             <div class="availability">
-                <a class="store" target="_blank" href="https://www.google.com/search?q=raspberry+pi+model+b">Get One</a>
+                <a class="store trackout" target="_blank" href="https://www.google.com/search?q=raspberry+pi+model+b">Get One</a>
             </div>
         </div>
         <div class="product right">
             <img src="assets/images/5v_adapter.png" />
             <h3>5V 1A Power Supply</h3>
             <div class="cost">$6</div>
             <div class="availability">
-                <a class="store" target="_blank" href="https://www.google.com/search?q=5V+1A+micro+usb+power+supply+raspberry+pi">Get One</a>
+                <a class="store trackout" target="_blank" href="https://www.google.com/search?q=5V+1A+micro+usb+power+supply+raspberry+pi">Get One</a>
             </div>
         </div>
         <div class="product">
             <img src="assets/images/sd_card.png" />
             <h3>4GB (or larger) SD Card</h3>
             <div class="cost">$8</div>
             <div class="availability">
-                <a class="store" target="_blank" href="https://www.google.com/search?q=4+GB+class+10+sd+card">Get One</a>
+                <a class="store trackout" target="_blank" href="https://www.google.com/search?q=4+GB+class+10+sd+card">Get One</a>
             </div>
         </div>
         <div class="product right">
             <img src="assets/images/wifi_card.png" />
             <h3>Miniature WiFi (802.11b/g/n) Module for Pi</h3>
             <div class="cost">$12 (optional)</div>
             <div class="availability">
-                <a class="store" target="_blank" href="https://www.google.com/search?q=miniature+usb+802.11+adapter+raspberry+pi">Get One</a> 
+                <a class="store trackout" target="_blank" href="https://www.google.com/search?q=miniature+usb+802.11+adapter+raspberry+pi">Get One</a> 
             </div>
         </div>
     </div>
@@ -160,23 +160,23 @@ <h2>Download the Coder Raspberry Pi Image.</h2>
         <p>Once you've done your shopping, you'll need to download the Coder SD card image, and transfer it to your SD card. This is a big download, so it may take a few minutes.</p>
         <a class="download button trackdl" data-version="0.4" target="_blank" href="http://storage.googleapis.com/coder-images/coder_v0.4.zip">Download Coder</a>
         <p class="download-details">Coder v0.4 | 1.04GB Download</p>
-        <p class="last">An install program for Mac OS X is included, which will help you transfer the disk image to your SD Card. If you are using a PC, check out the instructions on the <a href="http://elinux.org/RPi_Easy_SD_Card_Setup#Using_Windows_7_or_Windows_XP">Raspberry Pi Wiki</a>. There are several utilities that will allow you to install the image.</p>
+        <p class="last">An install program for Mac OS X is included, which will help you transfer the disk image to your SD Card. If you are using a PC, check out the instructions on the <a class="trackout" href="http://elinux.org/RPi_Easy_SD_Card_Setup#Using_Windows_7_or_Windows_XP">Raspberry Pi Wiki</a>. There are several utilities that will allow you to install the image.</p>
     </div>
     <div class="section">
         <h2>Get the Code.</h2>
         <p>Coder is open source, so everyone can help make it better. Fix bugs, build new features, and help make Coder the simplest way for new coders to learn how to create things for the web.</p>
-        <a class="button" target="_blank" href="http://github.com/googlecreativelab/coder/">Coder on Github</a>
+        <a class="button trackout" target="_blank" href="http://github.com/googlecreativelab/coder/">Coder on Github</a>
     </div>
     <div class="section">
         <a name="windows" class="anchor"></a>
         <h2>Windows-specific Instructions</h2>
         <div class="faq">
             <h3>Making a Coder SD Card on a PC.</h3>
-            <p>Windows users can format their SD Card using the SD Card Association's <a href="https://www.sdcard.org/downloads/formatter_4/" target="_blank">formatting tool</a>.</p>
+            <p>Windows users can format their SD Card using the SD Card Association's <a class="trackout" href="https://www.sdcard.org/downloads/formatter_4/" target="_blank">formatting tool</a>.</p>
         </div>
         <div class="faq">
             <h3>Connecting to coder.local.</h3>
-            <p>To connect to Coder using a Windows PC, you'll first need to install Apple's <a href="http://support.apple.com/kb/DL999" target="_blank">Bonjour Print Services for Windows</a>. Once this piece of software is installed, you'll be able to visit http://coder.local in Chrome or IE.</p>
+            <p>To connect to Coder using a Windows PC, you'll first need to install Apple's <a class="trackout" href="http://support.apple.com/kb/DL999" target="_blank">Bonjour Print Services for Windows</a>. Once this piece of software is installed, you'll be able to visit http://coder.local in Chrome or IE.</p>
         </div>
     </div>
     <div class="section">
@@ -196,7 +196,7 @@ <h3>How much does it cost and what do I need to get started?</h3>
         </div>
         <div class="faq rollup">
             <h3>I’ve never coded before. How do I get started?</h3>
-            <p>There are a ton of resources for learning HTML, CSS and Javascript&mdash;<a href="http://www.codecademy.com/">Codecademy</a> and <a href="https://www.khanacademy.org/cs/tutorials/programming-basics">Khan Academy</a>, to name two&mdash;and you can use Coder to accompany this instruction as you experiment with making your own programs. When you're ready to get started, read through the included Hello Coder application to aquaint yourself with how a Coder program works.</p>
+            <p>There are a ton of resources for learning HTML, CSS and Javascript&mdash;<a class="trackout" href="http://www.codecademy.com/">Codecademy</a> and <a class="trackout" href="https://www.khanacademy.org/cs/tutorials/programming-basics">Khan Academy</a>, to name two&mdash;and you can use Coder to accompany this instruction as you experiment with making your own programs. When you're ready to get started, read through the included Hello Coder application to aquaint yourself with how a Coder program works.</p>
         </div>
         <div class="faq rollup">
             <h3>Can I share my Coder projects with other people?</h3>
@@ -241,12 +241,12 @@ <h2>Contributing</h2>
         <div class="faq">
             <h3>Make Coder better</h3>
             <p>Help fix bugs, respond to feature requests, and make Coder the most accessible way for new coders to learn to make things for the web. Coder is open source and hosted on Github. </p>
-            <a href="http://github.com/googlecreativelab/coder/" target="_blank" class="button">Coder on Github</a>
+            <a href="http://github.com/googlecreativelab/coder/" target="_blank" class="button trackout">Coder on Github</a>
         </div>
         <div class="faq">
             <h3>Make and share Coder stuff</h3>
             <p>Use the #Coder hashtag on Google+ and show people how to make cool things. How-tos, demos and samples are a great way to teach and learn.</p>
-            <a href="https://plus.google.com/s/%23coder" target="_blank" class="button">#Coder on G+</a>
+            <a href="https://plus.google.com/s/%23coder" target="_blank" class="button trackout">#Coder on G+</a>
         </div>
         <div class="faq">
             <h3>Teach with Coder</h3>
@@ -256,7 +256,7 @@ <h3>Teach with Coder</h3>
     <div class="footer">
         <div class="madewith bottom"></div>
         <div class="links">
-            <a href="http://www.google.com/intl/en/policies/">Privacy and Terms</a>
+            <a href="http://www.google.com/intl/en/policies/" class="trackout">Privacy and Terms</a>
             <div class="plusholder">
                 <div class="g-plusone"></div>
             </div>
@@ -283,6 +283,10 @@ <h3>Teach with Coder</h3>
       var version = $(this).attr('data-version');      
       ga('send', 'event', 'download', 'click', version ); 
     });
+    $('a.trackout').click(function() {
+      var destination = $(this).attr('href');      
+      ga('send', 'event', 'outbound', 'click', destination ); 
+    });
   });
 </script>
 </body>