capacitor-google-analytics v1.0.1
Capacitor Google Analytics
A Capacitor plugin that enables the new data streams in Google Analytics and Firebase analytics.
:warning: This plugin is still under development. Use at your own risk. I am actively developing it. Check back for updates or feel free to contribute.
Special Thanks
A special thanks to philmerrell as a starting point for this plugin. It appears that they are no longer able to maintain their plugin https://github.com/philmerrell/capacitor-firebase-analytics this is why I create this.
Compatability
Currently compatible with Android. Will be compatible with iOS and Web/PWA on or about 10/29/2019.
Android
Available - Testing
iOS
Available - Testing
Web/PWA
Available - Testing
Getting Started
Create Google/Firebase Analytics Account
To get started visit https://analytics.google.com.
- Create new account.
- Set Account Details.
- Select Apps and Web.
- Select Next
- After the account is created you should see "Setup data stream to start collecting data".
Android Setup
Google Analytics Setup
- Select Android app.
- Add package name.
- Add app name.
- Agree to terms.
- Register app.
- After registering the app Google Analytics will configure a Firebase/Google Cloud project associated with your app.
- Once this is complete select next.
- Download the google-services.json
Ionic 4 Setup
- Add the Capacitor Google Analytics plugin to your project.
npm install capacitor-google-analytics
Add the plugin to any components or services you want to expose the the methods.
import { CapacitorGoogleAnalytics } from 'capacitor-google-analytics'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'] }) export class AppComponent { constructor() {} public async logEvent() { try { const event = { someLabel: 'someValue' }; const didLogEvent = await CapacitorGoogleAnalytics.logEvent('someEvent', event) } catch (err) { throw new Error(err) } } }
Build your project.
ionic build --platform=android
- Add Android to your project.
ionic cap add android
- Sync Android with your project (This will actually run on step three. If you already added Android you can skip three and just run this.)
ionic cap sync android
- Open your project in Android Studio
ionic cap open android
Android Studio Setup
- Once you are in Android Studio switch to Project view.
- In the Project level build.gradle add the following to dependencies
classpath 'com.google.gms:google-services:4.2.0'
a) In the App level build.gradle add the following to dependencies
implementation 'com.google.firebase:firebase-core:17.0.0'
b) Ionic 4 notes. If you're using Ionic 4 change the snippets versions to:
implementation 'com.google.firebase:firebase-core:16.0.7' implementation 'com.google.firebase:firebase-analytics:16.3.0'
In the same file add the following to the bottom of the file.
apply plugin: 'com.google.gms.google-services'
Sync Project
iOS Setup
Google Analytics Setup
- Select iOS app.
- Add package name.
- Add app name.
- Agree to terms.
- Register app.
- After registering the app Google Analytics will configure a Firebase/Google Cloud project associated with your app.
- Once this is complete select next.
- Download the google-services.json
Ionic 4 Setup
- Add the Capacitor Google Analytics plugin to your project.
npm install capacitor-google-analytics
Add the plugin to any components or services you want to expose the the methods.
import { CapacitorGoogleAnalytics } from 'capacitor-google-analytics'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'] }) export class AppComponent { constructor() {} public async logEvent() { try { const event = { someLabel: 'someValue' }; const didLogEvent = await CapacitorGoogleAnalytics.logEvent('someEvent', event) } catch (err) { throw new Error(err) } } }
Build your project.
ionic build --platform=ios
- Add iOS to your project.
ionic cap add ios
- Sync iOS with your project (This will actually run on step three. If you already added Android you can skip three and just run this.)
ionic cap sync ios
- Open your project in Xcode
ionic cap open ios
Xcode Setup
- Once you are in Xcode select the Project Navigator Icon
- Expand App then right click the App Folder beneath the first App
- Select Add Files to "App"
- Select the GoogleService-Info.plist file and then select App below.
- You should now be able to build the app as normal.
Web/PWA Setup
Documentation coming soon. In order to get web working add a firebaseConfig in the AppComponent and call the initializeApp method. You can find the config values after you create a web project in Google Analytics then visiting Firebase -> Project Setup.
I will provide more detailed information soon. Below is an example.
import { CapacitorGoogleAnalytics } from 'capacitor-google-analytics';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
private firebaseConfig: any = {
apiKey: "xxxx",
authDomain: "xxxx",
databaseURL: "xxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx",
appId: "xxxx",
measurementId: "xxxx"
};
constructor() {}
async initializeApp() {
CapacitorGoogleAnalytics.initializeApp({ config: this.firebaseConfig });
}
Usage
logEvent() - Events provide insight on what is happening in your app, such as user actions, system events, or errors.
Parameters
key | value | example |
---|---|---|
name | string | 'goal_completion' |
parameters | object | { name: 'lever_puzzle'} |
logEvent(options: { name: string, parameters: object }): Promise<void>;
setUserProperty() - User properties are attributes you define to describe segments of your user base, such as language preference or geographic location.
Parameters
key | value | example |
---|---|---|
name | string | favorite_food |
value | string | 'apples' |
setUserProperty(options: { value: string, name: string }): Promise<void>;
setUserId() - Google Analytics has a setUserID call, which allows you to store a user ID for the individual using your app.
Parameters
key | value | example |
---|---|---|
userId | string | '123456' |
setUserId(options: { userId: string }): Promise<void>;
setCurrentScreen() - Google Analytics tracks screen transitions and attaches information about the current screen to events, enabling you to track metrics such as user engagement or user behavior per screen.
Parameters
key | value | example |
---|---|---|
screenName | string | 'login' |
screenClassOverride | string | null |
setCurrentScreen(options: { screenName: string, screenClassOverride?: string }): Promise<void>;
getAppInstanceId()
getAppInstanceId(): Promise<{appInstanceId: string}>;
resetAnalyticsData()
resetAnalyticsData(): Promise<void>;