How to track a Google Adwords conversion onclick?

JavascriptOnclickTrackingGoogle Ads-Api

Javascript Problem Overview


Google Adwords offers no code to add to your page to count a conversion if somebody clicks on a link. But as it's Javascript, I am sure there is a way to do this.

Here's the code (unaltered) Google gives you to include in the page, that should count as a conversion (most of the time a thank you page):

<!-- Google Code for Klick Conversion Page -->
<script type="text/javascript">
<!--
var google_conversion_id = 1062751462;
var google_conversion_language = "de";
var google_conversion_format = "1";
var google_conversion_color = "ffffff";
var google_conversion_label = "dKXuCODvugEQ5pnh-gM";
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/1062751462/?label=dKXuCODvugEQ5pnh-gM&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

With other conversion tracking scripts some function has to be executed to count the conversion. Here, just adding the JS-File to your page can be enough to trigger the conversion-tracking, as conversion.js calls a function on load (download it and look at it after running it through a code beatuifier, it's really quite nice work!).

Any idea how to tackle this?

Javascript Solutions


Solution 1 - Javascript

Don't know if you've already found it... I mention it anyway for future surfers...

I was looking for the same, and found this piece of 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=0";  
    }
 </script>

Then for links which you want to track just do this :

<a onclick="trackConv(1234567890, 'LQV8CNq6RxCKlPbvAw');" href="http://www.example.com">Link</a> 

Solution 2 - Javascript

It appears that Google now offers an onclick option that you can copy and paste from the Conversions page in AdWords. From the AdWords Conversions page:

> Add the tag to a button on your website, such as a "Buy now" button.

Here's a snippet from the page of documentation entitled Track clicks on your website as conversions. Replace XXXXX with conversion ID and label:

<!-- Google Code for 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 = XXXXXXX;
    w.google_conversion_label = "XXXXXXX";
    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>

And somewhere else in your code

button.addEventListener('click', function() {
  console.log('Button clicked!');
  goog_report_conversion();
});

Solution 3 - Javascript

Google Conversion Tracking concept using Ajax on a submit button :

 $.ajax({
        type: "POST",
        url: "enquiry-submit.php",
        data: data,
        success: function (result) {
          $("#msg").fadeIn(400).html(result);
          
          /* Conversion Tracking Start */
          var google_conversion_id = YOUR_CONVERSION_ID_HERE;
          var google_conversion_language = "en";
          var google_conversion_format = "3";
          var google_conversion_color = "ffffff";
          var google_conversion_label = "YOUR_CONVERSION_LABEL_HERE";
          var google_remarketing_only = false;
          
          $.getScript('//www.googleadservices.com/pagead/conversion.js');
          
          var image = new Image(1, 1); 
          image.src = "//www.googleadservices.com/pagead/conversion/YOUR_CONVERSION_ID_HERE/?label=YOUR_CONVERSION_LABEL_HERE&guid=ON&script=0";  
          /* Conversion Tracking End */
        }
      });

It is 100% working on my Google Ads Campaign.

Note: You must Test this by clicking on your ad. The effect of conversion will be visible after 12 minute on your AdWords Console

Solution 4 - Javascript

I've a similar problem.

The Problem: My client have a contact page that have a form. After the user fill all the form fields, there is a validation(to check if the user filled correctly all the fields). After the validation, the user is redirected to the webmail server page. There isn't an "Success" or "Thank You" page. So i needed to put the Adwords tag, after the form validation.

The Solution:

The validation was done this way:

var missinginfo = "";
var f = document.forms["CONTACT"];
if (f.name.value == ""){
missinginfo += "\n     -  name";}
.
.
.
if (missinginfo != "") 
{
missinginfo ="_____________________________\n" +
"Empty Field" + "incorrectly filled" +
missinginfo + "\n_____________________________"
alert(missinginfo);
return false;
}
//End of Validation

So i added this snippet code:

else if(missinginfo == ""){   //Check if the form was filled correctly
adw_conv();  //Function Name
return false;
}
function adw_conv(){
var img = new Image()  //Creates an image using JS to make the request
img.src = "http://www.googleadservices.com/pagead/conversion/123456789/?label=-8bcaCNHv6AIQl_v8_QM&amp;guid=ON&amp;script=0"; 
img.onload = function(){	
var form = document.getElementsByName('CONTACT')[0];
form.submit();
}}

This way, after the form validation and before the website redirect the user to the webmail page, is triggered the Adwords Conversion!

Solution 5 - Javascript

Add the code below to the section of the page you want to track conversions on.

<script>
function adwTrack() {
   var img = new Image(1,1);
   img.src =     "https://www.googleadservices.com/pagead/conversion/XXXXXXXXXX/?value=1.00&amp;currency_code=EUR&amp;label=XXXXXXXXXX&amp;guid=ON&amp;script=0";

}

Just replace the XXX… with your actual conversion id and label.

Then call the adwTrack() function we created above in your link’s onclick event:

<a href="#" onclick="adwTrack();">Track This</a>

You can also do this using GTM: https://www.redflymarketing.com/blog/track-conversions-without-a-thank-you-page/

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjanpioView Question on Stackoverflow
Solution 1 - JavascriptEliView Answer on Stackoverflow
Solution 2 - JavascriptJonathan GuerreraView Answer on Stackoverflow
Solution 3 - JavascriptIrshad KhanView Answer on Stackoverflow
Solution 4 - JavascriptBruno BrandãoView Answer on Stackoverflow
Solution 5 - JavascriptDave DavisView Answer on Stackoverflow