时间戳

首页 > 解决方案 > 如何在 Angular 4 应用程序中实现站点搜索 Google Analytics

angular - 如何在 Angular 4 应用程序中实现站点搜索 Google Analytics

问题描述

我的 Angular 4 应用程序具有搜索功能，我需要使用 Google Analytics 来跟踪用户在该搜索栏中搜索的内容，如何实现？仅供参考：应用程序 URL 没有查询字符串或过滤器。

标签： angulargoogle-analytics

解决方案

gtag脚本示例：

  1. gtag分析脚本应该已经添加到应用程序中
  2. 为分析逻辑创建一些服务：
declare var gtag: any;

@Injectable({ providedIn: 'root' })
export class AnalyticsService {
  trackSearch(query: string): void {
    gtag('event', 'search', {
      search_term: query
    });
  }
}
  1. 在初始化搜索的处理程序中使用它，例如：
@Component({
  selector: 'app-root',
  template: `<button (click)="search('search term')"></button>`
})
export class AppComponent {
  constructor(private readonly analyticsService: AnalyticsService) {
  }

  search(query: string): void {
    // your search functional
    this.analyticsService.trackSearch(query);
  }
}

推荐阅读