使用 Angular 9 实现 Facebook Pixel

Posted 2023-02-22

【中文标题】使用 Angular 9 实现 Facebook Pixel

【英文标题】：Implementing Facebook Pixel using Angular 9

【发布时间】：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) =>

【参考方案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);