文章内容
2021/5/11 19:14:49,作 者: 黄兵
Angular Universal 设置Google Analytics
通过导入isPlatformBrowser，您可以指定只想在客户端上执行的代码。然后，您可以附加适当的脚本标记以进行Google Analytics（分析）跟踪。
import { isPlatformBrowser } from '@angular/common';
import { Component, ElementRef, Inject, PLATFORM_ID, Renderer2 } from '@angular/core';
import { environment } from '../../environments/environment';
@Component({
selector: 'app-google-analytics-gtag',
template: '',
})
export class GoogleAnalyticsGTagComponent {
trackingCode = environment.googleAnalyticsTrackingCode;
constructor(
@Inject(PLATFORM_ID) private readonly platformId: Object,
private readonly renderer: Renderer2,
private readonly el: ElementRef,
) {
// BROWSER
if (isPlatformBrowser(this.platformId)) {
const script = this.renderer.createElement('script') as HTMLScriptElement;
script.src = `//www.googletagmanager.com/gtag/js?id=${this.trackingCode}`;
script.async = true;
this.renderer.appendChild(this.el.nativeElement, script);
const script2 = this.renderer.createElement('script') as HTMLScriptElement;
const scriptBody = this.renderer.createText(`
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', '${this.trackingCode}');
`);
this.renderer.appendChild(script2, scriptBody);
this.renderer.appendChild(this.el.nativeElement, script2);
}
}
}之后在页面中添加：
<app-google-analytics-gtag></app-google-analytics-gtag>参考资料：
1、How to add google analytics tracking with angular universal ssr
评论列表