dharma-ui-analyitcs

Motivação:

O dharma UI Analytics tem como objetivo fornecer dados de navegação do usuário e trackear os movimentos do usuário no site

O que o Dharma Analytics oferece:

• Dotz Analytics
• Google Analytics
• Tracker GTM - Google

Versões recomendadas para o Dharma UI Versão ^8.0.0

{
    "@angular/animations": "~11.1.0",
    "@angular/common": "~11.1.0",
    "@angular/compiler": "~11.1.0",
    "@angular/core": "~11.1.0",
    "@angular/forms": "~11.1.0",
    "@angular/platform-browser": "~11.1.0",
    "@angular/platform-browser-dynamic": "~11.1.0",
    "@angular/router": "~11.1.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
}

Sumário:

Vamos instalar o dharma-ui-analytics:

Instale o módulo

$ npm install dharma-ui-analytics --save

Descrição: O Analytics tem como objetivo capturar informações do usuário e fornecer para o desenvolvedor

Adicione o módulo AnalyticsModule em seu módulo:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExampleComponent } from './example.component';
import { RouterModule } from '@angular/router';
import { exampleRoutes } from './example.routing';
import { AnalyticsModule } from 'dharma-ui-analytics';

@NgModule({
  declarations: [ExampleComponent],
  imports: [
     CommonModule,
     RouterModule.forChild(exampleRoutes),
     AnalyticsModule,
  ],
})
export class ExampleModule { }

Depois basta instanciar o analyticsService no seu componente e usar as seguintes propriedades:

• platform
• userAgent
• currentURL
• ip
• geolocation
• isMobile

Veja no exemplo a seguir:

import { Component, AfterViewInit } from '@angular/core';
import { AnalyticsService } from 'dharma-ui-analytics';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements ngOnInit {

  constructor(
    private analyticsService: AnalyticsService,
  ) {
  }

  ngOnInit() {
    this.analyticsService.geolocation().subscribe(geolocation => {
      console.log('user geolocation', geolocation);
    }):

    const ip = this.analyticsService.ip().subscribe(ip => {
      console.log('ip', ip);
    });

    const platform = this.analyticsService.platform();

    const currentURL = this.analyticsService.currentURL();

    const userAgent = this.analyticsService.userAgent();

    const isMobile = this.analyticsService.isMobile();

  }

Descrição: O NgxGoogleAnalyticsModule é uma importante ferramenta de análise para monitorar com eficiência sua atuação online e traçar estratégias consistentes de negócios.

Configuração

import { NgxGoogleAnalyticsModule } from 'dharma-ui-analytics';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxGoogleAnalyticsModule.forRoot('traking-code')
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

GA Eventos

import { Component } from '@angular/core';
import { GoogleAnalyticsService } from 'dharma-ui-analytics';

@Component( ... )
export class TestFormComponent {

  constructor(
    protected $gaService: GoogleAnalyticsService
  ) {}

  onUserInputName() {
    ...
    this.$gaService.event('enter_name', 'user_register_form', 'Name');
  }

  onUserInputEmail() {
    ...
    this.$gaService.event('enter_email', 'user_register_form', 'Email');
  }

  onSubmit() {
    ...
    this.$gaService.event('submit', 'user_register_form', 'Enviar');
  }

}

Page View

import { Component, OnInit } from '@angular/core';
import { GoogleAnalyticsService } from 'dharma-ui-analytics';

@Component(...)
export class TestPageComponent implements OnInit {

  constructor(
    protected $gaService: GoogleAnalyticsService
  ) {}

  ngOnInit() {
    this.$gaService.pageView('/teste', 'Teste de Title')
  }

  onUserLogin() {
    ...
    this.$gaService.pageView('/teste', 'Teste de Title', undefined, {
      user_id: 'my-user-id'
    })
  }

}

GA Directives

Você pode utilizar as diretivas para acionar os eventos do GA

Exemplo de diretivas simples

<div>
  <button gaEvent gaCategory="ga_directive_test" gaAction="click_test">Click Test</button>
  <button gaEvent gaCategory="ga_directive_test" gaAction="focus_test" gaBind="focus">Focus Test</button>
  <button gaEvent gaCategory="ga_directive_test" gaAction="blur_test" gaBind="blur">Blur Test</button>
</div>

Exemplo de utilização no input

<div>
  <input gaEvent gaCategory="ga_directive_input_test" gaAction="fill_blur" placeholder="Auto Blur Test">
</div>

Grupos de Diretivas

<div gaCategory="ga_test_category">
  <button gaEvent gaAction="click_test">Click Test</button>
  <button gaEvent gaAction="focus_test" gaBind="focus">Focus Test</button>
  <button gaEvent gaAction="blur_test" gaBind="blur">Blur Test</button>
</div>

Tracking Rotas

Adicione NgxGoogleAnalyticsRouterModule no módulo para acionar o tracker automaticamente em suas rotas.

import { NgxGoogleAnalyticsModule, NgxGoogleAnalyticsRouterModule } from 'dharma-ui-analytics';
...

@NgModule({
  ...
  imports: [
    ...
    NgxGoogleAnalyticsModule.forRoot(environment.ga),
    NgxGoogleAnalyticsRouterModule
  ]
})
export class AppModule {}

Descrição: O Tracker tem como objetivo enviar eventos via Google Tag Manager para o Google Analytics.

O que é Google Tag Manager?

Google Tag Manager é uma ferramenta gratuita do Google, pela qual é possível inserir apenas um código em um site, para depois instalar diversos serviços sem precisar mexer nesse código. Ao centralizar a gestão de códigos no GTM, o marketing ganha autonomia, melhora a produtividade e reduz custos com TI.

Com esse módulo você poderá enviar eventos customizados e eventos de navegação de página.

Primeiramente você deve adicionar os scripts do Google Tag Manager na index.html da sua aplicação, veja no exemplo:

Observação: NÃO COPIE OS SCRIPTS DO EXEMPLO, VOCÊ DEVE PEGAR O SCRIPT NO PAINEL DO GOOGLE!

O Script deve ficar dentro das tags <head> e o iframe deve ficar dentro da tag <body>

<!doctype html>
<html lang="en">

  <head>

    <!-- Google Tag Manager -->
    <script>(function (w, d, s, l, i) {
      w[l] = w[l] || []; w[l].push({
        'gtm.start':
          new Date().getTime(), event: 'gtm.js'
      }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayer', 'GTM-TWVNQLW');</script>
    <!-- End Google Tag Manager -->

    <meta charset="utf-8">
    <title>Clube Dotz - Dotz</title>
    <base href="/">
  </head>

  <body>

    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TWVNQLW" height="0" width="0"
        style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    <app-root></app-root>
  </body>

</html>

Adicione o módulo TrackerModule em na app.module passando as configurações abaixo:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExampleComponent } from './example.component';
import { RouterModule } from '@angular/router';
import { exampleRoutes } from './example.routing';
import { TrackerModule } from 'dharma-ui-analytics';

@NgModule({
  declarations: [ExampleComponent],
  imports: [
     CommonModule,
     RouterModule.forChild(exampleRoutes),
     TrackerModule.forRoot({
      GTM_ID: '<seu-gmt-id>',
      enablePageEvent: true,
     }),
  ],
})
export class AppModule { }

Depois basta instanciar o trackerService no seu componente e chamar o método start()

Veja no exemplo a seguir:

import { Component, AfterViewInit } from '@angular/core';
import { TrackerService } from 'dharma-ui-analytics';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements ngOnInit {

  constructor(
    private trackerService: TrackerService,
  ) {
  }

  ngOnInit() {
    // iniciando o serviço
    this.trackerService.start();
  }

  /**
   * Disparando eventos customizados
  */
  onClickButton() {
    this.trackerService.customEvent({
      event: 'banner-click',
      data: 'my-data',
    });
  }
}

Parâmetros

| Parâmetro | Default value | Obrigatório | Descrição | |--|--|--|--| | GTM_ID | null | sim | ID do Google Tag Manager | | enablePageEvent | false | Não | Parâmetro que ativa o envio de eventos de página |

• Commits atômicos, que resolvem no máximo uma tarefa do board.
• Mensagem do commit deve seguir o que é sugerido no README.md do Dharma.Common: https://github.com/stone-payments/stoneco-best-practices/blob/master/gitStyleGuide/README.md#commits.
• Em cada PR, devemos escrever nos comentários o motivo de cada arquivo alterado (ex: TransfersController recebe novo filtro no método Get()).
• Só integrar PRs que tenham sido aprovadas no mínimo por 2 outros devs que não sejam o autor do PR, e preferencialmente todos nós devemos aprovar o PR para termos sempre certeza que todos estão cientes das mudanças e tenham feito ressalvas caso algum impacto tenha sido gerado.
• Vamos manter a organização das branches no modelo parecido com gitflow (Master; Bugfix-[Numero bug]; Dev-[nome Release];), sempre sincronizadas com a master para caso precisarmos entregar na esteira.

• Roger Louzada - [email protected]
• Diego Sanches - [email protected]
• Samuel Fabel - [email protected]