Guides
GuidesAPI ReferenceHome

Ionic SDK

Suggest Edits

📘

A versão mais recente da SDK Ionic é a v1.0.0, que está disponível atualmente.

Passos da integração

1. Configuração do projeto no Firebase
2. Configuração no painel Inngage

3. Configuração nativa Android

4. Configuração nativa iOS

Instalação

Ambiente de desenvolvimento

Antes de começar a utilizar nossa SDK, verifique se o seu ambiente de desenvolvimento possui o @ionic/cli , @angular/cli e o Apache Cordova, como estrutura de desenvolvimento do projeto.

Instalando as dependências

Instale as dependências externas utilizadas:

"dependencies": {
  "@awesome-cordova-plugins/app-version": "^6.14.0",
  "@awesome-cordova-plugins/device": "^6.12.0",
  "@awesome-cordova-plugins/local-notifications": "^6.14.0",
  "@awesome-cordova-plugins/globalization": "^6.14.0",
}
"devDependencies": {
  "cordova-plugin-firebase-messaging": "^8.0.1",
},

📘

Recomendação: Certifique-se de instalar as versões conforme especificado 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 nosso package

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

npm i @inngageregistry/inngageionic

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

"dependencies": {
	"@inngageregistry/inngageionic": "^1.0.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 'inngageionic';

🚧

Recomendamos que você utilize a versão estável do Ionic, definida no arquivo package.json. A SDK foi verificada pela última vez na versão: Ionic 7 / Angular 17 / Cordova 12 • canal estável.

Versões suportadas:

"Ionic CLI": "7.2.0", "Angular CLI": "17.3.11"e "Cordova CLI": "12.0.0"

Implementando a SDK

📘

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

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.

async subscribe() {
  let subscription = {
    appToken: "ac0ad546359b528d4ecfae258266d23d",
    friendlyIdentifier: "[email protected]",
    customFields: {
      "name": "Saulo",
      "age": 27,
      "login": "inativo"
    },
  }

  try {
    await Inngage.subscribe(subscription);
  } catch (error) {
    console.error("Erro ao registrar usuário:", error);
  }
}

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

InngageNotificationMessage.notificationMessage()

Essa função é responsável em realizar as configurações de push no aplicativo.

Essa solicitação de acesso é fundamental para garantir que o aplicativo possa receber e exibir notificações push enviadas pela plataforma Inngage. É importante garantir que o método InngageNotificationMessage.notificationMessage() seja chamado corretamente no aplicativo para habilitar as notificações push e configurar adequadamente o sistema de notificação do usuário.

async notification() {
  await InngageNotificationMessage.notificationMessage((data: any) => {
    if (data != null) {
      console.log('receive: ', data);
    }
  });
}

O parâmetro data contém informações da notificação push recebida.

📘

No método de callback ngOnInit() adicione os métodos configurados da Inngage.

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.

onClickEvent() {
  let event = {
    eventName: "ionic_event",
    conversionEvent: true,
    conversionValue: 1090.00,
    conversionNotId: "2314klbkf41bsgav4hg12ab24v1h41",
    eventValues: {
      "nome_sdk": 'Inngage Ionic',
      "valor": '40'
    }
  }
  Inngage.sendEvent(event);
}

Existem 1 campo obrigatório para garantir o correto funcionamento:

  • eventName: Define o nome do evento, que será usado para identificá-lo rapidamente na plataforma.

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

👍

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

Updated 12 days ago