如何使用 angular 通用 ssr 添加 google 分析跟踪
How to add google analytics tracking with angular universal ssr
我正在开发一个 angular 通用 SSR 应用程序,想添加 Google 页面浏览量的分析跟踪,但无法让它工作。
我尝试过的大多数软件包都无法与 SSR 一起使用,因为它们试图直接访问 window/document。
最终我得到了一个我想分享的相当基本的解决方案。
通过导入 isPlatformBrowser,您可以指定您只想在客户端上执行的代码。然后,您可以为 google 分析跟踪附加适当的脚本标签。
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);
}
}
}
我正在开发一个 angular 通用 SSR 应用程序,想添加 Google 页面浏览量的分析跟踪,但无法让它工作。
我尝试过的大多数软件包都无法与 SSR 一起使用,因为它们试图直接访问 window/document。
最终我得到了一个我想分享的相当基本的解决方案。
通过导入 isPlatformBrowser,您可以指定您只想在客户端上执行的代码。然后,您可以为 google 分析跟踪附加适当的脚本标签。
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);
}
}
}