spa - tablas angular 4

Angular 4+ usando Google Analytics

Question

Estoy intentando usar Google Analytics con angular 4, pero no puedo encontrar ningún tipo de @tipo a ga.js en ts

Para una solución rápida utilicé esto en cada componente:

declare let ga: any;

Siguiendo como lo resolví:

Cree una función para cargar el GA dinámicamente que inserte el script GA con el ID de seguimiento actual y el usuario.

    loadGA(userId) {
        if (!environment.GAtrackingId) return;

        let scriptId = ''google-analytics'';

        if (document.getElementById(scriptId)) {
            return;
        }

        var s = document.createElement(''script'') as any;
        s.type = "text/javascript";
        s.id = scriptId;
        s.innerText = "(function(i,s,o,g,r,a,m){i[''GoogleAnalyticsObject'']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,''script'',''//www.google-analytics.com/analytics.js'',''ga'');ga(''create'', { trackingId: ''" + **environment.GAtrackingId** + "'', cookieDomain: ''auto'', userId: ''" + **userId** + "''});ga(''send'', ''pageview'', ''/'');";

        document.getElementsByTagName("head")[0].appendChild(s);
    }

Crea el servicio para implementar los métodos que necesitarás.

import { Injectable } from ''@angular/core'';
import { environment } from ''../../../environments/environment'';

declare let ga: any;

@Injectable()
export class GAService {
    constructor() {
    }

    /**
     * Checks if the GA script was loaded.
     */
    private useGA() : boolean { 
        return environment.GAtrackingId && typeof ga !== undefined;
    }

    /**
     * Sends the page view to GA.
     * @param  {string} page The path portion of a URL. This value should start with a slash (/) character.
     */
    sendPageView(
        page: string
    ) {
        if (!this.useGA()) return;
        if (!page.startsWith(''/'')) page = `/${page}`;      
        ga(''send'', ''pageview'', page);
    }


    /**
     * Sends the event to GA.
     * @param  {string} eventCategory Typically the object that was interacted with (e.g. ''Video'')
     * @param  {string} eventAction The type of interaction (e.g. ''play'')
     */
    sendEvent(
        eventCategory: string,
        eventAction: string
    ) { 
        if (!this.useGA()) return;
        ga(''send'', ''event'', eventCategory, eventAction);
    }
}

Luego finalmente uso el servicio inyectado en componente.

constructor(private ga: GAService) {}

ngOnInit() { this.ga.sendPageView(''/join''); }

Answer 1

Cargue google analytics, usando vars de entorno, de forma asíncrona;

(Funciona en Angular 5)

(Usando la respuesta de @Laiso)

google-analytics.service.ts

import {Injectable} from ''@angular/core'';
import {NavigationEnd, Router} from ''@angular/router'';
declare var ga: Function;

@Injectable()
export class GoogleAnalyticsService {

  constructor(public router: Router) {
    this.router.events.subscribe(event => {
      try {
        if (typeof ga === ''function'') {
          if (event instanceof NavigationEnd) {
            ga(''set'', ''page'', event.urlAfterRedirects);
            ga(''send'', ''pageview'');
            console.log(''%%% Google Analytics page view event %%%'');
          }
        }
      } catch (e) {
        console.log(e);
      }
    });

  }


  /**
   * Emit google analytics event
   * Fire event example:
   * this.emitEvent("testCategory", "testAction", "testLabel", 10);
   * @param {string} eventCategory
   * @param {string} eventAction
   * @param {string} eventLabel
   * @param {number} eventValue
   */
  public emitEvent(eventCategory: string,
   eventAction: string,
   eventLabel: string = null,
   eventValue: number = null) {
    if (typeof ga === ''function'') {
      ga(''send'', ''event'', {
        eventCategory: eventCategory,
        eventLabel: eventLabel,
        eventAction: eventAction,
        eventValue: eventValue
      });
    }
  }


}

Dentro de app.component o cualquier componente:

 // ... import stuff

 import { environment } from ''../../../environments/environment'';

 // ... declarations

 constructor(private googleAnalyticsService: GoogleAnalyticsService){
    this.appendGaTrackingCode();
 }

 private appendGaTrackingCode() {
    try {
      const script = document.createElement(''script'');
      script.innerHTML = `
        (function(i,s,o,g,r,a,m){i[''GoogleAnalyticsObject'']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,''script'',''https://www.google-analytics.com/analytics.js'',''ga'');

        ga(''create'', ''` + environment.googleAnalyticsKey + `'', ''auto'');
      `;
      document.head.appendChild(script);
    } catch (ex) {
     console.error(''Error appending google analytics'');
     console.error(ex);
    }
  }

// Somewhere else we can emit a new ga event
this.googleAnalyticsService.emitEvent("testCategory", "testAction", "testLabel", 10);

Answer 2

GoogleAnalyticsService

Puede crear un service que se suscriba a eventos de enrutador e inyectarlo en app.module.ts para que no tenga que inyectarlo en cada componente.

@Injectable()
export class GoogleAnalyticsService {

  constructor(router: Router) {
    if (!environment.production) return; // <-- If you want to enable GA only in production
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        ga(''set'', ''page'', event.url);
        ga(''send'', ''pageview'');
      }
    })
  }

Aquí está el tutorial (mi blog) .

Answer 3

En primer lugar, necesita instalar mecanografías para Google Analytics en sus devDependencies

npm install --save-dev @types/google.analytics

Luego agregue su código de seguimiento en el index.html y elimine la última línea como se muestra a continuación:

<body>
  <app-root>Loading...</app-root>
  <script>
    (function(i,s,o,g,r,a,m){i[''GoogleAnalyticsObject'']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,''script'',''https://www.google-analytics.com/analytics.js'',''ga'');

    ga(''create'', ''UA-XXXXXX-ID'', ''auto'');  // <- add the UA-ID 
                                           // <- remove the last line 
  </script>
</body>

El siguiente paso consiste en actualizar el constructor de componentes de su hogar para el seguimiento de eventos.

constructor(public router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        ga(''set'', ''page'', event.urlAfterRedirects);
        ga(''send'', ''pageview'');
      }
    });
  }

Si desea realizar un seguimiento de un evento específico, también puede crear un servicio e inyectarlo en cualquier componente que desee implementar el seguimiento de eventos.

// ./src/app/services/google-analytics-events-service.ts

import {Injectable} from "@angular/core";

@Injectable()
export class GoogleAnalyticsEventsService {

  public emitEvent(eventCategory: string,
                   eventAction: string,
                   eventLabel: string = null,
                   eventValue: number = null) {
    ga(''send'', ''event'', { eventCategory, eventLabel, eventAction, eventValue });
  }
}

Por ejemplo, si desea rastrear un clic en el componente de su hogar, todo lo que necesita hacer es inyectar el servicio de emitEvent() y llamar al método emitEvent() .

El código fuente del componente de inicio actualizado:

constructor(public router: Router, public googleAnalyticsEventsService: GoogleAnalyticsEventsService) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        ga(''set'', ''page'', event.urlAfterRedirects);
        ga(''send'', ''pageview'');
      }
    });
  }
  submitEvent() { // event fired from home.component.html element (button, link, ... )
    this.googleAnalyticsEventsService.emitEvent("testCategory", "testAction", "testLabel", 10);
  }

Answer 4

Para evitar cualquier tipo de comprobación, si ga se define globalmente en el nivel de la ventana, simplemente puede hacer

 window["ga"](''send'', {
    hitType: ''event'',
    eventCategory: ''eventCategory'',
    eventAction: ''eventAction''
    });

Espero eso ayude.

Answer 5

Personalmente lo he encontrado bastante fácil simplemente:

• Agregando el código de seguimiento de GA después de mi <app-root> en index.html (como se muestra arriba)
• Incluyendo Angulartics for GA en mi aplicación ( Ejemplo de GA aquí )

En mi app.component.ts he añadido esto:

import {Component, OnInit} from ''@angular/core'';
import {NavigationEnd, Router} from ''@angular/router'';
import {Angulartics2GoogleAnalytics} from ''angulartics2/ga'';
import {filter} from ''rxjs/operators'';

@Component({
    selector: ''app-root'',
    templateUrl: ''./app.component.html'',
    styleUrls: [''./app.component.scss'']
})
export class AppComponent implements OnInit {
    constructor(private ga: Angulartics2GoogleAnalytics,
                 private router: Router) {
    }

    ngOnInit() {
        this.router.events
            .pipe(filter(event => event instanceof NavigationEnd))
            .subscribe((event: NavigationEnd) =>
                this.ga.pageTrack(event.urlAfterRedirects));
    }
}

No es muy diferente a lo anterior, pero lo hace mucho más fácil para la prueba.