title: How to track AJAX GET requests & PDF downloads with Google Analytics?
body: <p>I'm retrieving content via a jQuery get Ajax call and add it to an element afterwards. The HTML code is added without any problem, just the JS code gets lost. What am I doing wrong? When I look at the response in Firebug it is still there, it's just not added to the HTML element.</p>
  
  <p><strong>My Ajax request:</strong></p>
  
  <pre><code>function get_overlay_content(path)
  {
      $.get(path, function(data) { 
          $("#overlay_content").html(data).fadeIn(500); 
          $(function()
       {
          // do something 
       });
      });
  }
  </code></pre>
  
  <p><strong>The response in Firebug:</strong></p>
  
  <pre><code>&lt;div id="imprint" class="overlay_box"&gt;
      &lt;script type="text/javascript"&gt;
  
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-XXX-1']);
        _gaq.push(['_trackPageview']);
  
        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
  
      &lt;/script&gt;
      &lt;div id="overlay_close" onclick="close_overlay();"&gt;&lt;img src="/2012/images/overlay_close.png" id=""&gt;&lt;/div&gt;
  # ETC
  </code></pre>
  
  <p><strong>The HTML after update:</strong></p>
  
  <pre><code>&lt;div id="overlay_content"&gt;
  
  &lt;div id="imprint" class="overlay_box"&gt;
  
      &lt;div id="overlay_close" onclick="close_overlay();"&gt;&lt;img src="/2012/images/overlay_close.png" id=""&gt;&lt;/div&gt;
      &lt;div class="overlay_heading"&gt;&lt;img src="/2012/images/heading_download.png" height="65"&gt;&lt;/div&gt;
  
  # etc.
  </code></pre>
  
  <p>My guess is that it has something to do with encoding. What do you think?</p>
  
  <p>Thanks!
  Olaf</p>
  
  <hr>
  
  <h2><strong>SOLVED:</strong></h2>
  
  <p>Thanks to Uzi, the solution was quite simple, following the Google guide <a href="http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html" rel="nofollow">Asynchronous Tracking Usage Guide</a></p>
  
  <p>But for everyone to understand: If you have one main file (index.html) from where you retrieve partials (lets call it /partials/_download_pdfs.html) via an AJAX GET request (e.g. jQuery.get()) all you have to do to track every AJAX request with Google Analytics is the following:</p>
  
  <p>Add the tracking code for Analytics ABOVE the rest of your Javascript
  and your AJAX GET request, put the following code in a callback function (if you don't put it in a callback it might slow down your actual request)</p>
  
  <pre><code>$.get(path_to_track, function(data) { 
    // Fade in effect:
    $("#container").html(data).fadeIn(500);
  
    // this part is interesting:
    _gaq.push(['_setAccount', 'UA-XXX-1']);
    _gaq.push(['_trackPageview', path_to_track]);
  
    // Do other stuff in the callback
  });
  </code></pre>
  
  <p>That's it. If you want to track PDF downloads on a page you retrieved with an AJAX GET request with jQuery (as I did), just add the following code to the partial (eg /partials/_download_pdfs.html)</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
          $(document).ready(function() {
  
              $(".pdf_link").click(function(){
                  _gaq.push(['_setAccount', 'UA-XXX-1']);
                  _gaq.push(['_trackPageview', '/pdf/' + $(this).attr("id")]);
              });
          });
  &lt;/script&gt;
  </code></pre>