Question

我正在做一个角度（4）应用程序，但我在整合谷歌分析时遇到了问题。我目前正在将谷歌分析添加到我的单页Web应用程序中。但是当我尝试检索ga函数以发送新的url时，它似乎找不到该函数。

这是我得到的代码：

index.hbs

<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', 'My-key', 'auto');
</script>

app.component.ts

import { Component, OnInit } from '@angular/core';
import {NavigationEnd, Router} from "@angular/router";
import {WindowRef} from "./social/windowRef";
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    user: User;
    private currentRoute: string;

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

windowRef.ts

export class WindowRef{
    public static get(): any{
        console.log(window);
        return window;
    }
}

我收到此错误：ERROR TypeError: windowRef_1.WindowRef.get(...).ga is not a function

当我console.log(WindowRef.get());时，我可以在窗口中看到ga功能，但在我尝试使用它时仍会显示上一个错误。 here和here

我真的不明白我使用这种方法来检索条带功能并且效果很好。

祝你有个美好的一天：）

Answer 1

我在尝试将Google Analytics集成到我的Angular 4应用程序时遇到了类似的问题。

我的诀窍是将谷歌分析代码从AppComponent的构造函数移动到ngAfterViewInit()生命周期钩子，以确保视图首先完全初始化。

这是我得到的代码：

index.html（与您相同）：

<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', 'some code', 'auto');
</script>

<强> app.component.ts：

import {AfterViewInit, Component, Inject, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from '@angular/common';
import {NavigationEnd, Router} from '@angular/router';

// declare google analytics
declare const ga: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  constructor(@Inject(PLATFORM_ID) private platformId: Object,
              private router: Router) {}


  ngAfterViewInit(): void {
    this.router.events.subscribe(event => {
      // I check for isPlatformBrowser here because I'm using Angular Universal, you may not need it
      if (event instanceof NavigationEnd && isPlatformBrowser(this.platformId)) {
        console.log(ga); // Just to make sure it's actually the ga function
        ga('set', 'page', event.urlAfterRedirects);
        ga('send', 'pageview');
      }
    });
  }
}

让我知道这是否适合你。祝你今天愉快！：）

Answer 2

好的，我没有迟到，我没有将googleAnalytics脚本放在身体之前，它已经过了。现在它运作良好。感谢@WeissDev，当我看到尽管在ga（奇怪）中window未定义library(dplyr) data.old %>% group_by(Time) %>% summarise(Count = sum(Count), Direction = unique(Direction))时，它让我开始了。无论如何，他的解决方案也很有效。

Answer 3

如果@WeissDev答案对您不起作用，请在使用它之前使用setInterval确保其准备就绪。

  ngAfterViewInit() {
    this.initGoogleAnalyticsPageView()
  }

  private initGoogleAnalyticsPageView() {
    const interval = setInterval(() => {
      if ((window as any).ga && (window as any).ga.getAll) {
        this.router.events.subscribe(event => {
          const ga = (window as any).ga
          if (event instanceof NavigationEnd) {
            const tracker = ga.getAll()[0]
            tracker.set('page', event.urlAfterRedirects)
            tracker.send('pageview')
          }
        })
        clearInterval(interval)
      }
    }, 50)
  }

Answer 4

如果您访问 Google Analytics（分析）网站，他们会说：

<块引用>

将全局站点标记复制到 HTML 的 <head> 部分。要么，如果您使用网站构建器（例如 WordPress、Shopify 等），请复制将全局站点标记添加到您的网站建设者的自定义 HTML 字段中。

它需要进入 <head> 标签。

角度和谷歌分析整合=＆gt; ga不是一个功能

4 个答案: