Antes de mais nada, 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 traz vários outros recursos. Para conferir tudo o que ele tem a oferecer, acesse a documentação clicando aqui.

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

Caso não saiba integrar o Firebase com o Ionic, dê uma olhada no seguinte artigo:

• Integrando Firebase no seu aplicativo Ionic

Se você seguiu meu artigo “Integrando Firebase no seu aplicativo Ionic” explicando como integrar o Ionic com Firebase, você já fez a integração. Faremos apenas a parte referente ao Analytics.

Atenção: se a 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 eventLogger da 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 artigo 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

Agora vamos acessar nossa página home.page.html, onde colocaremos 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:

Agora em home.page.ts codificaremos nossa função logClick(). Primeiro vamos importar o EventLogger e injetar no construtor.

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

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

logClick() {

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

}

Ficando assim:

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:

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.

Depois rodaremos em nosso dispositivo para testar!

ionic cordova run android --device

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

Agora, voltando em Firebase Console, você irá acessar esse 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.

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á StreamView > Eventos > Tendencias.

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

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 à vontade para acessar.

Gostou? Deixe um comentário.