Question

What is the best way of executing google tracking javascript when an ajax request has successfully completed?

The ajax request:

$('#form').ajaxSubmit({
    url:'process.php', 
    success:function(response) {
        if(response == 'success')
        {
            // trigger analytics code
        }
    }
});

Google Adwords Code:

<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = xxxxxxx;
/* ]]> */
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/"/>
</div>
</noscript>

Would I need to add the analytics code to a separate js file and then use http://api.jquery.com/jQuery.getScript/ ?

Or could I just append <img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/"/> to the page in the success callback?

Answer 1

In the end the following I found just appending the img to be the simplest solution:

$('#form').ajaxSubmit({
    url:'process.php', 
    success:function(response) {
        if(response == 'success')
        {
            // trigger adwords code
            $('#holder').append('<img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/"/>');
        }
    }
});