如何调整 Google AdWords 跟踪像素以在 AngularJS 应用程序中使用? [英] How do I adapt a Google AdWords tracking pixel for use in an AngularJS app?

问题描述

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

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>

(我省略了标准的 <noscript> 回退，因为它在 AngularJS 应用程序的上下文中显然无关.)

(I've omitted the standard <noscript> fallback, as it's obviously irrelevant in the context of an AngularJS app.)

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

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.

我最初(可能是非功能性的)尝试将其适应 Angular 看起来像这样(在 Coffeescript 中):

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

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

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:

1. 上述方法应该有效吗?
2. 如果不行，怎么办?

提前致谢！

PS:我从另一个开发者那里继承了这个应用程序，但我(还)不精通这个平台.随意指出(在评论中)上面任何严重的错误代码/实践.谢谢！

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!

推荐答案

我不是 AngularJS 方面的专家，但这可能可以通过使用 AdWords 跟踪像素的异步版本来解决，因为它可以只需使用标准的 javascript 函数调用即可调用，不依赖于页面加载.

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.

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

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

完成此操作后，您会在窗口中添加一个google_trackConversion"函数，然后您可以在需要时调用它，例如

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

这篇关于如何调整 Google AdWords 跟踪像素以在 AngularJS 应用程序中使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！