React Native SDK (old version)

ūüďė

A versão mais recente da SDK React Native é a v3.1.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"
}

ūüďė

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.1.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.

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.

Inngage.SendEvent(
  {
    newEventRequest: {
      app_token: "appToken", // Trocar pelo App Token do aplicativo
      identifier: "identifier", // Trocar pelo objeto Identificador do usu√°rio
      event_name: "Acessou PROMO", // Exemplo
      conversion_event: true,
      conversion_value: 1000.00,
      conversion_notid: "2314klbkf41bsgav4hg12ab24v1h41", // Exemplo
      event_values: { // Exemplo
        nome_promo: "10OFF", 
        categoria: "Fast Food",
        foto_promo: "https://inngage.com.br/wp-content/uploads/2021/08/calcular-efetividade-push-1.png",
        redirect_link: "https://inngage.com.br/21njnfa"
      }
    }
  }
)

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: √Č usado para identificar o usu√°rio dentro do sistema.

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: