How do I adapt an AdWords tracking pixel to function as intended within an AngularJS application?
The typical tracking code looks like this:
<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've omitted the standard <noscript>
fallback, as it's obviously irrelevant in the context of an AngularJS app.)
The tracking code works by setting a bunch of variables in the global namespace, then fetching an external script, on every page load. In an Angular context, this doesn't work because the HTML source isn't retrieved anew from the server on each page load.
My initial (and possibly non-functional) attempt to adapt this 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 doesn't appear to be working. At least, the marketing consultants are claiming such. I recognize there's a pretty decent chance of PEBKAC here, so my questions:
- Should the above work?
- If not, what would work?
Thanks in advance!
PS: I've inherited this app from another developer, and I'm not (yet) well-versed in the platform. Feel free to point out (in the comments) any grievously bad code/practices above. Thanks!