Instalación del pixel de Facebook en React native web

Introducción

En un artículo anterior, hablamos sobre cómo instalar el píxel de Facebook en React Native con Expo. Hoy exploraremos la instalación del píxel de Facebook en un entorno web utilizando React Native Web, ya que la biblioteca que normalmente usamos, react-native-fbsdk, no es compatible con este entorno.

¿Vamos a utilizar alguna librería?

Hasta ahora, no hemos encontrado ninguna biblioteca específica para integrar el píxel de Facebook en React Native Web. Por lo tanto, hemos optado por realizar la implementación manualmente, sin depender de ninguna librería externa.

Tanto la implementación como la inicialización del píxel se realizará directamente en JavaScript.

Es crucial que este código solo se ejecute en un entorno web, ya que, si intentamos ejecutarlo en una aplicación iOS o Android, se producirá un error. De igual manera, la inicialización de la aplicación no debe lanzarse cuando el entorno es web.

¿Cómo diferenciamos entre la inicialización para app o web?

En nuestro caso, tenemos inicializadores separados para web y para la app móvil. Para gestionar ambos entornos, usamos una clase factory que determina dónde se está ejecutando la aplicación y activa el inicializador adecuado. A continuación, puedes ver el código que implementa esta lógica:

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")])
 }
}

Este código lo ejecutamos en App.tsx, y mediante condiciones, sabe si debe lanzar la inicialización para la app móvil (como explicamos en este artículo: Instalación del píxel de Facebook en React Native con Expo) o la de la web.

Implementación del archivo del píxel de Facebook

A continuación, te mostramos el archivo donde gestionamos la configuración e inicialización del píxel de Facebook:

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")
 }
}

Es importante asegurarse de que el objeto window esté disponible, ya que todo el código del píxel depende de su existencia. Si window no está definido, la ejecución fallará. El resto del código sigue la implementación estándar de Facebook. Al pasar el facebookAppId como argumento, inicializamos el píxel en la penúltima línea. Además, aprovechamos para enviar el evento de seguimiento de PageView.

Conclusión

En este tutorial, hemos cubierto cómo integrar el píxel en una aplicación web utilizando React Native Web. Este enfoque nos permite tener una implementación nativa para la web sin depender de bibliotecas externas. Si combinamos esta implementación con la que explicamos en nuestro artículo anterior, tendremos una solución completa para integrar el píxel de Facebook tanto en aplicaciones móviles para iOS y Android, como en aplicaciones web desarrolladas con React Native Web.