Integración con React Native
Sabemos que React Native es muy popular últimamente. Ofrece una excelente experiencia de desarrollo (DX) y proporciona mucha velocidad a los proyectos. Estamos muy contentos de tener una biblioteca de integración oficial y de apoyar completamente React Native. Si estás buscando Android, consulta Android y para iOS consulta iOS. Para otras integraciones móviles consulta integración móvil. Si usas React Native, estás en el lugar correcto. ¡Empecemos!
Nuestra biblioteca oficial de integración en NPM se llama @metricalp/react-native
Instalación
La puedes instalar así:
yarn add @metricalp/react-native
o
npm install @metricalp/react-native
Integración
Intentamos hacer la integración flexible y fluida para mantener la mejor experiencia de desarrollo posible. Aquí compartiremos un App.tsx completo (de un proyecto de ejemplo de Expo) para mostrar cómo puedes integrar Metricalp en tu app React Native en tu archivo de entrada (App.js, main.js, index.js...). Luego definiremos todos los detalles del código a continuación.
import { StatusBar } from 'expo-status-bar';
import { AppState, NativeEventSubscription, Platform, StyleSheet, Text, View } from 'react-native';
import { Metricalp } from '@metricalp/react-native';
import * as Crypto from 'expo-crypto';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useEffect, useState } from 'react';
export default function App() {
const [appInitialized, setAppInitialized] = useState(false);
useEffect(() => {
let subscription: NativeEventSubscription;
async function init() {
let uuid = await AsyncStorage.getItem('uuid');
if (!uuid) {
uuid = Crypto.randomUUID();
await AsyncStorage.setItem('uuid', uuid);
}
const osWithVersion = (Platform.OS === 'ios' ? 'iOS' : 'Android') + ' ' + Platform.Version;
Metricalp.init({
platform: Platform.OS,
app: '[email protected]',
language: 'English-US',
os: osWithVersion,
uuid,
tid: 'mam48',
}, 'MainScreen');
subscription = AppState.addEventListener('change', (nextAppState) => {
if (nextAppState === 'background' || nextAppState === 'inactive') {
Metricalp.appLeaveEvent();
} else if (nextAppState === 'active') {
Metricalp.screenViewEvent('MainScreen');
}
});
setAppInitialized(true);
}
init();
return () => {
subscription?.remove();
};
}, []);
return (
<View style={styles.container}>
{appInitialized ? (
<View>
<Text>Open up App.tsx to start working on your app!</Text>
<StatusBar style="auto" />
</View>
) : (
<Text>Loading...</Text>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Primero, hemos importado la biblioteca import { Metricalp } from '@metricalp/react-native'; con la que llamamos a los métodos.
El primer método que se llama es Metricalp.init y es el más importante para asegurar una integración correcta. Inicializaremos Metricalp para recopilar eventos. Es importante hacerlo en el archivo de entrada (App.js, main.js, index.js...). Metricalp.init toma un objeto de attributes y la ruta de la pantalla inicial path (para el evento de screen_view automático opcional). Si no proporcionas la pantalla inicial, se omitirá el evento de screen_view.
Atributos del Argumento de Metricalp.init()
platform (requerido)
Debes proporcionar la plataforma actual. Los valores posibles son ios o android. Todo en minúsculas. Puedes obtenerlo con Platform.OS de react-native como en el ejemplo anterior.
app
Debes proporcionar el nombre y la versión de tu app. Es importante proporcionar la versión para rastrearla en el tablero. Puedes proporcionarlo en el formato AppName@Version, como [email protected] como en el ejemplo anterior.
language
Debes proporcionar el idioma actual de tu app. Puedes proporcionarlo en el formato Idioma (nombre largo)-País (Código ISO), como English-US como en el ejemplo anterior o Spanish-ES o Turkish-TR, etc. Si no estás seguro del país, puedes proporcionar unknown. Por ejemplo, English-unknown.
os
Puedes proporcionar el sistema operativo actual de tu app y la versión. Puedes hacerlo en el formato NombreSO VersiónSO, como iOS 14.5 como en el ejemplo anterior o Android 11. Aquí convertimos ios en iOS y android en Android para tener datos bonitos y coherentes en el tablero (solo conversiones de minúsculas => mayúsculas). Es opcional pero recomendado.
uuid
Necesitamos explicar este atributo UUID. Normalmente, en el seguimiento web, Metricalp no usa cookies como hemos mencionado en muchos lugares. Identificamos a los usuarios con sus direcciones IP en hashes de una sola vía. La fórmula es algo así: hash(user_ip + user_agent + salt). Aquí, ip + user_agent es casi único para cada usuario. Pero en las aplicaciones móviles, las cadenas de user-agent son inconsistentes y no confiables. Por lo tanto, necesitamos un identificador único para cada usuario. Dejamos este identificador único para ti. Puedes usar cualquier identificador único para tu app. Por ejemplo, si es una app de autorización y solo estás rastreando después de que los usuarios inicien sesión, puedes proporcionar IDs de usuario. O puedes usar identificadores únicos reales relacionados con el dispositivo (Android e iOS tienen algunos métodos nativos para obtenerlos). O, como en el ejemplo anterior, puedes generar un UUID aleatorio cuando el usuario abre la app por primera vez y guardarlo en el almacenamiento (usamos AsyncStorage arriba). Luego usa este UUID. Ahora, el algoritmo de hash será así: hash(user_ip + UUID + salt). En este enfoque, el UUID no cambiará a menos que el usuario elimine y reinstale la app. Pero eso es justo. Si no es suficiente para ti, puedes proporcionar tu propio identificador único como mencionamos anteriormente. ID de usuario o identificador de dispositivo o cualquier otra combinación. Si solo deseas usar la IP, simplemente pasa una cadena vacía '' como UUID o omítelo por completo. Pero te recomendamos encarecidamente usar un identificador único para un mejor seguimiento. UUID es opcional pero recomendado.
bypassIpUniqueness
Este es un atributo opcional. Los valores posibles son "enable" o "disable". Si ves el ejemplo de hash anterior con metr_unique_identifier: hash(user_ip + metr_unique_identifier + salt), todavía tenemos la información IP en el hash. Luego, cuando el usuario, por ejemplo, está en Wifi y luego cambia a la red móvil, entonces la IP cambiará. Mientras que metr_unique_identifier es el mismo, debido al cambio de IP, puede contarse como otro recuento único para ese día. Esta configuración también elimina la IP del hash. Si configuras esto como "enable", no utilizaremos la IP en la función de hash (como predeterminado): hash(metr_unique_identifier + salt). Pero si pasas disable, entonces también se utilizará la IP en la función de hash: hash(user_ip + metr_unique_identifier + salt). No recomendamos esto porque romper el recuento único con IP no tiene sentido en la mayoría de los escenarios móviles. Por lo tanto, configuramos esta configuración de forma predeterminada como enable. En la mayoría de los escenarios, no pases esta opción, déjalo como predeterminado (enable).
tid (requerido)
Debes proporcionar tu TID (también conocida como ID de Seguimiento) al método de inicialización. Puedes obtenerlo desde el panel de control de Metricalp. Es requerido. Si no lo proporcionas, obtendrás un error. Puedes encontrar tu tid en la página Embed & Share Tracker.
Más detalles sobre la integración
Bueno, hemos definido todos los atributos posibles. Pero hay algunos detalles en el código anterior. Vamos a explicarlos ahora.
Primero, realizamos la inicialización de la app en useEffect con una función asíncrona. Configuramos un estado para mostrar un texto de carga al usuario mientras se realiza la inicialización. Puedes mostrar una pantalla de bienvenida o cualquier otra pantalla de carga. Puedes inicializar y configurar cualquier otra configuración para tu app en esta función, este es un enfoque común.
Dentro de la función init() (en useEffect), estamos verificando si hay un UUID en AsyncStorage, si no hay uno, lo generamos. Las funciones de AsyncStorage y UUID provienen de Expo, pero puedes usar cualquier biblioteca que desees. Luego generamos un SO con la cadena de versión. Luego llamamos a Metricalp.init con todos los atributos. Como mencionamos anteriormente, Metricalp disparará el primer evento screen_view automáticamente con la ruta (segundo argumento de la función init), pero puedes omitirlo dejando fuera el segundo argumento.
Metricalp.init({
platform: Platform.OS,
app: '[email protected]',
language: 'English-US',
os: osWithVersion,
uuid,
bypassIpUniqueness: true,
tid: 'mam48',
}) // Aquí omitimos el nombre de la pantalla para desactivar el disparo automático.Hay dos escenarios importantes de eventos del sistema en la integración de Metricalp React Native: vista de pantalla y salida de la app. Rastreamos pantallas visitadas, tasas de rebote, etc. basados en estos eventos. Por lo tanto, te recomendamos encarecidamente que actives estos eventos en tu app además de cualquier evento personalizado. Debes usar los métodos proporcionados por la biblioteca para activar estos eventos. En el ejemplo anterior, estamos escuchando los cambios de AppState por React Native y activando estos eventos cuando la app está activa o en estado inactivo/fondo. Usamos los métodos screenViewEvent y appLeaveEvent de la biblioteca.
...
...
subscription = AppState.addEventListener('change', (nextAppState) => {
if (nextAppState === 'background' || nextAppState === 'inactive') {
Metricalp.appLeaveEvent();
} else if (nextAppState === 'active') {
Metricalp.screenViewEvent('MainScreen');
}
});
setAppInitialized(true); // Configurar estado para mostrar contenido de la app
}
init(); // Llamar a la función init
return () => {
subscription?.remove(); // Eliminar suscripción al desmontar para evitar fugas de memoria
};
...
...El método Metricalp.screenViewEvent es proporcionado por la biblioteca para facilitarte las cosas. Debes proporcionar el nombre de la pantalla actual (ruta) a este método. También puedes pasar cualquier dato adicional (atributos personalizados) a estos métodos como segundo argumento:
Metricalp.screenViewEvent('MainScreen', { custom_prop1: 'Usuario no autenticado' });El método Metricalp.appLeaveEvent es proporcionado por la biblioteca para facilitarte las cosas. Puedes pasar cualquier dato adicional (atributos personalizados) a estos métodos como primer argumento:
Metricalp.appLeaveEvent({ custom_prop1: 'Usuario no autenticado' });Aquí el tema es un alias para un atributo personalizado. Puedes consultar Eventos personalizados & Atributos para más información.
Básicamente eso es todo. Has integrado exitosamente tu app React Native con Metricalp. Una cosa más, también puedes crear algunos eventos personalizados para obtener información más detallada.
Eventos Personalizados
También hay otro método de la biblioteca para los eventos personalizados: Metricalp.customEvent. Toma el tipo de evento como primer argumento y los atributos de los datos como segundo argumento. Puedes usarlo así:
Metricalp.customEvent('click_purchase', {path: 'PricingScreen', custom_prop1: user.id, theme: 'dark'})Aquí pasamos la información de la ruta, también pasamos user.id como atributo personalizado. Pasamos otro atributo personalizado theme, pero esta vez usamos el alias. Puedes consultar Eventos personalizados & Atributos para más información. Ahora, con el poder de los eventos personalizados y los atributos, puedes rastrear y analizar cualquier evento para obtener información detallada.