我正在做一个 angular(4( 应用程序， 但我在集成 Google Analytics 时遇到了问题。 我目前正在将谷歌分析添加到我的单页Web应用程序中。但是当我尝试检索 ga 函数以发送新 url 时，它似乎找不到该函数。
这是我得到的代码：
索引.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');
}
});
}
}
窗口引用
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 函数，但当我尝试使用它时它仍然显示以前的错误。 这里和这里
我真的不明白我使用这种方法来检索条纹函数，它运行得很好。
祝你有美好的一天:)
我在尝试将Google Analytics集成到我的Angular 4应用程序中时遇到了类似的问题。
对我来说，诀窍是将谷歌分析代码从AppComponent的构造函数移动到ngAfterViewInit((生命周期钩子，以确保视图首先完全初始化。
这是我得到的代码：
索引.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');
}
});
}
}
让我知道这是否也适合您。有好的一天！:)
如果@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)
}
好的，我没有把googleAnalytics脚本放在正文之前，而是放在正文之后。现在它运行良好。多亏了@WeissDev，当我看到尽管处于window(奇怪(中ga但没有定义时，它让我踏上了道路。无论如何，他的解决方案也很好用。
如果你去分析谷歌网站，他们会这样说：
将全局网站代码复制到 HTML 的
<head>部分。套利 如果您使用网站构建器(例如WordPress，Shopify等(，请复制 全局网站代码添加到建站帮手的自定义 HTML 字段中。
它需要进入<head>标签。