Estoy usando Angular4 y estoy tratando de instalar análisis. Seguí esta guía:

https://blog.thecodecampus.de/angular-2-include-google-analytics-event-tracking/

Pero cuando trato de construir mi proyecto, aparece el error:

error TS2304: No se puede encontrar el nombre 'ga'.

Revisé mi package.json y instalé "@types/google.analytics": "0.0.38", en mis devDependencies . Cuando empiezo a escribir, puedo ver que intellisense sabe que es un tipo UniversalAnalytics.ga, pero no puedo hacer que funcione.

Intenté cambiar mi código a esto:

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

Se compila, pero en el archivo console.log aparece un error que dice:

No capturado (en promesa): TypeError: ga no es una función

Si cambio a esto:

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

Me sale el mismo error. ¿Alguien sabe por qué?

Aquí está el código completo:

import { Component, OnInit, AfterViewChecked, AfterViewInit } from "@angular/core";
import { ActivatedRoute, Params, Router, NavigationEnd } from "@angular/router";

import { ResultsService } from "./shared/results.service";
import { HeightService } from "./shared/height.service";

@Component({
  selector: 'bzRoot',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewChecked, AfterViewInit {
  constructor(
    private _activatedRoute: ActivatedRoute,
    private _resultsService: ResultsService,
    private _heightService: HeightService,
    public router: Router) {
  }

  ngOnInit() {
    this._activatedRoute.queryParams.subscribe((params: Params) => {
      // Only update the elq if it changes (remember: changing a parameter causes the page to refresh)
      var elq = params['elqid'];
      if (elq) {
        this._resultsService.elq = elq;
      }
    });
  }

  ngAfterViewChecked() {
    this._heightService.resize();
  }

  ngAfterViewInit() {
    //this.router.events.subscribe(event => {
    //  if (event instanceof NavigationEnd) {
    //    let ga: Function;
    //    ga('set', 'page', event.urlAfterRedirects);
    //    ga('send', 'pageview');
    //  }
    //});
  }
}
3
r3plica 2 mar. 2018 a las 14:37

5 respuestas

La mejor respuesta

De alguna manera, el paquete @ types / google.analytics parece estar roto. Simplemente agregue esto a su código:

declare let ga: Function;

Actualizaré mi publicación de blog.

3
Can 2 mar. 2018 a las 12:27

Encontré una alternativa para hacer la declaración. Modifiqué mi código a esto:

this._router.events.subscribe(event => {
  if (event instanceof NavigationEnd) {
    (<any>window).ga('set', 'page', event.urlAfterRedirects);
    (<any>window).ga('send', 'pageview');
  }
});

Y funcionó. Encontré este método en otra directiva.

5
r3plica 2 mar. 2018 a las 14:45

Puede agregar google.analytics a los tipos en su tsconfig.json

"types": [
  "node",
  "google.analytics",
],

..o puede eliminar toda la propiedad types de la configuración para que use todo en @types. Verifique la parte sobre 'tipos' aquí: https://www.typescriptlang.org/ docs / handbook / tsconfig-json.html

5
Arno van Oordt 11 jul. 2019 a las 10:28

Además, puede evitar completamente las verificaciones de tipo de mecanografiado:

 window['ga']('set', 'page', event.urlAfterRedirects);
 window['ga']('send', 'pageview');
3
bunbun 18 dic. 2018 a las 03:01

Recientemente me enfrenté a este problema y resolví agregar el paquete de definición de tipos para google analytics @ types / google.analytics.

Entonces, si necesita manejar alguna API popular que exponga alguna variable global como (google analytics, lodash, jquery, etc.) busque la definición de tipos en npmjs. si no lo encuentra, puede crear su propio archivo de declaración

0
JaviMetal 1 abr. 2020 a las 10:34