Instalación del pixel de Facebook en React-native con Expo

Introducción al Pixel de Facebook

En la era digital actual, comprender y optimizar la interacción de los usuarios con nuestras aplicaciones es crucial para el éxito de cualquier negocio en línea. Las grandes empresas tecnológicas han creado herramientas que nos permiten medir y conocer los comportamientos de los usuarios. En el día de hoy, vamos a hablar sobre el pixel que nos ofrece Facebook (Meta) para ello. 

El pixel de Facebook es una herramienta poderosa diseñada para rastrear, analizar y mejorar la eficacia de nuestras campañas publicitarias en Facebook e Instagram.

Su función principal es recopilar datos sobre las actividades de los usuarios en la aplicación, permitiendo a los propietarios de negocios entender mejor cómo los usuarios interactúan con su contenido y publicidad.

Una vez configurado, el pixel comienza a recopilar datos automáticamente, enviándolos a los servidores de Facebook donde pueden ser analizados para obtener insights valiosos.

En este artículo vamos a analizar cómo instalar el pixel de Facebook en una aplicación React Native construida con Expo.

Instalación de la librería

En este artículo vamos a utilizar la librería react-native-fbsdk-next. Esta librería nos permitirá realizar la instalación del pixel tanto si usamos expo como si no lo usamos. En nuestro caso vamos a realizar la instalación para proyectos con expo. 

Para la instalación de la librería debemos lanzar uno de estos 2 comandos:

Si usamos npm: 

npm install react-native-fbsdk --save

Si usamos yarn:

yarn add react-native-fbsdk

Una vez hayamos lanzado la instalación podemos ver cómo en el package.json se ha añadido la línea donde nos indica  que la librería ha sido instalada con éxito. 

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

Con la librería instalada tenemos que acabar la configuración de la misma. Para ello nos dirigimos al fichero app.json o app.config.json para añadir en el apartado de los plugins de expo el de la librería que acabamos de instalar. 

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

Además de añadir el plugin, tenemos que insertar un poco de configuración.

Los campos necesarios de configuración son: 

• appId: Id de la aplicación de Facebook.
• displayName: El nombre de la aplicación.
• clientToken: El token de cliente.
• scheme: El esquema de retorno a la aplicación desde Facebook, se forma con fb[app-id].

Nuestro bloque de configuración de la librería en el fichero app.config.json debería quedar similar tras añadir la actualización: 

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

Con estos campos hubiéramos acabado con la configuración obligatoria. Para más información se puede ver en la página de la librería en cuestión, en la sección de este enlace.

Inicialización de la librería en el proyecto

Como ya tenemos la librería instalada, vamos a pasar a la inicialización. Nuestra recomendación es que haya un fichero que se encargue de la inicialización de la librería en concreto. Nosotros a este fichero le hemos llamado FacebookSDKInitilizer. Además, tenemos una interfaz para que todas las librerías que necesiten inicializarse la implementen. A esta interfaz le hemos llamado AppInitilizerInterface en la cual únicamente pedimos que se implemente el método init: 

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

Más adelante hablaremos de por qué usamos esta interfaz. 
Nuestra clase FacebookSDKInitilizer quedará de la siguiente forma:

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

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

Para continuar con la inicialización de la librería vamos a asociar nuestra aplicación con la cuenta de Facebook, esto lo realizamos con el Facebook App Id. Con esta modificación nuestra clase quedará de la siguiente forma: 

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

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

Vamos a realizar una recomendación: a pesar que el FACEBOOK_APP_ID se puede insertar directamente desde aquí, es mejor si llega como un atributo por constructor ya que vamos a tener muchas ventajas realizando esta acción. 

Si queremos inyectarlo por constructor, la clase se modificaría quedando de la siguiente manera:

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

Donde realicemos la instanciación de la clase habrá que pasar el FACEBOOK_APP_ID.

new FacebookSDKInitilizer(“FACEBOOK_APP_ID”),

Con esto, si queremos cambiar de cuenta podríamos directamente hacerlo desde la instanciación sin necesidad de añadir lógica dentro de la clase que instancia el inicializador de Facebook.

En cuanto al tema de la interfaz que hemos hablado anteriormente, lo que buscamos es poder realizar un array de inicializadores y, mediante un bucle, poder inicializar todas las librerías que sean necesarias para el funcionamiento de la aplicación. Como todas las clases de instanciación van a implementar el método init() podemos recorrerlas llamando a este método y todas se inicializarán de forma independiente.

Envío de eventos en el proyecto

Es posible que queramos enviar eventos en diferentes acciones o puntos de la aplicación, por ejemplo, cuando un usuario hace login, cuando acaba un registro o cuando añade un artículo a un carrito. Para ellos, la librería que hemos utilizado lo permite. 

Aquí vamos a explicar la forma estándar de realizar el envío aunque recomendamos, como mínimo, englobar todos los envíos en un único punto por si cambia la librería en una actualización, evitándonos el problema de tener que ir por toda la aplicación realizando la actualización.

Para comenzar a enviar el primer evento, vamos a realizar el import de la clase de la librería que nos va a permitir realizar el envío del evento:

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

Una vez tenemos el import y podemos usar la clase AppEventsLogger, podemos realizar el envío del evento: 

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

Con ese código ya estamos enviando un evento a nuestra cuenta de Facebook. En el evento del ejemplo, estamos enviando el evento de registro completado. Además, nos permiten añadir el atributo del método que ha utilizado para realizar el registro, que en el caso del ejemplo ha sido mediante email. 

Conclusión

La utilización de herramientas de rastreo y análisis de datos puede ayudarnos a entender de una mejor manera cómo actúan nuestros usuarios en nuestras aplicaciones además de poder entender mejor las campañas de marketing que se lanzan. 

Con este pequeño tutorial, podrás realizar la instalación del pixel de Facebook en una aplicación react-native utilizando la librería de Expo.

Al integrar herramientas como el pixel de Facebook en React-native, es esencial gestionar las actualizaciones y nuevas funcionalidades de manera segura y controlada. En este contexto, te recomiendo leer nuestro post sobre el uso de Feature Flags, que te ofrece estrategias para desplegar nuevas características sin interrumpir la experiencia del usuario. Esto es especialmente útil cuando implementas cambios significativos como el seguimiento de eventos con el pixel de Facebook.