Implementing Facebook Pixel using Angular 9

Question

I've been trying to follow this post r.e setting up Facebook Pixel, but getting a few errors when compiling - I've commented inline where it's flagging the errors.

Here is my facebook-pixel-service.ts file:

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!');
    }
  }
}

I've implemented the suggested service and provider files, however I'm getting these errors when compiling the app:

1.) 'non-arrow functions are forbidden' warning (RESOLVED)

2.) Type '() => void' is not assignable to type 'undefined' (commented inline)

3.) Type 'HTMLElement' is not assignable to type 'undefined' (commented inline)

4.) For every instance of each function param is being assigned, it's throwing Object is possibly 'undefined'

Thanks in advance

EDIT - 30/03/2020

Changing (function(f: any, b, e, v, n, t, s) { to ((f: any, b, e, v, n, t, s) => { and n = f.fbq = function() { to n = f.fbq = () => { has resolved the non-arrow warning.

All errors are now resolved by adjusting the signature to follow TypeScripts optional chaining, as mentioned here

So the final signature should look something like this: ((f: any, b, e, v, n?: any, t?: any, s?: any) => {

score 1 · Answer 1 · answered Mar 30 '20 at 15:14

in the first place you need to paste the pixel in the index HTML, then you could create a service that will be in charge of generating events for FB pixel. This way.

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
    };
  }

}

After that, you will call it in this way

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

      this.mktService.onEventFacebook(eventData);

Implementing Facebook Pixel using Angular 9

1 Answers1