如何在 Angular 4 个应用程序中实施站点搜索 Google 分析

Question

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

Answer 1

gtag 脚本示例：

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

declare var gtag: any;

@Injectable({ providedIn: 'root' })
export class AnalyticsService {
  trackSearch(query: string): void {
    gtag('event', 'search', {
      search_term: query
    });
  }
}

3. 在初始化搜索的处理程序中使用它，例如：

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