如何调整Google AdWords跟踪像素以用于AngularJS应用？

Question

如何调整AdWords跟踪像素以在AngularJS应用程序中按预期运行？

典型的跟踪代码如下所示:

<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>

(我省略了标准的<noscript>后备,因为它在AngularJS应用程序的上下文中显然无关紧要.)

跟踪代码的工作原理是在全局命名空间中设置一组变量,然后在每次页面加载时获取外部脚本.在Angular上下文中,这不起作用,因为在每次页面加载时不会从服务器重新检索HTML源.

我最初(也可能是非功能性)尝试将其调整为Angular看起来像这样(在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

这似乎不起作用.至少,营销顾问声称这样.我认识到PEBKAC的机会相当不错,所以我的问题是:

1. 上述工作应该吗？
2. 如果没有,会有什么用？

提前致谢!

PS:我从其他开发者那里继承了这个应用程序,而且我还没有精通这个平台.请随意指出(在评论中)上面任何严重错误的代码/做法.谢谢!

Answer 1

我不是AngularJS的专家,但这可以通过使用AdWords跟踪像素的异步版本来解决,因为转换可以通过标准的javascript函数调用来调用,而不依赖于页面加载.

您可以像这样包含异步版AdWords跟踪像素(请确保使用https版本):

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

然后,一旦你完成了,你将获得一个"google_trackConversion"功能添加到窗口,然后你可以随时调用,例如,

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