Tracking Google AdWords Conversion on a Form with an External Target

Question

How can I have this tracking code run when a user signs up for a newsletter?

<script type="text/javascript">
    var google_conversion_id = xxxxxx;
    var google_conversion_language = "en";
    var google_conversion_format = "3";
    var google_conversion_color = "ffffff";
    var google_conversion_label = "xxxxxx";
    var google_conversion_value = Newsletter Signup;
</script>

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

The newsletter signup occurs through this form, which targets an external link. This is the form source:

<form action="http://restaurant.us1.list-manage1.com/subscribe/post?u=xxx;id=xxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
    <input type="email" value="" name="EMAIL" id="mce-EMAIL">
    <input id="addnwl" class="iblock smallbutton LR mt15 p3 pl10 pr10 nohover" type="submit" value="Aboneaza-te" name="subscribe" id="mc-embedded-subscribe">
</form>

Is this possible?

Answer 1

Since your form goes to an external site (where you probably cannot place tracking code), you'll either want to register the conversion before they leave the site, or after they come back from the 3rd party site (if they are sure to do so - this is not always the case).

To register the conversion before the visitor leaves your site, construct an image that matches the img tag in the noscript section of the AdWords conversion code. You can do this with javascript by creating an image with the right source, and setting a delay before going to the external page (replace CONVERSIONID and CONVERSIONLABEL with real values):

<script>
 function trackAdWordsConversion(formID) { 
   try { 
     var adwordsPixel = new Image;
     var pixelSrc = "http://www.googleadservices.com/pagead/conversion/CONVERSIONID/?value=0&amp;label=CONVERSIONLABEL&amp;guid=ON&amp;script=0";
     adwordsPixel.src = pixelSrc;
    } catch(err){}

   var form = document.getElementById(formID);
   setTimeout(function() {
     form.submit();
   }, 100);
 }
</script>

Just setting the src attribute is enough to send the request to Google's servers, which is what you need to happen. You can get rid of the setTimeout, I think, since your form targets a new tab. Now that we have this function, use it as the onclick attribute for your form's submit button. I changed the type to "button" rather than "submit" to eliminate redundancy.

<form action="http://restaurant.us1.list-manage1.com/subscribe/post?u=xxx;id=xxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
  <input type="email" value="" name="EMAIL" id="mce-EMAIL">
  <input id="addnwl" class="iblock smallbutton LR mt15 p3 pl10 pr10 nohover" type="button" value="Aboneaza-te" name="subscribe" id="mc-embedded-subscribe" onclick="trackAdWordsConversion('mc-embedded-subscribe-form');">
</form>