Asynchronous AdWords Remarketing Tag

The asynchronous version of the AdWords Remarketing Tag is useful for websites where the tag needs to be fired other than during a page load. For example, retail websites that use AJAX to add items to a basket without a page load would fire the asynchronous tag when the products were added or removed.

Placement & Behaviour

The asynchronous AdWords Remarketing Tag is implemented on your site in two steps - the first step loads the conversion_async.js script from the googleadservices.com server. This can be loaded by adding the following snippet inside of the head section of your site:

<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion_async.js" charset="utf-8"></script>
When conversion_async.js has loaded it will add a google_trackConversion function to the window object.

The second step is to configure your site to call the google_trackConversion function at the appropriate time, for example on page load or when a visitor adds an item to their basket. When calling the google_trackConversion function the parameters that were globally-scoped for the standard AdWords Remarketing Tag are now encapsulated within an object passed as an argument; this means that you can avoid potential issues like accidentally overwriting globally-scoped variables if there are multiple standard AdWords Remarketing Tag on a single page.

Firing the asynchronous AdWords Remarketing Tag on page load

The asynchronous AdWords Remarketing Tag can be fired on page load by calling the google_trackConversion function directly within a script tag like this example:

<script type="text/javascript">
/* <![CDATA[ */
window.google_trackConversion({
  google_conversion_id: 123456789, 
  google_custom_params: {
    parameter1: 'abc123', 
    parameter2: 29.99
  },
  google_remarketing_only: true
});
//]]>
</script>

Firing the asynchronous AdWords Remarketing Tag programmatically

The asynchronous AdWords Remarketing Tag can be fired from your existing javascript code whenever is appropriate, for example as part of a XMLHttpRequest or in a fulfilled Promise object related to a visitor adding an item to their basket.

Standard javascript use

This is an example of a simple function call that can be made from any where in your code provided that the conversion_async.js file has already been loaded.

window.google_trackConversion({
  google_conversion_id: 123456789, 
  google_custom_params: {
    parameter1: 'abc123', 
    parameter2: 29.99
  },
  google_remarketing_only: true
});

Use with XMLHttpRequest

This example shows how to fire the tag when adding products to a basket using a simple XMLHttpRequest-based HTTP POST. The tag is fired when the XMLHttpRequest request's readyState is set to 4, i.e. that the request has been completed.

var xmlRequest = new XMLHttpRequest();

xmlRequest.onreadystatechange = function() {
  if (xmlhttp.readyState === 4){
    window.google_trackConversion({
      google_conversion_id: 123456789, 
      google_custom_params: {
        parameter1: 'abc123', 
        parameter2: 29.99
      },
      google_remarketing_only: true
    });
  }
};

xmlRequest.open("post", "addToBasket", true);
xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlRequest.send("product=abc123&price=29.99");

Use with Promises

This example shows how to fire the tag when a Promise is fulfilled. The particulars of the Promise's logic is hidden here for clarity.

var addToBasket = new Promise(function(resolve, reject) {
  // implementation of add to basket promise logic excluded for clarity
});

addToBasket.then(function(result){				
  window.google_trackConversion({
    google_conversion_id: 123456789, 
    google_custom_params: {
      parameter1: 'abc123', 
      parameter2: 29.99
    },
    google_remarketing_only: true
  });
}, function(error) {
	// error handling excluded for clarity
});