A análise desempenha um papel significativo na melhoria das experiências do usuário, tentando entender o comportamento do usuário e as interações nos aplicativos. O React Native é compatível com três ferramentas de análise principais que ajudam a melhorar as experiências nos aplicativos React Native: App Center Analytics da Microsoft, Firebase Analytics do Google e Segment.
Nesta postagem, exploraremos as vantagens de cada ferramenta e como elas ajudam os desenvolvedores a navegar e utilizar análises dentro do React Native.
App Center Analytics da Microsoft
Criado pela Microsoft , o App Center Analytics é parte do SDK do App Center que captura as sessões do usuário e rastreia todas as interações com o aplicativo enquanto coleta o dispositivo e Informações do sistema operacional.
Uso do App Center Analytics
Para usar o App Center Analytics, devemos instalar o SDK nativo do App Center React .
Primeiro, devemos criar uma conta e um novo aplicativo em appcenter.ms . A documentação do React Native mostra como instalar os pacotes e integrar o SDK para iOS e Android. Nesta postagem, abordaremos uma visão geral da instalação de alto nível.
Instalação do App Center Analytics
Comece instalando o SDK usando o Yarn:
yarn add appcenter appcenter-analytics appcenter-crashes--exato
Dentro do diretório app , execute cd ios && pod install --repo-update para instalar as dependências do iOS.
Em seguida, use Xcode para criar um novo arquivo e nomeie-o AppCenter-Config.plist . Clique com o botão direito na pasta raiz; escolha Adicionar novo arquivo e arquivo de lista de propriedades .
Com o arquivo aberto, copie e cole o código abaixo dentro do arquivo que acabamos de criar:
AppSecret {APP_SECRET_VALUE}
Altere {APP_SECRET_VALUE} com a chave APP_SECRET do aplicativo que criamos em appcenter.ms.
O conteúdo dentro de AppCenter-Config.plist deve ser semelhante à figura abaixo:
Para inicializar o SDK, adicione estas linhas de código ao topo do arquivo AppDelegate.m :
#import#import #import
Em didFinishLaunchingWithOptions , adicione estas linhas:
[registro AppCenterReactNative]; [AppCenterReactNativeAnalytics registerWithInitiallyEnabled: true]; [AppCenterReactNativeCrashes registerWithAutomaticProcessing];
Agora, clique no ícone Construir ou digite Command + B para construir o aplicativo.
Diferenças de instalação para Android
Para o aplicativo Android, adicione o arquivo appcenter-config.json dentro de android/app/src/main/assets .
O conteúdo do arquivo deve ser semelhante ao código abaixo; também devemos substituir {APP_SECRET_VALUE} pelo segredo de aplicativo válido:
{ "app_secret":"{APP_SECRET_VALUE}"
}
A última etapa para o aplicativo Android é adicionar estas linhas a res/values /strings.xml :
DO_NOT_ASK_JAVASCRIPT SEMPRE_SEND
Para que o SDK funcione corretamente, evite usar qualquer outro serviço que gere relatórios de falhas, exceto o AppCenter SDK.
Usando métodos do App Center Analytics para coletar dados
Com a instalação concluída, use os métodos do AppCenter Analytics dentro do código React Native para coletar dados do usuário.
Neste exemplo, relataremos as vendas e rastrearemos como um usuário navega em um aplicativo de loja online usando o método trackEvent () .
Este método é acionado sempre que um usuário executa uma ação, como clicar no botão Comprar . Em seguida, ele relata e rastreia o evento, coletando os dados sobre a compra do usuário, como o tipo de produto que foi comprado, o preço e a quantidade.
No código , trackEvent () é usado da seguinte forma:
import {View, Text, TouchableOpacity, TouchableHighlight} de'react-native';
importar Analytics de'appcenter-analytics'; exportar aplicativo padrão () {
const __OnBuyButtonPressed=()=> { Analytics.trackEvent ('Comprar', {preço:'9,99', tipo:'pano'});
}
Retorna( Continue
)}
Os eventos personalizados também podem coletar dados exclusivos. Por exemplo, podemos criar um evento personalizado para ações de navegação para ver como o usuário navega pelo aplicativo.
Com os dados do evento coletados e enviados ao painel do App Center, vemos todos os registros, eventos, dados do sistema operacional, informações do dispositivo e muito mais que podem nos ajudar a identificar a melhor forma de atender às experiências de nossos usuários.
Um dos outros benefícios de usar o AppCenter Analytics é que os dados podem ser vinculados e exportados para o Azure, o que dá aos usuários acesso a recursos como o Azure Application Insights para ajudar a analisar os dados.
Google Analytics para Firebase
Anteriormente conhecido simplesmente como Firebase Analytics, Google Analytics para Firebase oferece suporte React Native também. Ele rastreia o comportamento do usuário usando eventos personalizados e predefinidos e pode ser integrado ao Firebase SDK.
Como um dos serviços de nuvem mais populares no desenvolvimento móvel, o Firebase oferece suporte à maioria das plataformas e pode ser usado em qualquer lugar. É fácil de integrar com o React Native, e suas funcionalidades simples o tornaram popular entre a comunidade de desenvolvedores.
Uso do Firebase
Para usar os recursos do Firebase SDK no React Native, instalaremos o react-native-firebase , que é um projeto de código aberto que integra o Firebase SDK no React Native.
Configuração do Firebase
Primeiro, devemos criar um novo aplicativo no Firebase console e gerar credenciais. No console, selecione Criar um projeto para criar um novo aplicativo e siga as instruções.
Assim que o projeto for criado, clique no botão iOS .
Uma nova janela é exibida, solicitando-nos a inserção de informaçõesI de um identificador de pacote iOS para registrar nosso aplicativo.
Para obter o identificador do pacote, abra o projeto no Xcode, abra a guia Geral e copie o texto no campo Identificador do pacote .
O arquivo GoogleService-Info.plist contendo as credenciais do Firebase é gerado automaticamente após clicar em Registrar aplicativo ; agora podemos baixar o arquivo.
Em seguida, copie e cole o arquivo dentro do diretório projeto no Xcode.
Instalação de dependências do React Native no Firebase
Depois de criar o novo aplicativo no Firebase console, estamos prontos para instalar as dependências do React Native.
Adicione o pacote usando Yarn ou npm , como o seguinte:
yarn add @ react-native-firebase/app //com npm npm install @ react-native-firebase/app
Em seguida, adicione o módulo de análise:
yarn add @ react-native-firebase/analytics
Se estiver usando uma versão React Native anterior a 0,60, execute react-native link para vincular os pacotes. Caso contrário, usar uma versão mais recente vinculará os pacotes automaticamente.
Depois de vincular os pacotes, instale os pods iOS no diretório project executando o comando abaixo:
cd iOS && pod install
Isso instala as dependências necessárias para iOS.
Para inicializar o aplicativo Firebase, adicione as seguintes linhas de código a AppDelegate.m :
@import UIKit;
@import Firebase; @implementation AppDelegate -(BOOL) aplicativo: (UIApplication *) aplicativo didFinishLaunchingWithOptions: (NSDictionary *) launchOptions { [Configurar FIRApp]; retornar SIM;
}
Agora, clique no ícone Build ou digite Command + B dentro do Xcode. Se não houver problemas, podemos ver os registros e os insights no painel do console do Firebase. No entanto, pode levar algum tempo para que os dados sejam preenchidos.
Executando o Google Analytics para Firebase
O uso básico do Google Analytics para Firebase com o código React Native é semelhante a outras ferramentas analíticas sobre as quais falamos neste post. A diferença, porém, é o nome dos métodos.
Como o Firebase tem vários métodos integrados com nomes significativos para eventos, os desenvolvedores têm uma experiência mais fácil e eficiente ao trabalhar com eles.
O uso básico dentro do código React Native é mostrado abaixo. Simulando um evento Purchase quando o usuário clica no botão Comprar , o método Analytics (). LogEvent () registra os detalhes da compra:
importar Analytics de'@ react-native-firebase/analytics';
import {View, Text, TouchableOpacity, TouchableHighlight} de'react-native';
importar Analytics de'appcenter-analytics'; exportar aplicativo padrão () {
const __OnBuyButtonPressed=async ()=> { aguarde Analytics (). logEvent ('Compra', {preço:'9,99', digite:'pano'});
}
Retorna( Continue
)}
Por exemplo, se nosso aplicativo fornece um serviço de comércio eletrônico ou uma loja online, o Firebase oferece métodos específicos para rastrear eventos de loja online , como o evento Adicionar ao carrinho, que usa o método logAddToCart () .
Outros métodos incluem:
-
logLogin ()rastreia o evento de login -
logAppOpen ()é chamado quando o aplicativo é aberto -
logShare ()rastreia atividades de compartilhamento dentro do aplicativo
Você pode encontrar todos os outros métodos predefinidos do Firebase aqui .
Como o Firebase oferece suporte a muitos aplicativos de plataforma cruzada, os métodos do Firebase são fáceis de usar, mesmo ao alternar de uma linguagem de programação para outra. Por exemplo, trabalhar com o código do Firebase e os métodos em Swift são iguais aos de JavaScript, tornando a transição mais fácil.
Para encontrar os métodos que usaremos, vamos para os logs de eventos na guia Eventos mostrada abaixo.
Também podemos ver insights por meio do próprio Google Analytics . No entanto, devemos ter a mesma conta configurada para Firebase que a conta do Google Analytics.
Análise de segmento
Segment é um coletor de dados e plataforma analítica com suporte de API para plataformas cruzadas e tecnologias populares como iOS, Android,.NET e Python. Ao hospedar dados em qualquer lugar por meio de um host de nossa escolha, a Segment pode enviar os dados coletados a seus servidores ou a qualquer outro segmento com suporte serviços como o Google Analytics.
Com o Segment, podemos buscar dados usando consultas SQL como as seguintes:
/* @copyright https://github.com/segmentio/analytics-react-native */ select * from app.order_completed pedido por preço desc
Um dos outros benefícios de usar o segmento é a capacidade de controlar dados. Se quisermos focar na privacidade do usuário , por exemplo, o segmento nos permite controlar e definir regras sobre quais dados devem ser coletados e classifique e restrinja o acesso a tipos específicos de dados.
Configuração e uso do segmento
Para instalar os pacotes analytics-react-native para Segment , podemos usar Yarn ou npm.
Neste caso, usaremos o Yarn instalando o código abaixo em nosso terminal:
yarn add @ segment/analytics-react-native-firebase //instalar pods cd ios && pod install
Para iniciar e se conectar com a API de segmento, adicione o seguinte código dentro de app.js ou qualquer outro arquivo usando o módulo de análise de segmento:
await analytics.setup ('YOUR_WRITE_KEY', { //Grave visualizações de tela automaticamente! recordScreenViews: true, //Grave determinados eventos do aplicativo automaticamente! trackAppLifecycleEvents: true
})
Revise a documentação do segmento para gerar a chave de gravação.
Podemos então personalizar a configuração, definir como os dados são coletados e habilitar algumas funcionalidades baseadas na plataforma, conforme mostrado no código abaixo:
//@ https://github.com/segmentio/analytics-react-native#cloud-based-connection-modes importar análises de'@ segment/analytics-react-native'
importar firebase de'@ segment/analytics-react-native-firebase' analítica .setup ('writeKey', { usando: [mixpanel, firebase], recordScreenViews: true, trackAppLifecycleEvents: true, android: { flushInterval: 60000,//60 segundos collectDeviceId: true }, ios: { trackAdvertising: true, trackDeepLinks: true } }) .então (()=> console.log ('Analytics está pronto') ) .catch (errar=> console.error ('Algo deu errado', err) ) analytics.track ('Pizza Eaten')
analytics.screen ('Página inicial')
Vamos analisar algumas propriedades e para que servem:
-
Usingé um conjunto de ferramentas analíticas externas usadas com o Segment que pode enviar dados a um serviço analítico de terceiros como o Google Analytics -
recordScreenViewsrastreia o número de vezes que uma tela é visualizada pelos usuários -
trackAppLifecycleEventsrastreia eventos de ciclo de vida do aplicativo, como quando o aplicativo é instalado ou se está em segundo ou primeiro plano
Depois de personalizar a configuração, podemos começar a despachar os eventos usando o método Analytics.track () :
analytics.track ('Purchase', null, context: {price:"9,99", productType:"auto"})
analytics.screen ('Produto')
O segmento oferece muitos outros métodos de rastreamento, como analytics.identify () , que anexa um evento a um usuário específico e pode ser útil no rastreamento de usuários únicos:
#/*https://segment.com/docs/connections/sources/catalog/libraries/mobile/react-native/#tracking-methods */
analytics.identify ("userId", { email:"[email protected]" nome:"John Smith"
})
Ferramenta de bônus: Facebook Analytics
Devido ao seu suporte inicial e direto no React Native, o Facebook Analytics se tornou um dos mais populares React Native ferramentas analíticas. Infelizmente, o SDK do Facebook para React Native está obsoleto e não terá mais suporte a partir de 30 de junho de 2021. No entanto, ainda há um fork da comunidade disponível que você pode usar como alternativa: react-native-dbsdk-next .
Concluindo
Com essas ferramentas analíticas populares do React Native, há benefícios para cada um, mas a escolha da ferramenta a ser usada depende do tipo de projeto e das necessidades desse projeto. Embora o Segment seja ideal para controlar dados e privacidade, o Google Analytics para Firebase tem melhor suporte no React Native e o App Center Analytics tem acesso aos recursos do Azure. Com essas ferramentas de análise, suas diferentes funcionalidades tornam a análise mais fácil e mais eficiente para aplicativos no React Native.
A postagem Comparando ferramentas de análise React Native apareceu primeiro em LogRocket Blog .
