Angular Google Tag Manager 使用教程

Angular Google Tag Manager 使用教程

angular-google-tag-managerA service library for integrate google tag manager in your angular project项目地址:https://gitcode.com/gh_mirrors/an/angular-google-tag-manager

项目介绍

angular-google-tag-manager 是一个用于在 Angular 应用中集成 Google Tag Manager (GTM) 的开源库。该库简化了 GTM 的集成过程，使得开发者可以更方便地在 Angular 项目中跟踪页面视图和事件。

项目快速启动

安装

首先，通过 npm 安装 angular-google-tag-manager 库：

npm install angular-google-tag-manager

配置

在 Angular 项目的 app.module.ts 中导入并配置 GTM：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularGoogleTagManagerModule } from 'angular-google-tag-manager';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularGoogleTagManagerModule.forRoot({
      id: 'GTM-XXXXXX' // 替换为你的 GTM ID
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用

在组件中使用 GTM 跟踪事件：

import { Component } from '@angular/core';
import { AngularGoogleTagManagerService } from 'angular-google-tag-manager';

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

  trackEvent() {
    const gtmTag = {
      event: 'button-click',
      data: 'my-custom-data'
    };
    this.gtmService.pushTag(gtmTag);
  }
}

应用案例和最佳实践

跟踪页面视图

在 Angular 应用中，可以通过订阅路由事件来跟踪页面视图：

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { AngularGoogleTagManagerService } from 'angular-google-tag-manager';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router, private gtmService: AngularGoogleTagManagerService) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        const gtmTag = {
          event: 'page',
          pageName: event.url
        };
        this.gtmService.pushTag(gtmTag);
      }
    });
  }
}

跟踪自定义事件

在需要跟踪特定事件的组件中，可以调用 pushTag 方法：

import { Component } from '@angular/core';
import { AngularGoogleTagManagerService } from 'angular-google-tag-manager';

@Component({
  selector: 'app-custom-component',
  templateUrl: './custom-component.component.html',
  styleUrls: ['./custom-component.component.css']
})
export class CustomComponentComponent {
  constructor(private gtmService: AngularGoogleTagManagerService) {}

  onButtonClick() {
    const gtmTag = {
      event: 'custom-event',
      category: 'button',
      action: 'click',
      label: 'custom-button'
    };
    this.gtmService.pushTag(gtmTag);
  }
}

典型生态项目

Angular Material

angular-google-tag-manager 可以与 Angular Material 结合使用，以跟踪 Material 组件的事件，如按钮点击、表单提交等。

Angular Universal

对于使用 Angular Universal 的服务器端渲染项目，angular-google-tag-manager 同样适用，可以在服务器端和客户端都进行事件跟踪。

通过以上步骤，您可以轻松地在 Angular 项目中集成 Google Tag Manager，并进行页面视图和事件

angular-google-tag-managerA service library for integrate google tag manager in your angular project项目地址:https://gitcode.com/gh_mirrors/an/angular-google-tag-manager