使用 Angular 9 实现 Facebook Pixel答案

【问题标题】：Implementing Facebook Pixel using Angular 9使用 Angular 9 实现 Facebook Pixel
【发布时间】：2020-07-10 17:30:11
【问题描述】：

我一直在尝试关注 this 发布 r.e 设置 Facebook Pixel，但在编译时遇到了一些错误 - 我已在其中标记错误的地方进行了内联评论。

这是我的 facebook-pixel-service.ts 文件：

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

@Injectable({
  providedIn: 'root',
})
export class FacebookPixelService {
  private loadOk = false;

  constructor() {}

  load() {
    if (!this.loadOk) {
      (function(f: any, b, e, v, n, t, s) { // Getting 'non-arrow functions are forbidden' warning
        if (f.fbq) {
          return;
        }
        n = f.fbq = function() { // Getting Type '() => void' is not assignable to type 'undefined'
          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); // Getting Type 'HTMLElement' is not assignable to type 'undefined'
        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('init', {fbPixelId});
      (window as any).fbq('track', 'PageView');
      this.loadOk = true;
      console.log('Facebook pixel init run!');
    } else {
      (window as any).fbq('track', 'PageView');
      console.log('Facebook PageView event fired!');
    }
  }
}

我已经实现了建议的 service 和 provider 文件，但是在编译应用程序时我遇到了这些错误：

1.)“禁止使用非箭头功能”警告（已解决）

2.) 类型 '() => void' 不可分配给类型 'undefined' （内联注释）

3.) 类型“HTMLElement”不可分配给类型“未定义”（内联注释）

4.) 对于每个函数参数的每个实例都被分配，它正在抛出 Object is possible 'undefined'

提前致谢

编辑 - 2020 年 3 月 30 日

将(function(f: any, b, e, v, n, t, s) { 更改为((f: any, b, e, v, n, t, s) => { 和n = f.fbq = function() { 更改为n = f.fbq = () => { 已解决非箭头警告。

现在通过调整签名以遵循 TypeScript 可选链来解决所有错误，如 here 所述

所以最终的签名应该是这样的： ((f: any, b, e, v, n?: any, t?: any, s?: any) => {

【问题讨论】：

标签： javascript angular typescript facebook-pixel

【解决方案1】：

首先您需要将像素粘贴到索引 HTML 中，然后您可以创建一个服务来负责为 FB 像素生成事件。这边。

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

declare var fbq: Function;

@Injectable()
export class MarketingService {

  public onEventFacebook(event: IMarketing) {
    fbq('track', event.eventCategory, {
      content_name: event.eventLabel,
      content_category: event.eventCategory,
      content_ids: [],
      content_type: event.eventAction,
      value: event.eventValue,
      currency: 'ARS'
    });
  }

  public setEventData(eventCategory, eventAction, eventLabel): IMarketing {
    return {
      eventCategory,
      eventAction,
      eventLabel,
      eventValue: 0
    };
  }

}

之后，你会这样调用它

  const eventData: IMarketing = this.mktService.setEventData(
        'Registration',
        `new-${provider}-account`,
        'Nuevo usuario Registrado',
      );

      this.mktService.onEventFacebook(eventData);

【讨论】：