How to set up Google AdWords tracking pixel for use in AngularJS app?

Question

How do I set up an AdWords tracking pixel to work in AngularJS?

A typical tracking code is as follows:

<script type="text/javascript"> /* <![CDATA[ */ var google_conversion_id = 123456789; var google_conversion_language = "en"; var google_conversion_format = "2"; var google_conversion_color = "ffffff"; var google_conversion_label = "AAAAAAAAAAAAAAAAAAA"; var google_conversion_value = 0; /* ]]> */ </script> <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"> </script> 

(I omitted the standard <noscript> reserve, as it is clearly not relevant to the AngularJS application context.)

Tracking code works by setting up a bunch of variables in the global namespace and then fetching an external script for each page load. In the context of Angular, this does not work because the HTML source is not retrieved from the server each time the page loads.

My initial (and possibly non-functional) attempt to adapt it to Angular looks like this (in Coffeescript):

 SpiffyApp.run ($rootScope, $location, $window, session, flash) -> # Other initialization stuff $rootScope.$on '$routeChangeSuccess', (event, data) -> # Other route-change callback stuff $window.google_conversion_id = 123456789 $window.google_conversion_language = "en" $window.google_conversion_format = "2" $window.google_conversion_color = "ffffff" $window.google_conversion_label = "AAAAAAAAAAAAAAAAAAA" $window.google_conversion_value = 0 jQuery.ajax type: "GET", url: "//www.googleadservices.com/pagead/conversion.js", dataType: "script", cache: true 

This does not work. At the very least, marketing consultants claim such. I admit there is a pretty decent PEBKAC chance here, so my questions are:

• Should the above work?
• If not, what will work?

Thanks in advance!

PS: I inherited this application from another developer, and I am not very well versed in the platform. Feel free to mention (in the comments) any terribly bad code / methods above. Thanks!

Answer 1

I'm not an expert on AngularJS, but it may be something that can be solved using the asynchronous version of the AdWords tracking pixel, since conversions for this can simply be called with a standard javascript function call and not rely on page loading.

You can enable the asynchronous version of the AdWords tracking pixel (make sure you are using the https version):

 <script type="text/javascript" src="https://www.googleadservices.com/pagead/conversion_async.js" charset="utf-8"> 

Then, as soon as you do this, you will add the function "google_trackConversion" added to the window, which you can simply call when you need it, for example.

 window.google_trackConversion({ google_conversion_id: 123456789, google_conversion_label: 'AAAAAAAAAAAAAAAAAAA', google_conversion_language: "en", google_conversion_format: "2", google_conversion_color: "ffffff", google_conversion_value: 0 }); 

NTN