Introduction to the Facebook Pixel

In today's digital era, understanding and optimizing user interaction with our applications is crucial to the success of any online business. Large technology companies have created tools that allow us to measure and understand user behaviors. Today, we are going to talk about the pixel that Facebook (Meta) offers us for this purpose. 

The Facebook pixel is a powerful tool designed to track, analyze and improve the effectiveness of our advertising campaigns on Facebook and Instagram.

Its primary function is to collect data on user activities in the application, allowing business owners to better understand how users interact with their content and advertising.

Once configured, the pixel starts collecting data automatically, sending it to Facebook's servers where it can be analyzed for valuable insights.

In this article we are going to look at how to install the Facebook pixel in a React Native app built with Expo.

Library installation

In this article we are going to use the react-native-fbsdk-next. This library will allow us to install the pixel whether we use expo or not. In our case we are going to make the installation for projects with expo. 

For the installation of the library we must launch one of these 2 commands:

If we use npm: 

npm install react-native-fbsdk --save

If we use yarn:

yarn add react-native-fbsdk

Once we have launched the installation we can see how in the package.json the line has been added where it indicates that the library has been installed successfully. 

"react-native-fbsdk-next": "^13.0.0",

With the library installed we have to finish the configuration of the same one. For it we go to the file app.json or app.config.json to add in the section of the plugins of expo the one of the library that we have just installed. 

  "expo": {
    "plugins": ["react-native-fbsdk-next"]
  }

In addition to adding the plugin, we need to insert some configuration.

The required configuration fields are: 

• appId: Id of the Facebook application.
• displayName: The name of the application.
• clientToken: The client token.
• scheme: The return scheme to the application from Facebook is formed with fb[app-id].

Our library configuration block in the app.config.json file should look similar after adding the update: 

     [
       "react-native-fbsdk-next",
       {
         appID: "APP_ID",
         clientToken: "CLIENT_TOKEN",
         displayName: "My application",
         scheme: "fbAPP_ID",
       },
     ],

With these fields we would have finished with the mandatory configuration. For more information you can see the page of the library in question, in the section of this link.

Initialization of the library in the project

As we already have the library installed, let's move on to the initialization. Our recommendation is that there is a file that is in charge of the initialization of the specific library. We have named this file FacebookSDKInitilizer. In addition, we have an interface for all the libraries that need to initialize themselves to implement it. We have called this interface AppInitilizerInterface in which we only ask for the init method to be implemented: 

export interface AppInitilizerInterface {
 init() : void | Promise<void>;
}

We will discuss later why we use this interface. 
Our class FacebookSDKInitilizer will be as follows:

import { Settings } from "react-native-fbsdk-next"
import { AppInitilizerInterface } from "src/shared/domain/initializer/AppInitializerInterface"

export class FacebookSDKInitilizer implements AppInitilizerInterface {
 async init() : Promise<void> {
   Settings.initializeSDK()
 }
}

To continue with the initialization of the library we are going to associate our application with the Facebook account, this is done with the Facebook App Id. With this modification our class will be as follows: 

import { Settings } from "react-native-fbsdk-next"
import { AppInitilizerInterface } from "src/shared/domain/initializer/AppInitializerInterface"

export class FacebookSDKInitilizer implements AppInitilizerInterface {
 async init() : Promise<void> {
   Settings.initializeSDK()
   Settings.setAppID(“FACEBOOK_APP_ID”)
 }
}

We are going to make a recommendation: although the FACEBOOK_APP_ID can be inserted directly from here, it is better if it arrives as an attribute by constructor since we are going to have many advantages performing this action. 

If we want to inject it by constructor, the class would be modified as follows:

export class FacebookSDKInitilizer implements AppInitilizerInterface {
 builder(private readonly facebookAppId : string) {}
 
  async init() : Promise<void> {
   Settings.initializeSDK()
   Settings.setAppID(this.facebookAppId)
 }
}

The FACEBOOK_APP_ID must be passed where the class is instantiated.

new FacebookSDKInitilizer(“FACEBOOK_APP_ID”),

With this, if we want to change account we could do it directly from the instantiation without adding logic inside the class that instantiates the Facebook initializer.

Regarding the interface issue we have talked about before, what we are looking for is to be able to make an array of initializers and, by means of a loop, to be able to initialize all the libraries that are necessary for the operation of the application. As all the instantiation classes are going to implement the method init() we can traverse them by calling this method and they will all be initialized independently.

Sending events in the project

We may want to send events at different actions or points in the application, for example, when a user logs in, when he finishes a registration or when he adds an item to a cart. For them, the library we have used allows it. 

Here we are going to explain the standard way of sending, although we recommend, as a minimum, to include all the shipments in a single point in case the library changes in an update, avoiding the problem of having to go through the whole application performing the update.

To start sending the first event, we are going to perform the import of the library class that will allow us to send the event:

import { AppEventsLogger } from 'react-native-fbsdk-next';

Once we have the import and can use the class AppEventsLogger, we can make the shipment of the event: 

   AppEventsLogger.logEvent(AppEventsLogger.AppEvents.CompletedRegistration, {
     [AppEventsLogger.AppEventParams.RegistrationMethod]: 'email',
   });

With that code we are already sending an event to our Facebook account. In the example event, we are sending the registration completed event. In addition, they allow us to add the attribute of the method used to perform the registration, which in the case of the example has been by email. 

Conclusion

The use of tracking and data analysis tools can help us to better understand how our users act in our applications and to better understand the marketing campaigns that are launched. 

With this small tutorial, you will be able to install the Facebook pixel in a react-native application using the Expo library.

When integrating tools like the Facebook pixel into React-native, it is essential to manage updates and new features in a secure and controlled way. In this context, I recommend you to read our post on the use of Feature Flags, which offers you strategies to deploy new features without disrupting the user experience. This is especially useful when you implement significant changes such as event tracking with the Facebook pixel.