Tracking AdWords Conversions within JavaScript

Today I want to talk about grabbing AdWords conversions from things like AJAX requests, JavaScript callbacks, and any other way from inside your website that doesn’t include putting it on a “thank you” page.

When you set up AdWords conversion tracking you will be told to set up something like this on your website;

<!-- Google Code for Registration Conversion Page -->
<script type="text/javascript">
	/* <![CDATA[ */
	var google_conversion_id = xxx;
	var google_conversion_language = "en";
	var google_conversion_format = "3";
	var google_conversion_color = "ffffff";
	var google_conversion_label = "xxx";
	var google_remarketing_only = false;
	/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
	<div style="display:inline;">
		<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/xxx/?label=xxx&amp;guid=ON&amp;script=0"/>
	</div>
</noscript>

This is designed to go on the page that lets the user, and you, know that a particular thing has happened – this could be signing up to an email list, buying something, registering on your website, you get the idea.

It has been designed to be used as is, on a page that will only been seen by someone who has completed the action.

Not all websites work like that. Lots of websites keep people on the same page as they perform actions and this means people will hit your page who haven’t necessarily performed an action that you want to track with AdWords.

Enter async AdWords

What Google AdWords doesn’t tell you when it offers up the above code is that if you require this to fire based on a callback of some sort it isn’t just a case of shoe-horning that code into your callback, you need to use an entirely different set of code.

Here is the code you actually need.

  <script src='https://www.googleadservices.com/pagead/conversion_async.js'></script>

This can go anywhere on the page that will be running the JavaScript being used. The main difference here is instead of loading conversion.js we are loading conversion_async.js.

   window.google_trackConversion({
    google_conversion_id: xxx,
    google_conversion_language: "en",
    google_conversion_format: "3",
    google_conversion_color: "ffffff",
    google_conversion_label: "xxx",
    google_remarketing_only: false
  });

You should add this code into the callback or wherever you need to trigger the conversion. It has all the same parameters you had to set before but now they are being included as one thing being added into google_trackConversion.

You will note I haven’t added the non-JS code that AdWords supply you, like the noscript tracking image. Since we are calling everything else from within JavaScript there is no point in providing a fallback.

If you need it to work without JavaScript then you would use the more traditional “thank you” page approach in combination with the Async one.