javascript google-ads-api conversion-tracking

Tracking multiple different URL clicks as conversions in Google Adwords

The goal is to track multiple different URL clicks as conversions in Google Adwords.

If I install only one link click tracking script everything works perfect. If I install 2 or more only 1 will work at a time and the others fail.

Inside of the head section I am using this code:

    <script type="text/javascript"> 
    function trackConv(google_conversion_id, google_conversion_label) {
        var image = new Image(1, 1); 
        image.src = "//www.googleadservices.com/pagead/conversion/" +     google_conversion_id + "/?label=" + google_conversion_label;  
    }
 </script>

Just after the beginning body tag I am using this code to track clicks on the Facebook URL:

    <!-- Google Code for Facebook Click Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
  /* <![CDATA[ */
  goog_snippet_vars = function() {
    var w = window;
    w.google_conversion_id = 945293991;
    w.google_conversion_label = "GGLkCKb7uWEQp5XgwgM";
    w.google_conversion_value = 2.00;
    w.google_conversion_currency = "USD";
    w.google_remarketing_only = false;
  }
  // DO NOT CHANGE THE CODE BELOW.
  goog_report_conversion = function(url) {
    goog_snippet_vars();
    window.google_conversion_format = "3";
    var opt = new Object();
    opt.onload_callback = function() {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  }
  var conv_handler = window['google_trackConversion'];
  if (typeof(conv_handler) == 'function') {
    conv_handler(opt);
  }
}
/* ]]> */
</script>

    <script type="text/javascript"
  src="//www.googleadservices.com/pagead/conversion_async.js">
</script>

If I stop here it works fine. If I go and add another block like below to track Twitter then it breaks:

    <!-- Google Code for Twitter Click Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
  /* <![CDATA[ */
  goog_snippet_vars = function() {
    var w = window;
    w.google_conversion_id = 945293991;
    w.google_conversion_label = "6NygCKTOv2QQp5XgwgM";
    w.google_remarketing_only = false;
  }
  // DO NOT CHANGE THE CODE BELOW.
  goog_report_conversion = function(url) {
    goog_snippet_vars();
    window.google_conversion_format = "3";
    var opt = new Object();
    opt.onload_callback = function() {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  }
  var conv_handler = window['google_trackConversion'];
  if (typeof(conv_handler) == 'function') {
    conv_handler(opt);
  }
}
/* ]]> */
</script>

<script type="text/javascript"
  src="//www.googleadservices.com/pagead/conversion_async.js">
</script>

Where the actual URL link occurs inside the body I am using code like this:

<a onclick="trackConv(945293991, 'GGLkCKb7uWEQp5XgwgM');" href="https://www.facebook.com/the-foo-bar-fb-page-url" target="_blank" rel="attachment wp-att-864">AN ICON HERE</a>

<a onclick="trackConv(945293991, '6NygCKTOv2QQp5XgwgM');" href="https://twitter.com/the-foo-bar-tw-page-url" target="_blank" rel="attachment wp-att-862">AN ICON HERE</a>

What I tried to do to fix it:

I tried only using the code shown below one time - before all of the Google Adwords code and again after all of it and regardless of how many times I use the script or where I place it if I try to have more than one tag instance it breaks:

    <script type="text/javascript"
  src="//www.googleadservices.com/pagead/conversion_async.js">
</script>

Solution

Tracking outbound clicks as goals in Google Analytics can be achieved a few different ways.

AutoTrack.js - This new feature is the simplest way.
Google Tag Manager Events
Manually tagging links with on_click

The 3rd option requires you to insert a single script in the page header, but outside the standard Google analytics script.

    <script>
/**
* Function that tracks a click on an outbound link in Analytics
* This function takes a valid URL string as an argument, and uses that URL string
* as the event label. Setting the transport method to 'beacon' lets the hit be sent
* using 'navigator.sendBeacon' in browser that support it.
*/
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){document.location = url;}
   });
}
</script>

Once you have that script installed then you can manually tag each link you want to track as such:

<a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return false;">Check out example.com</a>