Question

我正试图弄清楚我如何在我的角度项目中使用Facebook跟踪像素。

我已将基本像素添加到我的index.html

中

但是我想从javascript中触发一个事件，我该如何触发

fbq（'track'，'CompleteRegistration'）;

当我在我的代码中有这个时，Angular将无法编译，因为它无法找到fbq

Answer 1

即使fbq在运行时在您的应用程序中全局可用，编译器也不知道它，因为它是在index.html中定义的（在编译器已知的打字稿文件之外）。

要解决此问题，请在您使用fbq的文件中添加环境声明，如下所示：

declare const fbq: any; // 1. add an ambient declaration

@Component({...})
export class ComponentUsingFacebookPixel {

  fbq('track', 'CompleteRegistration'); // 2. This will compile now

}

这不会更改已编译的javascript或覆盖fbq的值;它是对编译器的承诺，即在运行时可以获得该名称的值。

如果您需要编译器的其他帮助，您可以提供比any更具体的类型，但any足以避免您看到的编译错误。

Answer 2

创建一项服务，然后在您的app.component.ts

中调用它

import { Injectable } from '@angular/core';

    @Injectable({
        providedIn: 'root'
    })
    export class FacebookPixelService {
        constructor() { }
        load() {
            (function (f: any, b, e, v, n, t, s) {
                if (f.fbq) return; n = f.fbq = function () {
                    n.callMethod ?
                        n.callMethod.apply(n, arguments) : n.queue.push(arguments)
                }; if (!f._fbq) f._fbq = n;
                n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0;
                t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s)
            })(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
            (window as any).fbq.disablePushState = true; //not recommended, but can be done
            (window as any).fbq('init', '<your id>');
            (window as any).fbq('track', 'PageView');
        }
    }

Answer 3

如果已将它添加到{.1}中，请添加到ngOnInit()

(window as any).fbq('track', 'CompleteRegistration'); // this Worked for me

在Angular 2/4中使用Facebook广告跟踪像素

3 个答案: