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

📘
Caso queiram verificar os logs da Inngage enquanto estão desenvolvendo, basta implementar no seu código o método Inngage.setDebugMode(true).

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

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

📘
Recomendamos instalar nas versões conforme descritas nesta documentação.

Importando o FCM Token (API Key)

Instalando o package utilizando o NPM

Inclusão da dependência

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

Implementando a SDK

Notificações push

Inngage.Subscribe()

📘
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()

📘
Caso queiram verificar os logs da Inngage enquanto estão desenvolvendo, basta implementar no seu código o método `Inngage.setDebugMode(true)`.

Personalização (para sua identidade)

Atualizando e/ou adicionando novos Campos Personalizados

🚧
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

In App Messages

👍
Você está pronto para começar!

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

Instalação

Ambiente de desenvolvimento

📘Recomendamos instalar nas versões conforme descritas nesta documentação.

Importando o FCM Token (API Key)

Instalando o package utilizando o NPM

Inclusão da dependência

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

Implementando a SDK

Notificações push

Inngage.Subscribe()

📘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()

📘Caso queiram verificar os logs da Inngage enquanto estão desenvolvendo, basta implementar no seu código o método Inngage.setDebugMode(true).

Personalização (para sua identidade)

Atualizando e/ou adicionando novos Campos Personalizados

🚧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

In App Messages

👍Você está pronto para começar!

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

📘
Recomendamos instalar nas versões conforme descritas nesta documentação.

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

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

📘
Caso queiram verificar os logs da Inngage enquanto estão desenvolvendo, basta implementar no seu código o método `Inngage.setDebugMode(true)`.

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

👍
Você está pronto para começar!