Guides
GuidesAPI ReferenceHome

Integração React Native 0.66.x

Este tutorial tem como objetivo, guiar os desenvolvedores que desejam integrar seus aplicativos desenvolvidos em React Native.

Suggest Edits

Recomendamos que você use a versão estável mais recente do React Native, definida em package.json.
A Inngage SDK React Native 3.0.4 foi verificado pela última vez na versão:

"react": "18.2.0",
"react-native": "0.71.6",
 "typescript": "^5.0.4"

Se o seu app se encontra na versão 0.66.x siga o seguinte passo-a-passo para realizar a integração da Inngage com seu app.

1. Configuração do projeto no Firebase

2. Configuração no painel Inngage

3. Configuração nativa iOS

4. Configuração nativa Android



Após fazer as configurações necessárias para que o seu código tenha acesso nativo às push notifications do Firebase iremos instalar a SDK da Inngage

1. Preparando o ambiente de produção

Instale as seguintes dependências externas que a SDK utiliza.

"@react-native-firebase/app": "^17.4.2",
"@react-native-firebase/messaging": "^17.4.2",
"react-native-localize": "^2.2.6",
"@react-native-async-storage/async-storage": "^1.18.1",
"react-native-inappbrowser-reborn": "^3.7.0",
"@react-native-community/push-notification-ios": "^1.11.0",
"react-native-push-notification": "^8.1.1",
"react-native-device-info": "^10.6.0"

2. Implementando a SDK

Importe 'GetPermission' do módulo da SDK.

import Inngage from '@inngageregistry/inngage-react'

Este método deve ser chamado para que o usuário seja informado da chegada das notificações, deve sempre chamado dentro do 'index.ts'.

Essa função é responsável por autorizar o acesso à API da Inngage e ao Firebase Cloud Messaging e ativar os listeners de notificações.

let request = {
    enableAlert: true, //Caso não deseje apresentar o alert com o conteúdo do Push após clicado trocar para false
  	appToken:'token', // Seu token da Inngage
  	onNotificationOpenedApp:(remoteMessage){} // Caso queira um callback das informações do push aberto 
  	
    }
    await Inngage.RegisterNotificationListener(request);
}

3. Registro de usuário

Esse método é responsável por realizar o registro / subscription do usuário na plataforma Inngage, e pode ser utilizado em qualquer momento desejado, como quando o usuário abre o app, no momento do login ou cadastro, entre outros.

Recomendamos que esse método seja chamado a cada nova sessão do usuário, pois utilizamos esse método para registrar as sessões do usuário na plataforma Inngage.

let request = {
      friendlyIdentifier: 'identificador',//identificador amigável do usuário, informar null em caso de usuário sem identificador
		phoneNumer: 'telefone do usuário', // Padrão 5511999991234
      email:'email do usuario', // Padrão '[email protected]'
      appToken: '{Trocar pelo App_Token do aplicativo}',
  		authKey: 'Adicionar Authorization Key gerada no painel Inngage', //Opcional
      PROD: true,//Sempre true
      customData: false,//Enviar true quando estiver mandando custom fields abaixo
      customFields: {
      }
    }
    await Inngage.Subscription(request);
}

4. In App Messages

A SDK React Native da Inngage tem a capacidade de disponibilizar ao usuários In App Messages. As mensagens podem ser enviadas tanto pela plataforma e pela API, e automaticamente é apresentada de acordo com as configurações recebidas no payload do Firebase.

Para apresentar importe o conteúdo a seguir em cada tela que deseja possibilitar a apresentação de uma in app message.

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

A propriedade on close do componente define se as mensagens serão apagadas, ou se será mantido o registro de mensagens. Onde o parâmetro clear define que ao fechar a In App Message apaga todas as mensagens da Stack e se não for definido permanece.

<Inapp onClose='clear'/>

5. Registrando eventos para o usuário

A SDK permite ao desenvolvedor que está integrando a SDK, enviar eventos customizados. Lembre-se de configura-los na plataforma Inngage.

Inngage.SendEvent(
  {
    newEventRequest: {
      app_token: "177d3286eb87ab2d94efb0da3eb87c9f",
      identifier: "[email protected]",
      event_name: "acessou_promo",
      conversion_event: true,
      conversion_value: 1090.00,
      conversion_notid: "2314klbkf41bsgav4hg12ab24v1h41",
      event_values: {
        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"
      }
    },
    authKey: 'Adicionar Authorization Key gerada no painel Inngage', //Opcional
  }
)

Temos 3 valores que sao obrigatórios para podermos ter uma boa performance e integração com Inngage

eventName: Define o nome que voce ira enviar para voce poder identificar de forma rápida na plataforma
appToken: Precisamos validar suas credenciais.
Identifier ou registration (Firebase token): usamos pra identificar o usuario, pelo menos uma deve ser informada;

Junto de um evento, pode ser enviados valores atribuídos a esse evento
eventValues: Array de objetos e valores.

A API de eventos também pode receber um evento de conversão, para isso existem os campos
conversion_event: True
conversion_value: Valor monetário da conversão (Padrão 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, para assim atribuir uma conversão a determinado Push

📘

Projeto Sample

Disponibilizamos um projeto sample com a implementação da SDK. Você pode acessa-lo aqui:
https://github.com/inngage/inngage-react-native-sample

Updated about 1 year ago