Code Monkey home page Code Monkey logo

capacitor-analytics's Introduction

capacitor-analytics npm version

Capacitor plugin to enable features from Firebase Analytics

Capacitor Firebase Analytics Plugin

API

  • enable(): Promise<void>
  • disable(): Promise<void>
  • instance(): Promise<{ id: string }>
  • reset(): Promise<void>
  • setScreen({ name: string; class?: string }): Promise<void>
  • setUserID({ value: string }): Promise<void>
  • setUserProp({ key: string; value: string }): Promise<void>
  • logEvent({ name: string; params?: object }): Promise<void>

For more information check the definitions file

Usage

import { Analytics } from 'capacitor-analytics';
const analytics = new Analytics();

//
// user id
analytics.setUserID({ value: '1337' });

//
// user attributes
// google don't allow use of sensitive data
// like names, emails, card numbers, etc.
analytics.setUserProp({
  key: 'city',
  value: 'San Francisco'
});

//
// some event
analytics.logEvent({
  name: 'purchase',
  params: { items: '[1, 2, 3]', total: 254.5 }
});

Add Google config files

Navigate to the project settings page for your app on Firebase.

iOS

Download the GoogleService-Info.plist file. In Xcode right-click on the yellow folder named "App" and select the Add files to "App".

Tip: if you drag and drop your file to this location, Xcode may not be able to find it.

Android

Download the google-services.json file and copy it to android/app/ directory of your capacitor project.

iOS setup

  • ionic start my-cap-app --capacitor
  • cd my-cap-app
  • npm install --save capacitor-analytics
  • mkdir www && touch www/index.html
  • sudo gem install cocoapods (only once)
  • npx cap add ios
  • npx cap sync ios (every time you run npm install)
  • npx cap open ios
  • sign your app at xcode (general tab)
  • add GoogleService-Info.plist to the app folder in xcode

Enable debug view

  1. In Xcode, select Product > Scheme > Edit scheme
  2. Select Run from the left menu
  3. Select the Arguments tab
  4. In the Arguments Passed On Launch section, add -FIRAnalyticsDebugEnabled

Tip: every time you change a native code you may need to clean up the cache (Product > Clean build folder) and then run the app again.

Android setup

  • ionic start my-cap-app --capacitor
  • cd my-cap-app
  • npm install --save capacitor-analytics
  • mkdir www && touch www/index.html
  • npx cap add android
  • npx cap sync android (every time you run npm install)
  • npx cap open android
  • add google-services.json to your android/app folder
  • [extra step] in android case we need to tell Capacitor to initialise the plugin:

on your MainActivity.java file add import io.stewan.capacitor.analytics.AnalyticsPlugin; and then inside the init callback add(AnalyticsPlugin.class);

Now you should be set to go. Try to run your client using ionic cap run android --livereload --address=0.0.0.0.

Tip: every time you change a native code you may need to clean up the cache (Build > Clean Project | Build > Rebuild Project) and then run the app again.

Updating

For existing projects you can upgrade all capacitor related packages (including this plugin) with this single command

npx npm-upgrade '*capacitor*' && npm install

Sample app

https://github.com/stewwan/capacitor-analytics-demo

You may also like

Cheers ๐Ÿป

Follow me @Twitter

License

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.