Google AdWords Conversion Services Issue - Asynchronous Conversion Code

Question

I have never implemented Google Adwords onto a site, so if I am incorrect with the 'lingo', please feel free to correct me.

I am working on a site that has a landing page for one of their Google AdWord campaigns. On this page there is a form, which when processed, takes you to another page to say 'Thank you for your request...'. I have removed this and rewritten it in PHP and Javascript to prevent the page from refreshing or redirecting.

The problem I have is that on the 'thank you' page, the Google code is slightly different and is executed on the loading of the page. My question is, how can I re-execute the conversion code with different variables without re-loading the page? Is there a Google script for this?

Will removing the script tag, and then placing it again re-execute the script?

This is the code I currently have (before the form submission):

<!-- Google Code for Company Remarketing List Remarketing List -->
<script type="text/javascript">
    /* <![CDATA[ */
    var google_conversion_id = 000000;
    var google_conversion_language = "en";
    var google_conversion_format = "3";
    var google_conversion_color = "ffffff";
    var google_conversion_label = "abcdefg";
    var google_conversion_value = 0;
    /* ]]> */
</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/000000/?label=abcdefg&amp;guid=ON&amp;script=0"/>
    </div>
</noscript>

The things that need to be changed after the form submission are:

var google_conversion_id = 111111;
var google_conversion_label = "gfedcba";
"http://www.googleadservices.com/pagead/conversion/gfedcba/?label=111111&guid=ON&script=0

Changing the variables is easy! The hard part is getting the script to re-execute with the new variables.

Any help much appreciated!

UPDATE

The answer posted here probably solves this question, however, I would like to know how I can submit the other variables with the variables that were mentioned in this answer. They are pretty self explanatory but I cannot be sure they are right!

In addition, does anyone know where on Google I can actually see instructions for this?

Answer 1

The reason why you can't just re-execute the script is—as you may have noticed—is that it uses document.write, which should not be called after the document has already loaded.

One possible solution is to just fire off the GIF request yourself, as you mentioned. If you really want to re-execute the script, there's the possibility of redirecting document.write.

Here's the general idea of how this could be done—this fragment would be placed somewhere where you reload new content into your page. It assumes that you use jQuery and have already loaded the new page content into $newContent and have marked all script tags that need to be executed on reload with class="ajax-exec". What it does is to execute inline script directly and use jQuery's $.ajax function with dataType: script. It then waits until all external scripts have executed and appends the redirected output to a hidden div.

This works for us, but comes without warranty (:

// Execute js from the new content (e.g. AdWords conversions tags).
// We redirect document.write to a string buffer as we're already
// done loading the page at this point.
var buf = '';
var writeMethSave = document.write;
$('div#lazyload-buf').remove();
var done = {};

document.write = function (string) {
        buf += string;
};

$newContent.filter('script.ajax-exec').each(function () {
    var url = $(this).attr('src');
    if (url) {
        // External script.
        done[url] = false;
        $.ajax({
            url: url,
            dataType: "script",
            success: function () {
                done[url] = true;
            }
        });
    } else {
        // Inline script.
        $.globalEval($(this).html());
    }
});

function checkForDone () {
    for (var url in done) {
        if (!done[url]) {
            setTimeout(checkForDone, 25);
            return;
        }
    }
    // All done, restore method and write output to div
    document.write = writeMethSave;
    var $container = $(document.createElement("div"));
    $container.attr('id', 'lazyload-buf');
    $container.hide();
    $(document.body).append($container);  
    $container.html(buf);
};

setTimeout(checkForDone, 25);