How do I adapt a Google AdWords tracking pixel for use in an AngularJS app?

问题

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!

回答1:

I am not an expert on AngularJS, but this might be something that can be resolved by using the asynchronous version of the AdWords tracking pixel as the conversions for that can just be called with a standard javascript function call and does not rely on the page load.

You can include the asynchronous version of the AdWords tracking pixel like this (make sure you use the https version):

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

Then once you have done that, you'll get a "google_trackConversion" function added to window which you can then just call whenever you need it, e.g.

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
});

HTH

来源：https://stackoverflow.com/questions/21410543/how-do-i-adapt-a-google-adwords-tracking-pixel-for-use-in-an-angularjs-app

标签

angularjs

coffeescript

google-adwords