[英]Implementing Google Analytics in Ionic 5 with Capacitor
I am trying to implement the GA on an ionic project for days now without any luck.我正在尝试在离子项目上实施 GA 几天,但没有任何运气。
I need this to work in the browser (PWA) and Android platforms.我需要它在浏览器 (PWA) 和 Android 平台上工作。
Let's start with what docs say: https:\/\/ionicframework.com\/docs\/native\/google-analytics<\/a>让我们从文档所说的开始:
https<\/a> :\/\/ionicframework.com\/docs\/native\/google-analytics
npm install cordova-plugin-google-analytics<\/code>
npm install @ionic-native\/google-analytics<\/code>
import { Plugins } from '@capacitor/core';
const { GoogleAnalytics } = Plugins;
...
initializeApp() {
GoogleAnalytics.startTrackerWithId('G-0000000000')
.then(() => {
alert('Google analytics is ready now');
})
.catch(e => alert(e));
So basically, first of all, I needed to use google gtag
.所以基本上,首先,我需要使用 google
gtag
。 Neither Cordova nor Capacitor could solve my problem. Cordova 和 Capacitor 都无法解决我的问题。 I used "simple JS include" approach.
我使用了“简单的 JS 包含”方法。
index.html索引.html
Add tracking code to the 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 -->
Create a service for gtag/analytics为 gtag/analytics 创建服务
./providers/analytics/analytics.service.ts ./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 app.module.ts
Add AnalyticsService to the providers将 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 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');
}
}
First install the plugin首先安装插件
npm install cordova-plugin-google-analytics
npm install @ionic-native/google-analytics
ionic cap sync
Then然后
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));
You should use documentation to integrate your iOS and Android application with Google Analytics.您应该使用文档将您的 iOS 和 Android 应用程序与 Google Analytics 集成。
You do not need UA-XXX\/G-XXX tracking number nor you need any extra code for this.您不需要 UA-XXX\/G-XXX 跟踪号,也不需要任何额外的代码。
However you have to edit and build POD and Gradle files of your app manually in Xcode and Android Studio.但是,您必须在 Xcode 和 Android Studio 中手动编辑和构建应用程序的 POD 和 Gradle 文件。
More here on official:更多官方信息:
https:\/\/support.google.com\/analytics\/answer\/9304153?hl=en#zippy=%2Cios-app-or-android-app<\/a>
https:\/\/support.google.com\/analytics\/answer\/9304153?hl=en#zippy=%2Cios-app-or-android-app<\/a>
More: https:\/\/firebase.google.com\/docs\/android\/setup<\/a>更多:
https<\/a> :\/\/firebase.google.com\/docs\/android\/setup
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.