使用 Capacitor 在 Ionic 5 中实现 Google Analytics

Question

我试图在一个离子项目上实施 GA 好几天了，但没有任何运气。

我需要它在浏览器 (PWA) 和 Android 平台上工作。

让我们从文档说的开始：https : //ionicframework.com/docs/native/google-analytics

电容器：

npm install cordova-plugin-google-analytics

npm install @ionic-native/google-analytics

ionic cap sync

import { Plugins } from '@capacitor/core';
const { GoogleAnalytics } = Plugins;

... 

initializeApp() {
    GoogleAnalytics.startTrackerWithId('G-0000000000')
    .then(() => {
        alert('Google analytics is ready now');
    })
   .catch(e => alert(e));

在此之后，我收到以下错误：

GoogleAnalytics 没有网络实现。

如果我执行 Cordova 实现，我得到的只是 cordova_not_available

尝试注册 WebPlugin

import { Plugins } from '@capacitor/core';
import { registerWebPlugin } from '@capacitor/core';
const { GoogleAnalytics } = Plugins;
registerWebPlugin(GoogleAnalytics);

但是，编译器抛出了一个错误

ERROR in app.component.ts:159:25 - error TS2345: 
Argument of type '{ [prop: string]: any; }' is not assignable to parameter of type 'WebPlugin'.
Type '{ [prop: string]: any; }' is missing the following properties from type 
'WebPlugin': config, loaded, listeners, windowListeners, and 9 more. 

当文档说它应该在浏览器（PWA）中工作时，为什么我会收到这些错误？

离子信息：

Ionic CLI                     : 5.4.16
Ionic Framework               : @ionic/angular 5.3.2
@angular-devkit/build-angular : 0.1001.1
@angular-devkit/schematics    : 8.1.3
@angular/cli                  : 10.1.1
@ionic/angular-toolkit        : 2.3.3

Capacitor CLI   : 1.5.3
@capacitor/core : 1.5.3

Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, browser 6.0.0
Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 12 
other plugins)

cordova-res (update available: 0.15.1) : 0.9.0
native-run (update available: 1.0.0)   : 0.2.9


Android SDK Tools : 26.1.1
NodeJS            : v12.13.1
npm               : 6.12.1
OS                : Windows 10

Answer 1

所以基本上，首先，我需要使用 google gtag。Cordova 和 Capacitor 都无法解决我的问题。我使用了“简单的 JS 包含”方法。

索引.html

将跟踪代码添加到标题

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
</script>
<!-- End Google Analytics -->

为 gtag/analytics 创建服务

./providers/analytics/analytics.service.ts

import { Injectable } from '@angular/core';
declare var gtag;

@Injectable({
  providedIn: 'root'
})
export class AnalyticsService {

  constructor() { }

  startTrackerWithId(id) {
    gtag('config', id);
  }

  trackView(pageUrl: string, screenName: string) {}

  trackEvent(category, action, label?, value?) {}
}

app.module.ts

将 AnalyticsService 添加到提供程序

import { AnalyticsService } from './providers/analytics/analytics.service';

@NgModule({
    declarations: [AppComponent, NotificationsComponent],
    imports: [ ... ... ],
    entryComponents: [NotificationsComponent],
    providers: [
      ...
      AnalyticsService,
      ...
   ],
   bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { AnalyticsService } from './providers/analytics/analytics.service';

export class AppComponent implements OnInit, OnDestroy {

    constructor(
        ...
        private analyticsService: AnalyticsService,
        ...
    ) {
      this.initializeApp();
    }

   ...

    initializeApp() {
         this.analyticsService.startTrackerWithId('G-XXXXXXXXXX');
    }

}