使用Angular.js跟踪像素

Question

我们正在使用Facebook跟踪像素来跟踪我们的Facebook广告的表现。为此，对于第一次访问我们服务的每个用户，我们需要在DOM中触发跟踪像素。我们通过在控制器中设置$scope.newReg为true，并在模板中使用以下代码来实现。

<div ng-if="newReg == true">
<img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=xxxxxx&amp;cd[value]=0.00&amp;cd[currency]=EUR&amp;noscript=1" />
</div>

问题是，如果$scope.newReg设置为false，实际上正在发生什么。 我猜测跟踪像素不应该被触发，但根据文档，它似乎可以被触发。 “如果条件为假，则元素将从DOM树中删除。” 这意味着跟踪像素可能会在DOM中出现很短的时间，然后被删除。即使条件失败，也会触发跟踪计数器。

- Ladislav M

---

我认为这取决于你的跟踪像素 HTML 的位置。 - Raju Mandapati

如果上述标记位于具有ng-app的默认HTML页面内，则在Angular引导和评估ng-if指令之前，它将被加载到DOM中。因此，是的，如果样式属性未设置为display:none，则这将至少出现一小段时间。 - Raju Mandapati

根据Facebook的示例代码，它具有style属性，该属性指定display:none。无论像素实际上是否显示，重要的是它是否被触发。 - Ladislav M

标记语言位于部分文件中，因此它在特定的控制器下。由于我们使用Ionic框架，因此我们使用ui-router来连接控制器和视图。 - Ladislav M

Answer 1

没有其他人遇到这个问题吗？

这个答案似乎对我有用： Facebook自定义受众像素在单页应用程序SPA上的使用

但我相信还有更多处理方法。

- Ladislav M

Answer 2

我建议您不要依赖ng-if文档，因为由于性能需求或错误等原因，它可能会在下一个版本中发生更改。

我建议您创建自己的跟踪像素指令，如果条件良好，则注入HTML。

- Chen Kinnrot

---

听起来是一个更好的解决方案，但你会如何创建指令呢？我看不到其他方法，除了在指令的模板标记中使用ng-if。你会用哪种方式注入HTML呢？ - Ladislav M