How can we integrate facebook analytics in hybrid app - ionic-framework

.controller('Facebook',function($scope,$timeout,$log)
{
ionic.Platform.ready(function () {
facebookConnectPlugin.browserInit('162745127525160');
})
var self = this;
$timeout(function () {
facebookConnectPlugin.browserInit('162745127525160');
facebookConnectPlugin.getLoginStatus(function (response) {
$log.info(response);
if (response.status === 'connected') {
$log.info('User Already LoggedIn');
self.getData();
} else {
$log.info('User Not Logged In');
}
}, function () {
$log.warn('Get Login Status Error');
});
}, 1000);
$scope.facebookLogin = function () {
facebookConnectPlugin.login(['public_profile'], function (data) {
$log.info(data);
self.getData();
}, function (data) {
$log.warn(data);
});
};
self.getData = function () {
facebookConnectPlugin.api('/me', ['public_profile'], function (data) {
$log.info(data);
$scope.$apply(function () {
$scope.fb_data = data;
});
});
};
})
I have already install plugin to integrate Facebook .
Error
ReferenceError: FacebookConnectPlugin is not defined
Uncaught Reference Error: FacebookConnectPlugin is not defined

There is a Cordova plugin managing the Facebook SDK integration. Here's the link to the related Github project:
https://github.com/jeduan/cordova-plugin-facebook4
Check the description in there and follow it step by step, as it's also necessary to correctly set up your app in your Facebook developer account and to pass the ID to the plugin when installing to start tracking. ;)

Related

unininstall PWA Manually

The following code can be used to install the program in the PWA:
var fab = document.querySelector('#fab');
var deferredPrompt;
fab.addEventListener('click', function () {
if (deferredPrompt) {
deferredPrompt.prompt();
deferredPrompt.userChoice.then(function (choice) {
if (choice.outcome === 'dismissed') {
console.log('installation was cancelled');
} else {
console.log('User Added To Home Screen');
}
});
deferredPrompt = null;
}
});
//********************************************************************
window.addEventListener('beforeinstallprompt', function (event) {
console.log('beforeinstallprompt run .');
event.preventDefault();
deferredPrompt = event;
return false;
});
now for Uninstall:
It can only be removed from the browser
Now my question is here:
Is it possible to create a code such as manual installation (mentioned above) that the user can uninstall the program without the need to use the browser tool?
Thank you all for your answers

Integrating Branch.io in Ionic App

I am trying to send my app's link form my website with a token in the link like this :
branch.link({
stage: 'new user',
data: {
token: 543322
}},
function(err, link) {
console.log(err, link);
});
then when the app is installed by user after clicking on the link, i want to get this token to register the user.
I tried by reading Branch.io docs and implementing it but it's not working.
Can somebody tell me an Example to how to make it work?
Code in my app controller is like this
(():void => {
'use strict';
angular
.module('xyz')
.controller('abc', abc);
function abc (
$window
) {
let vm = this;
$window.Branch.setDebug(true);
$window.Branch.initSession().then(function (res) {
console.log(res);
alert('Response: ' + JSON.stringify(res));
}).catch(function (err) {
console.error(err);
alert('Error: ' + JSON.stringify(err));
});
$window.Branch.getFirstReferringParams().then(function (res) {
// Success Callback
alert('res'+res);
}).catch(function (err) {
// Error Callback
alert('err'+err);
});
$window.Branch.getLatestReferringParams().then(function (res) {
// Success Callback
alert(res);
}).catch(function (err) {
// Error Callback
alert(err);
});
function DeepLinkHandler (data) {
alert('Data from initSession: ' + data.data);
}
$window.DeepLinkHandler = DeepLinkHandler;
})();
Alex from Branch here: there are three steps to this process:
1. Create the link
You're doing this already with the code you provided in your question.
2. Integrate the Branch SDK into your app
The docs page covering the steps for this is here: https://dev.branch.io/getting-started/sdk-integration-guide/guide/cordova/
3. Watch for the incoming link, and route it
The docs page covering what you need for this is here: https://dev.branch.io/getting-started/deep-link-routing/advanced/cordova/
Basically, it is a function that will look something like this:
function DeepLinkHandler(data) {
console.log("received data: " + JSON.stringify(data));
for (key in data) {
if ((key != "type" && key != "source" && key != "bubbles" && key != "cancelBubble") && data[key] != null) {
console.log(key + ": " + data["key"]);
}
}
if (data["token"]) {
// load the view to register the user based on your token
} else {
// load your normal view
}
}

Fetching Facebook Friends List with Meteor

I added the meteorhacks:npm package and installed fbgraph using:
$ npm install fbgraph
My server side code looks like this for now:
function Facebook(accessToken) {
this.fb = Meteor.npmRequire('fbgraph');
this.accessToken = accessToken;
this.fb.setAccessToken(this.accessToken);
this.options = {
timeout: 3000,
pool: {maxSockets: Infinity},
headers: {connection: "keep-alive"}
}
this.fb.setOptions(this.options);
}
Facebook.prototype.query = function(query, method) {
var self = this;
var method = (typeof method === 'undefined') ? 'get' : method;
var data = Meteor.sync(function(done) {
self.fb[method](query, function(err, res) {
done(null, res);
});
});
return data.result;
}
Facebook.prototype.getUserData = function() {
return this.query('me');
}
Facebook.prototype.getFriendsData = function() {
return this.query('/me/friendlists');
}
Meteor.methods({
getUserData: function() {
var fb = new Facebook(Meteor.user().services.facebook.accessToken);
var data = fb.getUserData();
return data;
},
getFriendsData: function() {
var fb = new Facebook(Meteor.user().services.facebook.accessToken);
var data = fb.getFriendsData();
return data;
}
});
Meteor.publish("getUserData", function () {
return Meteor.users.find({_id: this.userId});
});
Meteor.publish("getFriendsData", function(){
return Meteor.users.find({_id: this.userId});
});
My config.js is also in order I think:
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY",
requestPermissions: {
facebook: ['email', 'user_friends'],
}
});
On the client side I have a template:
<template name="friends">
<div class="container">
{{friendlist}}
</div>
</template>
And I'm attempting to call 'getFriendsList' with:
Template.friends.helpers({
friendlist: function() {
Meteor.call("getFriendsData");
}
});
Finally, my packages.json looks like this:
{
"fbgraph": "1.1.0"
}
When I try to run my app, I get an error as follows:
Exception while simulating the effect of invoking 'getFriendsData
TypeError: Meteor.npmRequire is not a function
I apologize if this is a stupid question, I'm fairly new to Meteor. And I for the life of me can't figure this one out. I'd really appreciate some help.
You need to add the npm module. Integration of npm modules isn't native to meteor with the meteorhacks:npm module. Install it with this command:
meteor add meteorhacks:npm
Whenever you add a non-meteor package via npm, you will have to use Meteor.npmRequire(). If you install via meteor add foobar you won't need to require the package.
If you have problems, try this if you are using Meteor 1.2:
rm -rf packages/npm-container
meteor remove npm-container
meteor update meteorhacks:npm
Also your template needs fixing, as it's currently not going to update based on your Meteor.call(). If you use onCreated() or onRendered() you can trigger the Meteor.call() and set a session variable that will be used by one of your helpers to populate your template:
Template.friends.onCreated(function() {
Meteor.call("getFriendsData", function(error, friends) {
if (error) {
console.log(error);
} else {
Session.set('friends', friends);
}
});
});
Template.friends.helpers({
friendlist: function() {
return Session.get('friends');
}
});
If you aren't getting anything back, change this to check if you are getting data back on the server side:
getFriendsData: function() {
console.log(Meteor.user().services.facebook.accessToken);
var fb = new Facebook(Meteor.user().services.facebook.accessToken);
var data = fb.getFriendsData();
console.log(data);
return data;
}

Page need to be refresh before Facebook Login works

I am facing this issue in my application where facebook login is used.
ISSUE
Users need to press F5/refresh the page before facebook login prompt comes up. otherwise it doesn't come up and nothing happens on button click.
Here is the button tag for Facebook Login, which calls "Login()" method {angularJS is used}.
<a href="#" class="btn btn-default btn-lg" ng-click="login()"
ng-disabled="loginStatus.status == 'connected'"> <i class="fa fa-facebook fa-fw"></i> <span
class="network-name">Login Using Facebook</span></a>
AngularJS Code which gets called:
app.controller('DemoCtrl', ['$scope', 'ezfb', '$window', 'PFactory', '$location', function ($scope, ezfb, $window, PFactory, $location) {
updateLoginStatus(updateApiMe);
$scope.login = function () {
ezfb.login(function (res) {
/**
* no manual $scope.$apply, I got that handled
*/
if (res.authResponse) {
updateLoginStatus(updateApiMe);
}
}, {scope: 'email,user_likes,user_status,user_about_me,user_birthday,user_hometown,user_location,user_relationships,user_relationship_details,user_work_history'});
$location.path('/view9');
};
$scope.logout = function () {
ezfb.logout(function () {
updateLoginStatus(updateApiMe);
});
};
$scope.share = function () {
ezfb.ui(
{
method: 'feed',
name: 'angular-easyfb API demo',
picture: 'http://plnkr.co/img/plunker.png',
link: 'http://plnkr.co/edit/qclqht?p=preview',
description: 'angular-easyfb is an AngularJS module wrapping Facebook SDK.' +
' Facebook integration in AngularJS made easy!' +
' Please try it and feel free to give feedbacks.'
},
null
);
};
var autoToJSON = ['loginStatus', 'apiMe'];
angular.forEach(autoToJSON, function (varName) {
$scope.$watch(varName, function (val) {
$scope[varName + 'JSON'] = JSON.stringify(val, null, 2);
}, true);
});
function updateLoginStatus(more) {
ezfb.getLoginStatus(function (res) {
$scope.loginStatus = res;
$scope.promotion = 'promotion';
(more || angular.noop)();
});
}
function updateApiMe() {
ezfb.api('/me', function (res) {
$scope.apiMe = res;
});
}
}]);
Please help resolving it!
Thanks in Advance
Add true parameter after getLoginStatus callback function to force refreshing cache.
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
ezfb.getLoginStatus(function (res) {
$scope.loginStatus = res;
$scope.promotion = 'promotion';
(more || angular.noop)();
}, true);

with ouath.io how to create the OAuth.create to use as on the callback

With oauth.io how to make a OAuth.create for twitter
for facebook it is
facebook_auth = OAuth.create("facebook", { oauth_token: "token_here" }, {
"url": "https://graph.facebook.com",
"cors": true,
"query": {
"access_token": "token_here"
}
});
that way you can use it on different parts of your website not just the callback after sign in.
facebook_auth.get('/me?fields=name,email').done(function (data) {
});
otherwise you're stuck only with the callback:
OAuth.callback('facebook', function (err, result) {
result.get('/me?fields=name,email').done(function (data) {
});
});
this is link to their documentation:
https://oauth.io/docs/api
For twitter, it's the same syntaxe than with facebook
var twitterTokens
OAuth.popup('twitter', function(err, res){
twitterTokens = res
})
//then elsewhere
function createTwitter() {
return OAuth.create('twitter', twitterTokens)
}
var twitter = createTwitter()
twitter.get(....)
The 3rd parameter is optional