使用谷歌分析的角度4 +

我试图使用谷歌分析与角4，但我不能找到任何@类型，以 ga.js 在 t。

为了获得快速解决方案，我在每个组件中都使用了这种方法:

declare let ga: any;

我是这么解决的:

创建一个动态加载 GA 的函数，插入带有当前 trackingId 和用户的 GA 脚本。

    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);
}

创建服务以实现您将需要的方法。

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);
}
}

然后最后使用组件中注入的服务。

constructor(private ga: GAService) {}


ngOnInit() { this.ga.sendPageView('/join'); }
71506 次浏览
小开
最佳答案

首先，您需要在 devDependencies中安装 GoogleAnalytics 的输入

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

然后在基 index.html中添加跟踪代码，并删除最后一行，如下所示:

<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>

下一步包括为事件跟踪更新主组件构造函数。

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

如果要跟踪某个特定事件，还可以创建一个服务并将其注入到要实现事件跟踪的任何组件中。

// ./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 });
}
}

例如，如果您希望跟踪主组件上的单击，那么您所需要做的就是注入 GoogleAnalyticsEventsService并调用 emitEvent()方法。

更新的主组件源代码:

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);
}
小开

加载谷歌分析，使用环境变量，异步方式;

(在角5施工)

(使用@Laiso 回答)

谷歌分析服务

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
});
}
}




}

在 app.Component 或其他组件内部:

 // ... 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);
小开

为了避免任何类型检查，如果 ga 是在窗口级别全局定义的，那么您可以简单地这样做

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

希望能有帮助。

小开

谷歌分析服务

您可以创建预订路由器事件的 service并将其注入到 app.module.ts中，这样就不必将其注入到每个组件中。

@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');
}
})
}

这里是教程(我的博客)。

小开

就我个人而言，我觉得这很简单:

  • 在 index.html 中的 <app-root>之后添加 GA 跟踪代码(如上所示)
  • 在我的应用程序中包含用于 GA 的 Angulartics(GA 示例在此)

在我的 app.component.ts中，我添加了以下内容:

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));
}
}

它与上面的内容没有太大的不同，但是使得测试变得更加容易。

小开

我建议将段脚本嵌入到 index.html中，并将分析库扩展到 window对象上:

declare global {
interface Window { analytics: any; }
}

然后将跟踪调用添加到 (click)事件处理程序:

@Component({
selector: 'app-signup-btn',
template: `
<button (click)="trackEvent()">
Signup with Segment today!
</button>
`
})
export class SignupButtonComponent {
trackEvent() {
window.analytics.track('User Signup');
}
}

我是 https://github.com/segmentio/analytics-angular的维护者。如果你想通过使用一个单一的 API 来管理你的客户数据，并且能够集成到任何其他的分析工具(我们支持超过250个目的地)来解决这个问题，我建议你检查一下——不需要编写任何额外的代码。

小开

我很惊讶这里没有人提到 谷歌的标签管理器(在过去的几年里，每当我添加一个新的身份时，Google Analytics 控制台都会输出这个版本的脚本)。

这是我今天想到的一个解决方案，它是其他答案中已经提到的解决方案的一个变体，适配器到 Google 的 Tag Manager 脚本。我认为对于从 ga()迁移到 gtag()(据我所知是从 建议迁移)的人来说，这是很有用的。

Analytics.service.ts

declare var gtag: Function;


@Injectable({
providedIn: 'root'
})
export class AnalyticsService {


constructor(private router: Router) {


}


public event(eventName: string, params: {}) {
gtag('event', eventName, params);
}


public init() {
this.listenForRouteChanges();


try {


const script1 = document.createElement('script');
script1.async = true;
script1.src = 'https://www.googletagmanager.com/gtag/js?id=' + environment.googleAnalyticsKey;
document.head.appendChild(script1);


const script2 = document.createElement('script');
script2.innerHTML = `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '` + environment.googleAnalyticsKey + `', {'send_page_view': false});
`;
document.head.appendChild(script2);
} catch (ex) {
console.error('Error appending google analytics');
console.error(ex);
}
}


private listenForRouteChanges() {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
gtag('config', environment.googleAnalyticsKey, {
'page_path': event.urlAfterRedirects,
});
console.log('Sending Google Analytics hit for route', event.urlAfterRedirects);
console.log('Property ID', environment.googleAnalyticsKey);
}
});
}
}

先决条件:

  • 在 app.module.ts的导入[]部分声明服务。
  • 在 app.Component. ts 中(或者在其模板中保存 <router-outlet>标记的任何更高级别的组件中) ，注入 AnalyticsService 并尽早调用 this.analytics.init()(例如 ngOnInit)
  • 在環.ts 中(在我的示例中为-環.prod.ts) ，添加 Analytics ID 作为 googleAnalyticsKey: 'UA-XXXXXXX-XXXX'
小开

你可能会得到帮助

app.component.ts


declare let gtag: Function;


this.router.events.subscribe(event => {


if(event instanceof NavigationEnd) {
gtag('config', '*****', {'page_path': event.urlAfterRedirects});
}


});
小开

是否在 Json的“类型”编译器选项中包含该类型？

我遇到了同样的问题，并在 Json中使用“ google.analytics”(参见，不是“@type/google.analytics”)解决了它

小开

Html 文件

<head>
.........


<script async src="https://www.googletagmanager.com/gtag/js?id=Google-Tracking-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
</script>


......
</head>

应用程序组件

import { Component, OnInit } from '@angular/core';
import {NavigationEnd, Router} from '@angular/router';
import {environment} from '../environments/environment';
// tslint:disable-next-line:ban-types
declare let gtag: Function;


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'angular-app';


constructor(public router: Router) {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
gtag('config', Google-Tracking-ID, {'page_path': event.urlAfterRedirects});
}
});
}


}
小开

这个解决方案似乎是最简单的:

安装类型后:

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

更新 tsconfig.json以使用它们:

// tsconfig.json
{
types: ["google.analytics"]
}

提交答案