Trigger AdWords conversion on javascript event

When creating ChoiceVoice we wanted to greatly simplify the standard order process. Wojtek decided to fit it all on single page powered by Ajax. This worked out great, but at the end of the implementation we faced a minor problem. Google’s Adwords don’t support programmatic conversion tracking. With the snippet provided by google the user triggers conversion by navigating to a site – like a “Thank you for your order” page. This of course couldn’t work for us, because our clients are taken to paypal immediately after filling out the form.

The snippet that google provides is really simple. Most of it is javascript itself, so why not execute it from our own code? Let’s take a look:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1234567890;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "ABCDEFGHIJKlmnop-qr";
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/1234567890/?label=ABCDEFGHIJKlmnop-qr&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

One way of triggering the conversion would be to insert the image from the <noscript> tag. This would work, but I assume that this fallback method is somehow inferior to the functionality offered by the included conversion.js script (I’ve noticed that it is requesting some additional resources).

The other method would be to add something like this to your javascript files:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var google_conversion_id = 1234567890;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "";
var google_conversion_value = 0;

var conversionLabels = {
  'voice-order': "ABCDEFGHIJKlmnop-12",
  'copy-order': "ABCDEFGHIJKlmnop-23"
};


function trackConversion(label) {
  google_conversion_label = conversionLabels[label];
  $.getScript('https://www.googleadservices.com/pagead/conversion.js');
};

/* then somewhere in your ui code: */
trackConversion('voice-order');

This code assumes that you’re using jquery or something that provides the $.getScript() function. And also… it does not work. If you use this code to execute the conversion on user interaction, your page will end up blank. The user will be left with a white screen. Obviously not what we want him to see after placing an order with us.

After some digging around I found out that the problem was google’s conversion.js calling document.write(). This function usually appends text to the document’s body, but there’s a catch. If the document is fully loaded it won’t append, but instead it will start a new document replacing the one currently displayed. There’s a reason for that – you probably don’t want to append anything after the </html> tag.

But google’s conversion.js assumes that it is included inside the document’s body and while the document is still being loaded. A solution is to overwrite the default document.write() method. A fairly simple task and as it turns out also quite safe.

In the end our trackConversion() function should look like this:

1
2
3
4
5
6
7
8
function trackConversion(label) {
  google_conversion_label = conversionLabels[label];

  document.write = function(text) {
    $('#content').append(text);
  };
  $.getScript('https://www.googleadservices.com/pagead/conversion.js');
};

The code allows you to have different conversions and select which one you want to trigger. With little effort you can add a second argument to trackConversion that will assign conversion value.

  • Alex Kahn says:
    Thanks for this. Very tricky bug to figure out. It's anonying that conversion.js is so crappy.
  • Karen ho says:
    agreed. the conversion.js is crappy.

    The case I have is that after I moved the conversion firing code to be placed within the window.onload event, it didn't give me blank page on IE8, IE9, FF4, Chrome etc. It will give me blank page in FF3 only.

    After I read thru the conversion.js, I found that it's the document.write() problem.
  • Matthew Wills says:
    Thanks for this info - I wish I'd found it 4 hours ago. :)
  • James Wagoner says:
    Is there a way to test that the script is working other than waiting a day and checking your adwords account?
  • Openid icon Adam Wróbel says:
    Sorry James, I'm not aware of any.
  • bradhandy says:
    @James, In firefox I used firebug to verify the conversion.js script was inserting the iframe tag where I expected it.

    @Adam, This article helped me out a lot. Thanks for this.
  • lafondadebaco says:
    Excellent trick! Thanks a lot!

    For some reason the conversion.js is being loaded infinite times, after the conversion is being fired.

    Any suggestions?
  • Paulo says:
    Thanks! I did spend some time looking at conversion.js minimized code and figured the problem was with document.write.

    But I was still far from getting to a working workaround.
  • James Beattie says:
    Many thanks. There were many suggested solutions around, but this is the only one that actually worked. I just wonder if it could be slightly improved by unhooking document.write from jquery again once the conversion is logged.
  • Joel Taylor says:
    Thank you!!! Have been hitting my head on this for a number of days.
  • mikosh says:
    Thank you!! you made my day! this is the only one that actually worked
  • Sebastian Baldovino says:
    Is this really working?. Isn't the getScript URL violating the cross domain policy?
  • Brett says:
    Hooray for StackOverflow and a link to this. Thanks for figuring this out and posting it for the rest of us :)
  • Sabrina says:
    Thanks for posting this!!! Saved me.
  • dcolumbus says:
    "With little effort you can add a second argument to trackConversion that will assign conversion value."

    Can you provide this example?
  • Sander says:
    It seems like the adwords conversion tracking code changed. I tried to create new code for JS tracking also:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    
      goog_snippet_vars = function() {
        var w = window;
        w.google_conversion_id = 1234567890;
        w.google_conversion_label = "";
        w.google_conversion_value = 0;
      }
    
      conversionLabels = {
        'voice-order': "ABCDEFGHIJKlmnop-12",
        'copy-order': "ABCDEFGHIJKlmnop-23"
      };
    
      goog_report_conversion = function(url) {
        goog_snippet_vars();
        window.google_conversion_format = "3";
        window.google_is_call = true;
        var opt = new Object();
        opt.onload_callback = function() {
          if (typeof(url) != 'undefined') {
            window.location = url;
          }
        };
      };
    
      trackConversion = function (label) {
        window.google_conversion_label = conversionLabels[label];
      
        document.write = function(text) {
          $('body').append(text);
        };
        
        $.getScript('https://www.googleadservices.com/pagead/conversion.js', function () {
          var conv_handler = window['google_trackConversion'];
          if (typeof(conv_handler) == 'function') {
            conv_handler(opt);
          }
        });
      };
    
    
  • Sander says:
    Hmm it seems I had a setting all wrong. Perhaps delete my previous comment :)
  • Hammy says:
    Thanks for this, was pulling my hair out on a way to get this to work after page load... Nice work!
  • Yyega says:
    <a href=http://www.sleepsf.com/wp-content/js/#wy7>best site</a> can you order tramadol online - tramadol hcl an 627
  • vInVw says:
    <a href=http://www.marvin3m.com/ecg/tramadolonline/#ffv>next page</a> tramadol hcl xr - tramadol for dogs maximum dosage
  • fVvnFd says:
    <a href=http://www.saveapetli.net/lib/#wfs>xanax</a> xanax street price 1 mg - different types xanax pills
  • PoVCh says:
    <a href=http://www.marvin3m.com/ecg/tramadolonline/#v4cqg>Resources</a> tramadol online usa - tramadol 150mg

Post a comment

Name or OpenID (required)


(lesstile enabled - surround code blocks with ---)