Skip to content

Instantly share code, notes, and snippets.

@gesielrosa
Last active December 1, 2020 22:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gesielrosa/0206ed62846ca859f9bc4d6c653ee87e to your computer and use it in GitHub Desktop.
Save gesielrosa/0206ed62846ca859f9bc4d6c653ee87e to your computer and use it in GitHub Desktop.
Service to add Facebook Pixel event track to Angular application
import { Injectable, OnDestroy } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { environment } from '@env/environment';
declare let fbq: Function;
@Injectable({
providedIn: 'root'
})
export class FacebookPixelService implements OnDestroy {
/**
* Router event subscription
* @private
*/
private _routerEventSubscription: Subscription;
/**
* Inject dependencies
* @param router: Router
*/
constructor(private router: Router) {
}
/**
* Remove subscriptions
*/
public ngOnDestroy(): void {
if (this._routerEventSubscription) {
this._routerEventSubscription.unsubscribe();
}
}
/**
* Add script to DOM
*/
public init(): void {
if (environment.facebook_pixel_id) {
const head = document.getElementsByTagName('head')[0];
const script: HTMLScriptElement = document.createElement('script');
script.innerHTML = `!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){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);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');fbq('init','${environment.facebook_pixel_id}');`;
head.appendChild(script);
this._subscribeRouterEvents();
}
}
/**
* Track custom events
* @param ev: string
*/
public track(ev: string): void {
fbq('trackCustom', ev);
}
/**
* Track events
* @private
*/
private _subscribeRouterEvents(): void {
this._routerEventSubscription = this.router.events.subscribe((ev: NavigationEnd) => {
if (ev instanceof NavigationEnd) {
fbq('track', 'PageView');
this.track(ev.urlAfterRedirects);
}
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment