React Native SDK

ūüďė

A versão mais recente da SDK React Native é a v3.3.0, que está disponível atualmente.

Instalação

Ambiente de desenvolvimento

Antes de começar a utilizar nossa SDK, instale as dependências externas utilizadas:

"dependencies": {
  "@react-native-async-storage/async-storage": "^1.18.1",
  "@react-native-firebase/app": "^18.6.1",
  "@react-native-firebase/messaging": "^18.6.1",
  "react-native-device-info": "^10.6.0",
  "react-native-inappbrowser-reborn": "^3.6.3",
  "react-native-localize": "^2.2.6",
  "react-native-snap-carousel": "^3.9.1",
  "react-native-permissions": "^3.8.0",
}

ūüďė

Recomendamos instalar nas vers√Ķes conforme descritas nesta documenta√ß√£o.

Importando o FCM Token (API Key)

Para aproveitar nossos SDKs, será necessário importar o FCM Token (API Key) do seu projeto Firebase em nossa plataforma. Siga o passo a passo neste link para executar essa ação.

Instalando o package utilizando o NPM

Para adicionar o SDK Flutter da Inngage ao seu projeto, execute o seguinte comando utilizando o NPM:

npm i @inngageregistry/inngage-react

Este comando adiciona a seguinte linha no arquivo package.json de seu pacote:

"dependencies": {
	"@inngageregistry/inngage-react": "^3.3.0",
}

Inclusão da dependência

Após configurar o SDK React Native da Inngage, é simples importá-lo em seu projeto. Para isso, basta adicionar o pacote ao seu código:

import Inngage from '@inngageregistry/inngage-react'

ūüöß

Recomendamos que voc√™ utilize a vers√£o est√°vel mais recente do React Native, definida no arquivo package.json. A Inngage SDK React Native 3.0.4 foi verificada pela √ļltima vez na vers√£o: React Native 0.71.6 ‚ÄĘ canal est√°vel.

Vers√Ķes suportadas:

"react": "18.2.0", "react-native": "0.72.6"e "typescript": "^5.0.4"


Implementando a SDK

Notifica√ß√Ķes push

As notifica√ß√Ķes ser√£o enviadas do servidor da Inngage para um ou mais dispositivos m√≥veis, mesmo quando o aplicativo estiver em primeiro plano, segundo plano ou at√© mesmo fechado. Essas mensagens t√™m o objetivo de alertar o usu√°rio sobre informa√ß√Ķes importantes, atualiza√ß√Ķes ou qualquer outro dado relevante relacionado ao seu aplicativo.

As notifica√ß√Ķes push aparecem na tela de bloqueio ou na barra de notifica√ß√Ķes do dispositivo. Quando o usu√°rio toca na notifica√ß√£o, o aplicativo √© aberto e pode direcion√°-lo para uma p√°gina espec√≠fica ou exibir mais detalhes sobre o conte√ļdo da notifica√ß√£o.

Inngage.Subscribe()

Esta fun√ß√£o desempenha a fun√ß√£o de registrar ou inscrever o usu√°rio na plataforma Inngage, sendo aplic√°vel em diversas ocasi√Ķes, como ao abrir o aplicativo, durante o processo de login, ou ao se cadastrar, entre outras situa√ß√Ķes oportunas. Geralmente, √© chamado no arquivo index.ts, mas, dependendo da arquitetura do seu aplicativo, pode ser chamado dentro de uma classe ou fun√ß√£o.

let subscription = {
  appToken: "Trocar pelo App Token do aplicativo",
  friendlyIdentifier: "Trocar pelo objeto Identificador do usu√°rio",
  customData: false, // Caso queira enviar campos customizados, preencha como "true"
  customFields: {}, // Caso queira adicionar campos personalizados. (o par√Ęmetro "customData" deve estar preenchido como "true")
  phoneNumer: "Trocar pelo telefone do usu√°rio", // Campo opcional. Ex: "5511999991234"
  email:'Trocar pelo email do usu√°rio', // Campo opcional. Ex: "[email protected]"
}

async function InngageSubscribeSDK() {
  await Inngage.Subscribe(subscription);
}
InngageSubscribeSDK();

O trecho de c√≥digo menciona alguns par√Ęmetros e funcionalidades do Inngage SDK no contexto do React Native. Aqui est√° uma explica√ß√£o das principais informa√ß√Ķes:

  • appToken: √Č o token do aplicativo na plataforma Inngage, essencial para a comunica√ß√£o com os servi√ßos da Inngage.
  • friendlyIdentifier: √Č usado para identificar o usu√°rio dentro do sistema. Esse par√Ęmetro deve ser preenchido para que o usu√°rio possa ser corretamente associado e receber as notifica√ß√Ķes push de forma personalizada.
  • customData: O valor padr√£o √© false. Caso deseja utilizar campos personalizados, preencha o par√Ęmetro com o valor true.
  • customFields: Este par√Ęmetro permite ao desenvolvedor adicionar campos personalizados, como: nome, email, g√™nero, etc. Eles devem antes ser configurados na plataforma da Inngage.
  • phoneNumber: Voc√™ pode registrar o n√ļmero de telefone/celular do usu√°rio. O par√Ęmetro √© opcional.
  • email: Voc√™ pode registrar o email do usu√°rio. O par√Ęmetro √© opcional.

ūüďė

Para assegurar uma rastreabilidade completa das atividades do usu√°rio, Recomendamos que esse m√©todo seja chamado a cada nova sess√£o do usu√°rio. Essa pr√°tica √© particularmente relevante, pois utilizamos esse m√©todo para registrar as sess√Ķes do usu√°rio na plataforma Inngage.

Inngage.RegisterNotificationListener()

Essa fun√ß√£o √© respons√°vel em realizar as configura√ß√Ķes de push no aplicativo e, principalmente, solicitar o acesso √†s notifica√ß√Ķes do usu√°rio. Deve ser chamado dentro do m√©todo de ciclo de vida do React, dependendo do seu aplicativo, pode ser chamado dentro do useEffect ou componentDidMount.

let notification = {
  appToken: 'Trocar pelo App Token do aplicativo', // Seu token da Inngage
  enableAlert: false,
  onNotificationOpenedApp: (remoteMessage) => { console.log(remoteMessage) } // Caso queira um callback das informa√ß√Ķes do push ap√≥s aberto. 
}

useEffect(() => {
  async function InngageNotificationSDK() {
    await Inngage.RegisterNotificationListener(notification);
  }
  InngageNotificationSDK();
})

Aqui est√° uma explica√ß√£o das principais informa√ß√Ķes mencionadas dos par√Ęmetros e suas funcionalidades:

  • appToken: √Č o token do aplicativo na plataforma Inngage, essencial para a comunica√ß√£o com os servi√ßos da Inngage.
  • enableAlert: Caso deseja apresentar o Alert com o conte√ļdo do push ap√≥s clicado, preencha o par√Ęmetro com o valor true, do contr√°rio como false.
  • onNotificationOpenedApp: Permite que uma fun√ß√£o seja passada para ser chamada quando o aplicativo estiver em segundo plano e receber uma notifica√ß√£o push contendo os dados da notifica√ß√£o pelo remoteMessage.

Ao executar essa fun√ß√£o, o aplicativo informa ao sistema operacional que deseja receber notifica√ß√Ķes push e √© autorizado a faz√™-lo, desde que o usu√°rio conceda permiss√£o para receber tais notifica√ß√Ķes.

Personalização (para sua identidade)

Atualizando e/ou adicionando novos Campos Personalizados

Com o método addUserData(), você poderá atualizar o valor do campo personalizado configurado no Inngage.Subscribe(). Além disso, é possível adicionar um novo campo, inserindo-o no método. Dessa maneira, mesmo que você chame o Subscribe novamente sem ter configurado o novo campo nele, ele será carregado automaticamente.

await Inngage.addUserData({
  "name": "Inngage",
  "age": 20,
  "login": "ativo"
})

√Č importante ressaltar que todos os campos personaliz√°veis devem ser configurados na plataforma, sendo o nome do campo na plataforma exatamente igual ao que for configurado no c√≥digo.

ūüöß

Se o campo tiver um valor definido no método Subscribe, ao passar por ele novamente, o valor do campo será definido conforme estiver nesse método, e não como foi configurado no addUserData.

Envio de eventos

A SDK permite que o desenvolvedor que est√° integrando a SDK envie eventos customizados. √Č importante configur√°-los na plataforma Inngage para garantir uma boa performance e integra√ß√£o.

let event = {
    appToken: "36174c4746e84f49fa822076b0b859d1", // Trocar pelo App Token do aplicativo
    identifier: "@inngage-react", // Trocar pelo objeto Identificador do usu√°rio. Opcional: "identifier" ou "registration"
    registration: "daUxLcpRQX-L8ZoVlacU64:APA91bGMFAn5WllgUP36Y7", // Trocar pelo fcm token. Opcional: "registration" ou "identifier"
    eventName: "dados_usuario",
    conversionEvent: true, // (Opcional)
    conversionValue: 1090.00, // Valor monet√°rio da convers√£o. (Opcional)
    conversionNotId: "2314klbkf41bsgav4hg12ab24v1h41", // ID da mensagem (Opcional)
    eventValues: {
      "produto": 'Bola de tenis',
    	"valor": '40' 
    } // Exemplo de valores. (Opcional)
}

async function InngageSendEvent() {
  await Inngage.SendEvent(event)
}

Existem três valores obrigatórios para garantir o correto funcionamento:

  • eventName: Define o nome do evento, que ser√° usado para identific√°-lo rapidamente na plataforma.
  • appToken: √Č necess√°rio para validar suas credenciais.
  • identifier ou registration: √Č poss√≠vel utilizar o identifier (identificador do usu√°rio) ou registration (token do firebase) para identificar o(s) usu√°rio(s) dentro do sistema. Somente um dos par√Ęmetros deve ser definido.

Voc√™ tamb√©m pode adicionar valores avan√ßados para esse evento usando o par√Ęmetro event_values, que √© um array contendo chaves e valores com dados que ser√£o anexados ao evento.

A API de eventos também pode receber um evento de conversão, para isso, existem os seguintes campos:

  • conversion_event: Defina como True para indicar que √© um evento de convers√£o.
  • conversion_value: Esse campo permite inserir o valor monet√°rio da convers√£o. O valor padr√£o √© FLOAT 11000.00.
  • conversion_notid: Op√ß√£o para enviar o ID √önico da Notifica√ß√£o da Inngage (NOTID), que foi recebido pelo app no momento do Push. Isso possibilita atribuir uma convers√£o a um determinado Push."

In App Messages

A SDK React Native da Inngage possibilita a exibi√ß√£o de Mensagens In App para os usu√°rios. Essas mensagens podem ser enviadas tanto pela plataforma quanto pela API e s√£o automaticamente apresentadas com base nas configura√ß√Ķes recebidas pelo payload do Firebase.

Para apresentar a mensagem In App, importe o Inapp em seu projeto:

import { Inapp } from '@inngageregistry/inngage-react';

A propriedade onClose do componente determina o comportamento relacionado √† reten√ß√£o ou exclus√£o de mensagens. Quando o valor definido for clear, ao fechar a In App Message, todas as mensagens da Stack ser√£o apagadas. Por outro lado, se esse par√Ęmetro n√£o for especificado, as mensagens permanecer√£o.

<Inapp onClose='clear'/>

ūüĎć

Você está pronto para começar!

Seguindo os passos acima da documentação você estará pronto para utilizar todas as ferramentas necessárias para as funcionalidades da SDK. :clap: