Ionic com Firebase Analytics

Firebase Analytics para Ionic Apps.

Neste tutorial vou explicar como usar Firebase Analytics em seus Aplicativos Ionic 4 e criar eventos personalizados.

Primeiramente você deve saber que o Google Analytics está perto de descontinuar ( mais precisamente em outubro de 2019). Então, caso você ainda use o Google Analytics, é importante se preparar pra fazer a migração para o Firebase o quanto antes. A boa notícia é que o Firebase além do recurso Analytics também trás vários outros recursos. Para conferir tudo o que ele tem a oferecer, você pode acessar a documentação clicando aqui.

⚠ No tutorial eu vou explicar como fazer usando Ionic 4+ mas também ensino como adaptar para funcionar no seu Ionic versões inferiores. ⚠


Caso você não saiba integrar o Firebase com o Ionic, dá uma olhada no tutorial Como Integrar Firebase em Ionic Apps .

Se você seguiu meu tutorial Como Integrar Firebase em Ionic Apps explicando como integrar o Ionic com Firebase, você já fez a integração, faremos apenas a parte referente ao Analytics.

📢 ATENÇÃO: Se sua versão Ionic for inferior a versão 4, siga as instruções abaixo:

📌 Se você está usando Ionic inferior a versão 4, não existe a nomenclatura Service, portanto você não vai conseguir gerar o eventLoggerda forma como eu mencionei abaixo, isso porque antes ele usava a nomenclatura Provider, para isso use o comando: ionic g provider eventLogger

📌Seu plugin ionic-native/firebase-analytics deve ser instalado na sua versão 4, ficando assim em seu package.json: "@ionic-native/firebase-analytics": "4.0.0"

📌E a importação também muda para: import { FirebaseAnalytics } from '@ionic-native/firebase-analytics';

📌Faça essas alterações no decorrer do tutorial, e dará tudo certo.


Voltando ao passo a passo…

Primeiro vamos instalar o plugin cordova-plugin-firebase-analytics. Para isso execute esses dois comandos:

ionic cordova plugin add cordova-plugin-firebase-analytics
npm install --save @ionic-native/firebase-analytics

Depois disso, vamos gerar um serviço onde terá nosso método de registro.

ionic g service services/eventLogger
Gif: Gerando o Serviço EventLogger

Agora, vamos acessar nossa página home.page.html, onde iremos colocar o esse trecho de código. Que nada mais é que um botão com um evento click associado a funçãologClick()

<button ion-button full (click)="logClick()">Botão Evento Customizado</button>

Ficará assim:

Gif: Adicionando o Botão logClick

Agora em home.page.ts iremos codificar nossa função logClick(). Primeiro iremos importar o EventLoggere injetar no construtor.

import { EventLoggerService } from '../services/event-logger.service';
constructor(public logger: EventLoggerService) {}

Depois criaremos nossa função logClick() . Dentro desta função, temos o this.logger.logButton()método que aceita uma string e um objeto como parâmetros.

logClick() {
this.logger.logButton('firebaseEventBtn',{ pram: "paramValue" })
console.log('Fui clicado!');
}

Ficando assim:

Gif: Implementando a função logClick

Depois disso, vamos para nosso serviço eventLogger . Aqui usamos o Firebase Analytics para registrar o evento. Estamos importando o firebase-analytics.

import { FirebaseAnalytics } from '@ionic-native/firebase-analytics/ngx';

Depois injetando em nosso constructor:

constructor(public fba: FirebaseAnalytics)

Dentro do método logButton(), estamos usando o logEvent()o método de análise do Firebase.

logButton(name: string, value: any) {
this.fba
.logEvent(name, { pram: value })
.then((res: any) => {
console.log(res);
})
.catch((error: any) => console.error(error));
}

Ficando assim:

Gif: Implementando o serviço eventLogger

O método logEvent()aceita dois parâmetros, um é o nome do evento que você quer registrar, e o outro são os parâmetros que você quer registrar nesse evento. Como alternativa, também é possível usar nomes de eventos e nomes de parâmetros predefinidos .

Lembrando que não podemos esquecer de registrar o nosso EventLoggerService e o FirebaseAnalytics em nosso app.module.ts

Gif: Registrando Serviço EventLogger e o FirebaseAnalytics

Depois iremos rodar em nosso dispositivo e testar!

ionic cordova run android --device
Gif: Testando evento Firebase Analytics

Como podemos observar, conseguimos testar no aplicativo, sem nenhum erro.

Agora voltando em Firebase Console você irá acessar este caminho para ver seu evento customizado registrado: Analytics ➡ Events.

Verá que está registrado seu evento personalizado firebaseEventBtn junto com os outros eventos automáticos do Firebase.

Gif: Verificando o registro do evento customizado.

Algumas considerações finais 

📌Os eventos customizados podem levar até 24 horas para aparecerem no Firebase Console, mas eu achei uma forma de saber se ele está escutando corretamente, sem ter que esperar todo esse tempo. No momento em que você estiver testando seu app, você acessará o StreamView ➡Eventos ➡ Tendencias

Se estiver constando como abaixo e não estiver apontando nenhum erro, deu certo! Apenas check em events, que em até 24 horas ele estará registrado.

Gif: Checando se não tivemos erro no evento, olhando no StreamView

📌Existem algumas regras no momento de registrar um evento, por exemplo: Não usar espaços, caracteres especiais e nem acentos. Então, siga a convenção de nomenclatura mencionada na documentação.


📍Deixei disponível este exemplo no meu git, fique a vontade para acessar! 😀

Gostou? Dá 👏