by
back

asynchronous google adwords conversion tracking

A normal Google AdWords Conversion Tracking javascript would look like.

<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 123456789;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "QWERTZUIOPASDFGHJKL";
/* ]]> */
</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/pagead/conversion/123456789/?label=QWERTZUIOPASDFGHJKL&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

You can embed that script in your html code and everytime it get's executet an conversion is triggered.

The problem is, that the script hast to be in your html code to work properly. If you try to load the trackingcode via a javascript asynchronously you run into some issues.

A remote post to your webserver with the conversion triggering in the success-callback could look like the following code

$.ajax({
    async:      true,
    type:       "POST",
    dataType:   "json",
    url:        ###Your_URL###,
    data:       _data,
    success:    function( json ) {
        // Do some other stuff

        // Track conversion
        var google_conversion_id = 123456789;
        var google_conversion_language = "en";
        var google_conversion_format = "3";
        var google_conversion_color = "ffffff";
        var google_conversion_label = "QWERTZUIOPASDFGHJKL";
        $.getScript( "http://www.googleadservices.com/pagead/conversion.js" );

    }
});

But that doesn't have the same effect as a direct implementation. If you open the console in chrome, you will see the error message

"Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. "

Google Analytics Tracking Error Message

The solution is to temporarily overwrite the document.write function:

$.ajax({
    async:      true,
    type:       "POST",
    dataType:   "json",
    url:        ###Your_URL###,
    data:       _data,
    success:    function( json ) {
        // Do some other stuff

        // Track conversion
        var google_conversion_id = 123456789;
        var google_conversion_language = "en";
        var google_conversion_format = "3";
        var google_conversion_color = "ffffff";
        var google_conversion_label = "QWERTZUIOPASDFGHJKL";

        // save old document.write
        var oldDocumentWrite = document.write 

        // change document.write temporary
        document.write = function(node){
            $("body").append(node)
        }

        // get script
        $.getScript( "http://www.googleadservices.com/pagead/conversion.js", function() {
            // replace the temp document.write with the original version
            setTimeout(function() {
                document.write = oldDocumentWrite
            }, 100)
        });
    }
});

Now the conversion gets properly tracked.



comments powered by Disqus