Adding Facebook Pixel in Angular 8

Pixel is a tracking tool by Facebook, which will help you to track visitors and their activities in your website/ app. It also helps you to target those visitors when you advertise on Facebook.

An Angular app is a Single Page Application (SPA) Like Google Analytics, Facebook Pixel won't work with SPA by default.

Step 1 : Create and Configure an Angular App

Create an Angular App by running the command

ng new SampleApp

Type y when it prompts whether routing should be enabled or not and choose your preferred style format.

This will create an Angular App "SampleApp" and install all the dependencies in it.

Now let's add some pages and set routing in our app. We are creating 2 components, home and test. 

Type the following command to create 2 components

ng g c home && ng g c test

This will create 2 components home and test and also it'll update app.module.ts.

Now let's make some edits in app-routing.module.ts

Open the project in editor and update the contents of app-routing.module.ts to the following

We've successfully created an Angular app, added 2 components and set up routing.

Step 2 : Set up Firebase Hosting

Run the following command to Initialize Firebase

firebase init

And select the following options

CLI Features you want to use : Hosting

Public Directory : dist/SampleApp

Configure as Single Page App : Yes

Now we initialized Firebase in our project.

Step 3 : Create a new Pixel on Facebook

1. Go to https://business.facebook.com/settings/pixels/ and click on Add Pixel.

2. Gave a name and enter the url from Firebase dashboard

3. Copy the ID for later usage.

Step 4 : Add Pixel code in our project

We need to add a piece of JavaScript code just above closing body tag of your index.html. So the index.html will become

Step 5 : Build and Deploy to Firebase

Run the following command to Build and Deploy our App to Firebase

ng build --prod --aot && firebase deploy

Now when someone visits the  Firebase App url ({namespace}.firebaseapp.com), we can track the visits in Pixel's Event Manager.

So What's the problem here?

Angular is a Single Page Application. When navigating between routes, the page won't reload. Hence Pixel Script won't detect the change and send the page view.

How to Fix it?

We need to send the page views programmatically. For that, we need to make some changes in our app.component.ts

Step 6 : Configuring SPA to work with Facebook Pixel

1. Import Router and NavigationEnd from @angular/router

2. Declare fbq as a function. fbq is the function used by Facebook and the function definition is loaded from the remote script located at https://connect.facebook.net/en_US/fbevents.js. Typescript can't detect it. So we need to declare it as a function.

3. Subscribe to NavigationEnd event of Router and send the page view to Facebook.

So the contents of app.component.ts will become

Now Build and Deploy the App to Firebase by running the following command.

ng build --prod --aot && firebase deploy

When people navigate via routes, our app will send a page view event to Facebook and we can keep track of them in Facebook Event Manager

That's it. we've successfully Added Pixel in Angular Single Page Application.