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

问题描述

如何在AngularJS应用程式中调整AdWords追踪像素的功能？

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> fallback，因为它在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.

您可以将异步版本的（请务必使用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屋！