使用 Capacitor 在 Ionic 5 中实施 Google 分析
Implementing Google Analytics in Ionic 5 with Capacitor
几天来,我一直在尝试在离子项目上实施 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
首先安装插件
npm install cordova-plugin-google-analytics
npm install @ionic-native/google-analytics
ionic cap sync
然后
import { GoogleAnalytics } from '@ionic-native/google-analytics/ngx';
constructor(private ga: GoogleAnalytics) { }
this.ga.startTrackerWithId('YOUR_TRACKER_ID')
.then(() => {
console.log('Google analytics is ready now');
this.ga.trackView('test');
// Tracker is ready
// You can now track pages or set additional information such as AppVersion or UserId
})
.catch(e => console.log('Error starting GoogleAnalytics', e));
所以基本上,首先,我需要使用 google gtag
。
Cordova 和 Capacitor 都无法解决我的问题。
我使用了“简单的 JS 包含”方法。
index.html
将跟踪代码添加到 header
<!-- 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');
}
}
您应该使用文档将您的 iOS 和 Android 应用程序与 Google Analytics 集成。
您不需要 UA-XXX/G-XXX 跟踪号,也不需要任何额外代码。
但是,您必须在 Xcode 和 Android Studio 中手动编辑和构建应用程序的 POD 和 Gradle 文件。
更多官方信息:
https://support.google.com/analytics/answer/9304153?hl=en#zippy=%2Cios-app-or-android-app
几天来,我一直在尝试在离子项目上实施 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
首先安装插件
npm install cordova-plugin-google-analytics
npm install @ionic-native/google-analytics
ionic cap sync
然后
import { GoogleAnalytics } from '@ionic-native/google-analytics/ngx';
constructor(private ga: GoogleAnalytics) { }
this.ga.startTrackerWithId('YOUR_TRACKER_ID')
.then(() => {
console.log('Google analytics is ready now');
this.ga.trackView('test');
// Tracker is ready
// You can now track pages or set additional information such as AppVersion or UserId
})
.catch(e => console.log('Error starting GoogleAnalytics', e));
所以基本上,首先,我需要使用 google gtag
。
Cordova 和 Capacitor 都无法解决我的问题。
我使用了“简单的 JS 包含”方法。
index.html
将跟踪代码添加到 header
<!-- 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');
}
}
您应该使用文档将您的 iOS 和 Android 应用程序与 Google Analytics 集成。
您不需要 UA-XXX/G-XXX 跟踪号,也不需要任何额外代码。
但是,您必须在 Xcode 和 Android Studio 中手动编辑和构建应用程序的 POD 和 Gradle 文件。
更多官方信息:
https://support.google.com/analytics/answer/9304153?hl=en#zippy=%2Cios-app-or-android-app