Реализация Facebook Pixel с использованием Angular 9

Я пытался следить за этим сообщением о настройке 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 нельзя присвоить типу undefined (встроенный комментарий)

4.) Для каждого экземпляра каждого назначенного параметра функции он бросает Object, возможно, 'undefined'

заранее спасибо

РЕДАКТИРОВАТЬ - 30 марта 2020 г.

Изменение (function(f: any, b, e, v, n, t, s) { на ((f: any, b, e, v, n, t, s) => { и n = f.fbq = function() { на n = f.fbq = () => { устранило предупреждение, не связанное со стрелкой.

Все ошибки теперь устраняются путем настройки подписи в соответствии с необязательной цепочкой TypeScripts, как указано здесь

Итоговая подпись должна выглядеть примерно так: ((f: any, b, e, v, n?: any, t?: any, s?: any) => {


typescript javascript angular facebook-pixel
person Jason Fung    schedule 30.03.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

в первую очередь вам нужно вставить пиксель в индексный 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);
person David Agustin Melgar    schedule 30.03.2020