Реализация пикселя Facebook с использованием Angular 9 - PullRequest
Новая
       22

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

0 голосов
/ 30 марта 2020

Я пытался подписаться на эту публикацию о настройке пикселя Facebook, но получаю несколько ошибок при компиляции - я прокомментировал в своей статье, где он отмечает ошибки.

Вот мой файл 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.) «Функции без стрелок запрещены» предупреждение (RESOLVED)

2.) Тип '( ) => void 'нельзя назначить типу «undefined» (с комментариями)

3.) Типу «HTMLElement» нельзя присвоить типу «undefined» (с комментариями внутри строки) )

4.) Для каждого экземпляра каждой функции присваивается параметр, он выдает Объект, возможно, «неопределен»

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

РЕДАКТИРОВАТЬ - 30/03/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 = () => { разрешило предупреждение без стрелки. * 10 42 *

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

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

1 Ответ

0 голосов
/ 30 марта 2020

В первую очередь вам нужно вставить пиксель в индекс 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);
...