A Capacitor plugin that enables the new data streams in Google Analytics and Firebase analytics.
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.
Currently compatible with Android. Will be compatible with iOS and Web/PWA on or about 10/29/2019.
Available - Testing
Available - Testing
Available - Testing
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".
- 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
- 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
-
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
- 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
- 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
- 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.
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 });
}
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>;