Merge pull request #175 from NativeScript/dtodorov/narusevic-add-analytics

elena-p · web-flow · commit 41a4a789f0e3 · 2019-06-12T09:12:00.000+03:00
Feat: add analytics
diff --git a/README.md b/README.md
@@ -46,6 +46,7 @@ NativeScript : Facebook SDK ![apple](https://cdn3.iconfinder.com/data/icons/pico
         - [Hide Custom Button If Can't share](#hide-custom-button-1)
 - [Login Response](#login-response)
 - [Get Current Access Token](#get-current-access-token)
+- [Basic Analytics](#basic-analytics)
 - [Graph API Example](#graph-api-example)
 - [Release notes](#release-notes)
 - [FAQ](#faq)
@@ -58,6 +59,7 @@ NativeScript : Facebook SDK ![apple](https://cdn3.iconfinder.com/data/icons/pico
 - [x] Login & Logout
 - [x] Share
 - [ ] Graph API
+- [x] Basic Analytics
 
 
 ## Installation
@@ -346,7 +348,7 @@ If the Messenger app is not installed, the Send button will be hidden. Be sure t
 
 ### Show Share Dialog Programmatically
 
-**Note** The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent) 
+**Note** The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)
 
 ```TypeScript
 showShareDialog(this.linkContent);
@@ -594,6 +596,34 @@ The callback that have to be provided to Facebook.login method receives 2 argume
 ## Get Current Access Token
 The plugin allows to get the current access token, if any, via getCurrentAccessToken() method.
 
+## Basic Analytics
+The plugin allows to log analytics events. At the initialization of the application you need to init analytics:
+
+```Typescript
+application.on(application.launchEvent, function (args) {
+    nsFacebook.init("{facebook_app_id}");
+    nsFacebook.initAnalytics();
+});
+```
+
+Events logging:
+
+```Typescript
+nsFacebook.logEvent('Lead');
+```
+
+Logging event with parameters:
+
+```Typescript
+const value = 5;
+const parameters = [{
+    key: 'value',
+    value: value.toString(),
+}];
+
+nsFacebook.logEvent(FundsAdded, parameters);
+```
+
 ## Graph API Example
 Once the Facebook access token is retrieved you can execute Graph API requests. In the example below after successful login, the access token is stored in application settings. And then on the home view it is retrieved and 2 Graph API calls are executed.
 1. Get Facebook id of the logged in user
diff --git a/demo-angular/app/app.module.ts b/demo-angular/app/app.module.ts
@@ -6,10 +6,11 @@ import { NativeScriptFacebookModule } from "nativescript-facebook/angular";
 import * as application from 'tns-core-modules/application';
 import { routes } from "./app.routing";
 import { NavigationService } from "./services/navigation.service";
-import { init } from "nativescript-facebook";
+import { init, initAnalytics } from "nativescript-facebook";
 
 application.on(application.launchEvent, function (args) {
     init("1771472059772879");
+    initAnalytics();
 });
 
 @NgModule({
diff --git a/demo-angular/app/pages/home/home.component.html b/demo-angular/app/pages/home/home.component.html
@@ -11,4 +11,7 @@
         <Button text="Log out (custom)" (tap)="logout()"></Button>
         <Button text="Get current access token" (tap)="getCurrentAccessToken()"></Button>
     </StackLayout>
+    <StackLayout class="buttons">
+        <Button text="Log event" (tap)="logEvent()"></Button>
+    </StackLayout>
 </StackLayout>
diff --git a/demo-angular/app/pages/home/home.component.ts b/demo-angular/app/pages/home/home.component.ts
@@ -16,6 +16,7 @@ export class HomeComponent {
     userId: string;
     username: string;
     avatarUrl: string;
+    eventCounter: number = 0;
 
     constructor(private ref: ChangeDetectorRef, private navigationService: NavigationService) {
         // Get logged in user's info
@@ -53,6 +54,14 @@ export class HomeComponent {
         });
     }
 
+    logEvent() {
+        this.eventCounter++;
+        Facebook.logEvent('Home', [{
+            key: 'counter',
+            value: this.eventCounter.toString()
+        }]);
+    }
+
     public getCurrentAccessToken() {
         let accessToken = Facebook.getCurrentAccessToken();
 
diff --git a/demo-angular/app/pages/login/login.component.html b/demo-angular/app/pages/login/login.component.html
@@ -13,4 +13,5 @@
             *ngIf = "canShowLinksMessageDialog"></Button>
     <Button (tap) = "onSendGenericDialog()" text = "Share Message Generic Template"
             *ngIf = "canShowGenericMessageDialog"></Button>
+    <Button (tap) = "logEvent()" text="Log event"></Button>
 </StackLayout>
diff --git a/demo-angular/app/pages/login/login.component.ts b/demo-angular/app/pages/login/login.component.ts
@@ -18,6 +18,7 @@ export class LoginComponent {
     canShowPhotosShareDialog = false;
     canShowLinksMessageDialog = false;
     canShowGenericMessageDialog = false;
+    eventCounter = 0;
 
     constructor(private ref: ChangeDetectorRef, private navigationService: NavigationService) {
         // have to init after facebook sdk inited
@@ -119,4 +120,12 @@ export class LoginComponent {
     onSendGenericDialog() {
         Facebook.showMessageDialog(this.genericContent);
     }
+
+    logEvent() {
+        this.eventCounter++;
+        Facebook.logEvent('Login', [{
+            key: 'counter',
+            value: this.eventCounter.toString()
+        }]);
+    }
 }
diff --git a/demo-vue/app/app.js b/demo-vue/app/app.js
@@ -4,6 +4,7 @@ import Login from "./components/Login";
 
 import {
     init,
+    initAnalytics,
 } from 'nativescript-facebook';
 
 import FacebookPlugin from "nativescript-facebook/vue";
@@ -12,7 +13,8 @@ Vue.use(FacebookPlugin);
 Vue.config.silent = true;
 
 application.on(application.launchEvent, function (args) {
-    init("1771472059772879");
+    init("1771472059772879");    
+    initAnalytics();
 });
 
 new Vue({
diff --git a/demo-vue/app/components/Home.vue b/demo-vue/app/components/Home.vue
@@ -12,13 +12,14 @@
             <FacebookLoginButton @logout="onLogout"></FacebookLoginButton>
             <Button @tap="logout" text="Log out (Custom)"></Button>
             <Button @tap="getAccessToken" text="Get current access token"></Button>
+            <Button @tap="logEventAction" text="Log event"></Button>
             </StackLayout>
         </StackLayout>
     </Page>
 </template>
 
 <script>
-    import { logout as fbLogout, getCurrentAccessToken } from "nativescript-facebook";
+    import { logout as fbLogout, getCurrentAccessToken, logEvent } from "nativescript-facebook";
     import Login from "./Login";
     let appSettings = require("tns-core-modules/application-settings");
     let http = require("tns-core-modules/http");
@@ -47,7 +48,8 @@
             return {
                 userId: null,
                 accessToken: appSettings.getString("access_token"),
-                avatarUrl: null
+                avatarUrl: null,
+                eventCounter: 0
             }
         },
         methods: {
@@ -64,6 +66,13 @@
             getAccessToken: function() {
                 let accessToken = getCurrentAccessToken();
                 alert("Current access token: " + JSON.stringify(accessToken, null, '\t'));
+            },
+            logEventAction() {
+                this.counter++;
+                logEvent('Home', [{
+                    key: 'counter',
+                    value: this.eventCounter.toString()
+                }]);
             }
         }
     };
diff --git a/demo-vue/app/components/Login.vue b/demo-vue/app/components/Login.vue
@@ -15,6 +15,7 @@
             <Button @tap="onShareDialogPhotos" text="Open Share dialog (photos)" :visibility="canShowPhotosShareDialog ? 'visible' : 'collapsed'"></Button>
             <Button @tap="onSendDialog" text="Share Message (link)" :visibility="canShowLinksMessageDialog ? 'visible' : 'collapsed'"></Button>
             <Button @tap="onSendGenericDialog" text="Share Message (generic)" :visibility="canShowGenericMessageDialog ? 'visible' : 'collapsed'"></Button>
+            <Button @tap="logEventAction" text="Log event"></Button>
         </StackLayout>
     </Page>
 </template>
@@ -34,7 +35,8 @@
         showShareDialog,
         showMessageDialog,
         canShareDialogShow,
-        canMessageDialogShow
+        canMessageDialogShow,
+        logEvent
     } from 'nativescript-facebook';
     let appSettings = require('tns-core-modules/application-settings');
 
@@ -53,7 +55,8 @@
                 canShowLinksShareDialog: false,
                 canShowPhotosShareDialog: false,
                 canShowLinksMessageDialog: false,
-                canShowGenericMessageDialog: false
+                canShowGenericMessageDialog: false,
+                eventCounter: 0
             }
         },
         methods: {
@@ -139,6 +142,13 @@
             },
             onSendGenericDialog: function() {
                 showMessageDialog(this.genericContent);
+            },
+            logEventAction() {
+                this.eventCounter++;
+                logEvent('Login', [{
+                    key: 'counter',
+                    value: this.eventCounter.toString()
+                }]);
             }
         }
     };
diff --git a/demo/app/app.ts b/demo/app/app.ts
@@ -1,8 +1,9 @@
 ﻿import * as application from 'tns-core-modules/application';
-import { init } from "nativescript-facebook";
+import { init, initAnalytics } from "nativescript-facebook";
 
 application.on(application.launchEvent, function (args) {
     init("1771472059772879");
+    initAnalytics();
 });
 
 application.run({ moduleName: "app-root" });
diff --git a/demo/app/home-page.xml b/demo/app/home-page.xml
@@ -13,6 +13,7 @@
       <Facebook:LoginButton logout="{{ onLogout }}"></Facebook:LoginButton>
       <Button automationText="customLogOut" tap="{{ logout }}" text="Log out (Custom)"></Button>
       <Button automationText="getCurrentAccessToken" tap="{{ getCurrentAccessToken }}" text="Get current access token"></Button>
+      <Button tap="{{ logEventAction }}" text="Log Event"></Button>
     </StackLayout>
   </StackLayout>
 </Page>
diff --git a/demo/app/home-view-model.ts b/demo/app/home-view-model.ts
@@ -1,5 +1,5 @@
 import { Observable } from 'tns-core-modules/data/observable';
-import { LoginEventData, logout as fbLogout, getCurrentAccessToken } from "nativescript-facebook";
+import { LoginEventData, logout as fbLogout, logEvent, getCurrentAccessToken } from "nativescript-facebook";
 
 let frameModule = require("tns-core-modules/ui/frame");
 let appSettings = require("tns-core-modules/application-settings");
@@ -10,6 +10,7 @@ let config = require("./app.config").config;
 export class HomeViewModel extends Observable {
   userId: string;
   accessToken: string = appSettings.getString("access_token");
+  eventCounter: 0;
 
   constructor() {
     super();
@@ -56,4 +57,12 @@ export class HomeViewModel extends Observable {
 
     alert("Current access token: " + JSON.stringify(accessToken, null, '\t'));
   }
+
+  public logEventAction() {
+    this.eventCounter++;
+    logEvent('Home', [{
+      key: 'counter',
+      value: this.eventCounter.toString()
+    }]);
+  }
 }
diff --git a/demo/app/login-page.xml b/demo/app/login-page.xml
@@ -12,5 +12,6 @@
     <Button tap="{{ onShareDialogPhotos }}" text="Open Share dialog (photos)" visibility="{{ canShowPhotosShareDialog ? 'visible' : 'collapsed' }}"></Button>
     <Button tap="{{ onSendDialog }}" text="Open Message Share dialog" visibility="{{ canShowLinksMessageDialog ? 'visible' : 'collapsed' }}"></Button>
     <Button tap="{{ onSendGenericDialog }}" text="Share Message Generic Template" visibility="{{ canShowGenericMessageDialog ? 'visible' : 'collapsed' }}"></Button>
+    <Button tap="{{ logEventAction }}" text="Log Event"></Button>
   </StackLayout>
 </Page>
diff --git a/demo/app/login-view-model.ts b/demo/app/login-view-model.ts
@@ -11,7 +11,8 @@ import {
     showShareDialog,
     showMessageDialog,
     canShareDialogShow,
-    canMessageDialogShow
+    canMessageDialogShow,
+    logEvent
 } from 'nativescript-facebook';
 
 let frameModule = require('tns-core-modules/ui/frame');
@@ -25,6 +26,7 @@ export class LoginViewModel extends Observable {
     public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
     public canShowLinksMessageDialog = canMessageDialogShow(this.linkContent);
     public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
+    public eventCounter = 0;
 
 
     private _navigate(path: string) {
@@ -118,4 +120,12 @@ export class LoginViewModel extends Observable {
     public onSendGenericDialog() {
         showMessageDialog(this.genericContent);
     }
+
+    public logEventAction() {
+        this.eventCounter++;
+        logEvent('Login', [{
+            key: 'counter',
+            value: this.eventCounter,
+        }]);
+    }
 }
diff --git a/src/app-events.android.ts b/src/app-events.android.ts
@@ -0,0 +1,25 @@
+let application = require("tns-core-modules/application");
+let androidApplication;
+let appEventsLogger;
+export function initAnalytics() {
+    androidApplication = application.android;
+    appEventsLogger = com.facebook.appevents.AppEventsLogger.newLogger(androidApplication.context.getApplicationContext());
+}
+
+export function logEvent(name: string, parameters?: any) {
+    if (name === undefined) {
+        throw ("Argument 'name' is missing");
+    }
+
+    const bundle = new android.os.Bundle();
+
+    if (parameters !== undefined) {
+        for (let p in parameters) {
+            let param = parameters[p];
+            if (param.value !== undefined) {
+                bundle.putString(param.key, param.value);
+            }
+        }
+    }
+    appEventsLogger.logEvent(name, bundle);
+}
diff --git a/src/app-events.d.ts b/src/app-events.d.ts
@@ -0,0 +1,2 @@
+export declare function initAnalytics(): void;
+export declare function logEvent(name: string, parameters?: any): void;
diff --git a/src/app-events.ios.ts b/src/app-events.ios.ts
@@ -0,0 +1,23 @@
+let application = require("tns-core-modules/application");
+let iosApplication;
+let appEventsLogger;
+export function initAnalytics() {
+    iosApplication = application.iosApplication;
+    FBSDKAppEvents.activateApp();
+}
+
+export function logEvent(name: string, parameters?: any) {
+    if (name === undefined) {
+        throw ("Argument 'name' is missing");
+    }
+
+    if (parameters === undefined) {
+        FBSDKAppEvents.logEvent(name);
+    } else {
+        const parametersDictionary = new (NSDictionary as any)(
+            parameters.map(parameter => parameter.value),
+            parameters.map(parameter => parameter.key));
+
+        FBSDKAppEvents.logEventParameters(name, parametersDictionary);
+    }
+}
diff --git a/src/index.android.ts b/src/index.android.ts
@@ -2,4 +2,5 @@ export * from "./login-manager";
 export * from "./ui/login-button";
 export * from "./login-event-data";
 export * from './share-manager';
-export * from "./ui/share-button";
+export * from "./ui/share-button";
+export * from "./app-events";
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -4,3 +4,4 @@ export * from "./login-response";
 export * from "./login-event-data";
 export * from './share-manager';
 export * from "./ui/share-button";
+export * from "./app-events";
diff --git a/src/index.ios.ts b/src/index.ios.ts
@@ -4,6 +4,7 @@ export * from "./login-manager";
 export * from "./login-event-data";
 export * from './share-manager';
 export * from "./ui/share-button";
+export * from "./app-events";
 
 declare interface UIApplicationDelegate { }
 
