Question

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.

My Ajax request:

function get_overlay_content(path)
{
    $.get(path, function(data) { 
        $("#overlay_content").html(data).fadeIn(500); 
        $(function()
     {
        // do something 
     });
    });
}

The response in Firebug:

<div id="imprint" class="overlay_box">
    <script type="text/javascript">

      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);
      })();

    </script>
    <div id="overlay_close" onclick="close_overlay();"><img src="/2012/images/overlay_close.png" id=""></div>
# ETC

The HTML after update:

<div id="overlay_content">

<div id="imprint" class="overlay_box">

    <div id="overlay_close" onclick="close_overlay();"><img src="/2012/images/overlay_close.png" id=""></div>
    <div class="overlay_heading"><img src="/2012/images/heading_download.png" height="65"></div>

# etc.

My guess is that it has something to do with encoding. What do you think?

Thanks!
Olaf

---

SOLVED:

Thanks to Uzi, the solution was quite simple, following the Google guide Asynchronous Tracking Usage Guide

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:

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)

$.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
});

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)

<script type="text/javascript">

        $(document).ready(function() {

            $(".pdf_link").click(function(){
                _gaq.push(['_setAccount', 'UA-XXX-1']);
                _gaq.push(['_trackPageview', '/pdf/' + $(this).attr("id")]);
            });
        });
</script>

Answer 1

If I understand correctly, you are fetching HTML code using AJAX.
That block of code contains a script tag, and you expect the script to run one the request is complete.
Unfortunately it doesn’t work this way, since as far as the DOM concerned, this is just an element.

I’m not sure why you need an AJAX code for google analytics to run, but in case it contains dynamic data, just make the AJAX call return the parameter you need and have a function running this code locally.