Introduction

In a previous article, we talked about how to install the Facebook pixel in React Native with Expo. Today we will explore the installation of the Facebook pixel in a web environment using React Native Web, because the library that we normally use, react-native-fbsdk, is not compatible with this environment.

Are we going to use a library?

So far, we have not found any specific library to integrate the Facebook pixel in React Native Web. Therefore, we have chosen to perform the implementation manually, without relying on any external library.

Both the implementation and initialization of the pixel will be done directly in JavaScript.

It is crucial that this code is only executed in a web environment, since, if we try to run it in an iOS or Android application, an error will occur. Similarly, the initialization of the application should not be launched when the environment is web.

How do we differentiate between initialization for app or web?

In our case, we have separate initializers for web and mobile app. To manage both environments, we use a class factory which determines where the application is running and triggers the appropriate initializer. Below, you can see the code that implements this logic:

export default class AppInitializerFactory {
 static create() : AppInitializer {
   if (isWeb()) {
     return new AppInitializer([new FacebookWebSDKInitilizer("FACEBOOK_WEB_TOKEN")])
   }

   return new AppInitializer([new FacebookSDKInitilizer("FACEBOOK_APP_TOKEN")])
 }
}

We execute this code in App.tsx, and by means of conditions, it knows if it must launch the initialization for the mobile app (as we explained in this article): Installing the Facebook pixel in React Native with Expo) or that of the web.

Implementation of the Facebook pixel file.

Below, we show you the file where we manage the configuration and initialization of the Facebook pixel:

export const initPixel = (facebookAppId : string) : void => {
 if (typeof window !== "undefined") {
   window.fbq = function() {
     if (window.fbq.callMethod) {
       window.fbq.callMethod.apply(window.fbq, arguments)
     } else {
       window.fbq.queue.push(arguments)
     }
   }
   window.fbq.push = window.fbq
   window.fbq.loaded = true
   window.fbq.version = "2.0"
   window.fbq.queue = []
   const script = document.createElement("script")
   script.async = true
   script.src = "https://connect.facebook.net/en_US/fbevents.js"
   document.head.appendChild(script)
   window.fbq("init", facebookAppId)
   window.fbq("track", "PageView")
 }
}

It is important to ensure that the object window is available, since all pixel code depends on its existence. If window is not defined, the execution will fail. The rest of the code follows the standard Facebook implementation. When passing the facebookAppId as argument, we initialize the pixel in the penultimate line. In addition, we take advantage of this to send the tracking event of PageView.

Conclusion

In this tutorial, we have covered how to integrate the pixel into a web application using React Native Web. This approach allows us to have a native implementation for the web without relying on external libraries. If we combine this implementation with the one we explained in our previous article, we will have a complete solution to integrate the Facebook pixel both in mobile applications for iOS and Android, as well as in web applications developed with React Native Web.