I'm using google-analytics-plugin to connect google analytics with ionic 1.
In app.js,
/* Google Analytics */
if(typeof analytics !== undefined) {
analytics.startTrackerWithId("UA-XXXXXXXXX-X");
console.log("Connected Google Analytics");
} else {
console.log("Google Analytics Unavailable");
}
In controller.js, I couldn't call 'analytics' directly, so I called 'eventListener'.
.controller('LoginCtrl', function($scope) {
document.addEventListener("deviceready", function () {
if(typeof analytics !== undefined) {
analytics.trackView("Login");
}
}, false);
}
.controller('PlaylistsCtrl', function($scope) {
document.addEventListener("deviceready", function () {
if(typeof analytics !== undefined) {
analytics.trackView("PlaylistsCtrl");
}
}, false);
}
It connected to GoogleAnalytics but don't show the pageview title. Count is increased but show two controllers as a same page.
Can anyone please tell me what should I fix to show pageview title ?
Thanks in advance!
Try to use the following to show the page title
window.ga.trackView(pagename);
Related
I am trying to add Google Analytics to my app. I am using Dan Wilson's Google Analytics plugin. I am not getting any errors but my Google Analytics Dashboard is not Updating at all. Where am i wrong,
var googleanalyticsApp = angular.module('starter', ['ionic','ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
if(typeof analytics !== undefined) {
analytics.startTrackerWithId("UA-872489XX-1");
console.log("Analytics Initialized");
} else {
console.log("Google Analytics Unavailable");
}
});
});
googleanalyticsApp.controller('ExampleController', function($scope,$cordovaGoogleAnalytics) {
function _waitForAnalytics(){
if(typeof analytics !== 'undefined'){
analytics.startTrackerWithId("UA-872489XX-1");
analytics.trackView('APP first screen');
console.log("Analytics in Controller");
}
else{
setTimeout(function(){
_waitForAnalytics();
},250);
}
};
_waitForAnalytics();
I have initialized the Google Analytics in both Device Ready and Controller.
Console.log states as:
But my Dashboard is not updating at all
Kindly, help me out.
Your dashboard is pointing at Nov 14 - Nov 14. Change this to the current day, it defaults to the previous day.
It can take up to 24 hours for data to appear in Analytics console. Also why do you have different naming conventions when calling analytics functions? You can change 'analytics' to $cordovaGoogleAnalytics in your code.
You need to set trakid In app.js platform ready like following -
$ionicPlatform.ready(function() {
if(typeof analytics !== undefined) {
analytics.startTrackerWithId("UA-872489XX-1"); // set your trakId
console.log("Analytics Initialized");
} else {
console.log("Google Analytics Unavailable");
}
});
})
If above won't work use following -
$ionicPlatform.ready(function() {
if(window.ga != undefined) {
window.ga.startTrackerWithId("UA-872489XX-1");
} else {
console.log("Google Analytics Unavailable");
}
})
Then in each controller just set view like following -
googleanalyticsApp.controller('ExampleController', function($scope,$cordovaGoogleAnalytics) {
// Here no need to wait to load analytics as already loaded
analytics.trackView('APP first screen');
})
I am trying to redirect to a specific job page when there's a new applicant.
Here's the code:
app.run(function($ionicPlatform, $location) {
$ionicPlatform.ready(function() {
if (ionic.Platform.isWebView()) {
window.plugins.OneSignal
.startInit("xxxxxxxxxxxxxx", "xxxxxxxxxxxx")
.handleNotificationReceived(function(jsonData) {
console.log("/app/upcoming/" + jsonData.payload.additionalData.url);
$location.path("/app/upcoming/" + jsonData.payload.additionalData.url);
})
.endInit();
}
The console shows the correct address but it does not redirect or have any errors.
For Ionic you will need to use $state.go to redirect the user to a different page in your app.
var notificationOpenedCallback = function(result) {
var data = result.notification.payload.additionalData;
if (data && data.targetUrl) {
var state = $injector.get($state);
state.go(data.targetUrl);
}
};
window.plugins.OneSignal
.startInit("YOUR_APPID", "YOUR_GOOGLE_PROJECT_NUMBER_IF_ANDROID")
.handleNotificationOpened(notificationOpenedCallback)
.endInit();
my app.js :
$ionicPlatform.ready(function() {
var admobid = {};
// select the right Ad Id according to platform
if( /(android)/i.test(navigator.userAgent) ) {
admobid = { // for Android
interstitial: 'ca-app-pub-3940256099942544/1033173712'
};
} else {
admobid = { // for Windows Phone
interstitial: 'ca-app-pub-3940256099942544/1033173712'
};
}
if(window.AdMob) AdMob.prepareInterstitial({
adId:admobid.interstitial,
isTesting:true,
autoShow:false
});
my controller.js :
.controller('ChatsCtrl', function($scope, Chats) {
$scope.$on('$ionicView.beforeEnter', function(e) {
if (window.AdMob) AdMob.showInterstitial();
});
$scope.$on('$ionicView.beforeLeave', function(e) {
if (window.AdMob) AdMob.showInterstitial();
});
})
I'm building an ionic framework app for android and i need to add it a interstitial ad, it should run whenever user enters chats tab.
Here is my code, i copied most part of it from http://pointdeveloper.com/how-to-add-interstitial-ads-on-navigation-to-ionic-framework-apps/ .
I changed interstitial: 'ca-app-pub-3940256099942544/1033173712' parts with my own key but it didn't work. Where is the problem?
(I'm testing it in both my android phone(Nexus 5) and Genymotion android emulator)
The internal life cicle for interstitial ads when requestInterstitialAd is called is the following one, you can read more here: https://github.com/appfeel/admob-google-cordova/wiki/requestInterstitialAd
requestInterstitialAd();
options.autoShowInterstitial == true ? showInterstitial : raise(admob.events.onAdLoaded)
So if you have set options.autoShowInterstitial = true, then it should be automatically shown, otherwiese, you should call admob.requestInterstitialAd and wait for admob.events.onAdLoaded with atType === 'interstitial' to be raised. Then you should do something like:
document.addEventListener(admob.events.onAdLoaded, function (e) {
if (e.adType === admob.AD_TYPE.INTERSTITIAL) {
admob.showInterstitialAd();
}
});
I am getting 'AdMob' is undefined when I try to execute the code below. I am trying to use the Cordova AdMob Pro plugin, but can't get past the undefined error(s). I can't confirm if the plugin is even being loaded.
Here are the versions I'm using: AngularJS v1.3.4, Cordova v4.1.2, Ionic v1.2.8. I'm running the code on a Galaxy S5 phone running Android version 4.4.4.
I've tried adding this code in both the app.js and the controller.
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
console.log('window.cordova.plugins: ' + window.cordova.plugins); //returns object
console.log('window.cordova.plugins.AdMob: ' + window.cordova.plugins.AdMob); //returns undefined
console.log('window.AdMob: ' + window.AdMob); //returns undefined
console.log('AdMob: ' + AdMob); //returns undefined
console.log('window.AdmobAd: ' + window.AdmobAd); //returns undefined
console.log('AdmobAd: ' + AdmobAd); //returns undefined
if (window.AdMob || AdMob) {
alert('admob plugin found');
var admob_key = (device.platform == "Android") ? "ADMOB_KEY" : "IOS_PUBLISHER_KEY";
var admob = window.AdMob;
admob.createBannerView(
{
'publisherId': admob_key,
'adSize': admob.AD_SIZE.BANNER,
'bannerAtTop': false
},
function () {
admob.requestAd(
{ 'isTesting': false },
function () {
admob.showAd(true);
},
function () { console.log('failed to request ad'); }
);
},
function () { console.log('failed to create banner view'); }
);
}
});
Just went through this as well and found that the error is from trying to find 'AdMob' when that doesnt exist on if (window.AdMob || AdMob)
if you just use 'if (window.AdMob) {' you should be fine.
I just developed an AngularJS extension on top of AdMob Pro so you can interact better with this Cordova Plugin.
Here is the repository: https://github.com/santonocito/angular-admobpro
Here an example of how you can use it with Ionic:
angular.module('yourApp', ['ionic', 'admob'])
.run(function($rootScope, $state, $log, $adMob) {
$ionicPlatform.ready(function() {
// AdMob
if(window.AdMob) {
var admobid;
if (device.platform == "Android") {
admobid = { // for Android
banner: 'ca-app-pub-your-ad-key',
interstitial: 'ca-app-pub-your-ad-key'
};
} else {
admobid = { // for iOS
banner: 'ca-app-pub-your-ad-key',
interstitial: 'ca-app-pub-your-ad-key'
};
}
$adMob.createBanner( {
adId: admobid.banner,
autoShow: true,
bgColor: 'black',
position: $adMob.position.BOTTOM_CENTER
});
$adMob.prepareInterstitial({
adId: admobid.interstitial,
autoShow: false
});
}
});
});
1.install admob phonegap plugin
cordova plugin add admob
init admob plugin,init plugin after deviceready event
admob.initAdmob("admob banner ID","admob interstitial ID");
3.show admob ads
admob.showBanner(admob.BannerSize.BANNER,admob.Position.TOP_APP);//show banner at the top of app
ref:https://github.com/admob-google/admob-cordova
I have an AngularJS app, and I want to implement G+ sign-in. I've gone through their samples, and they work as standalone apps.
https://developers.google.com/+/web/signin/
In my Angular app, I am able to display the G+ sign-in button. But I'm stuck on the callback. Do I put the callback function in my controller js file?
If so, and given this controller:
app.controller('myController', function ($scope) {
function signinCallback(authResult) {
On my data-callback, how do I name it so that it goes to signinCallback inside myController?
<span id="signinButton">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="123456789.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read"
</span>
</span>
The Google+ PhotoHunt sample app demonstrates an AngularJS integration with Google+. The sample is available in Ruby, Java, Python, and C#/.NET for web.
Of note should be the following code in the AngularJS front-end:
Markup to render the button in:
<span id="signin" ng-show="immediateFailed">
<span id="myGsignin"></span>
</span>
JavaScript to glue the markup to code:
$scope.signIn = function(authResult) {
$scope.$apply(function() {
$scope.processAuth(authResult);
});
}
$scope.processAuth = function(authResult) {
$scope.immediateFailed = true;
if ($scope.isSignedIn) {
return 0;
}
if (authResult['access_token']) {
$scope.immediateFailed = false;
// Successfully authorized, create session
PhotoHuntApi.signIn(authResult).then(function(response) {
$scope.signedIn(response.data);
});
} else if (authResult['error']) {
if (authResult['error'] == 'immediate_failed') {
$scope.immediateFailed = true;
} else {
console.log('Error:' + authResult['error']);
}
}
}
$scope.renderSignIn = function() {
gapi.signin.render('myGsignin', {
'callback': $scope.signIn,
'clientid': Conf.clientId,
'requestvisibleactions': Conf.requestvisibleactions,
'scope': Conf.scopes,
'apppackagename': 'your.photohunt.android.package.name',
'theme': 'dark',
'cookiepolicy': Conf.cookiepolicy,
'accesstype': 'offline'
});
}
Within processAuth, you should see an access token and can update your UI to reflect this. You can also see the full controller's JavaScript code on GitHub.
I am not sure if this works, but I would try it like this:
module.factory("GPlusAuthService", function ($q, $window) {
var signIn;
signIn = function () {
var defered = $q.defer();
$window.signinCallback = function (response) {
$window.signinCallback = undefined;
defered.resolve(response);
};
gapi.auth.signIn({
clientid: "123456789.apps.googleusercontent.com"
cookiepolicy: "single_host_origin"
requestvisibleactions: "http://schemas.google.com/AddActivity"
scope: "https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read",
callback: "signinCallback"
})
return defered.promise;
};
return {
signIn: signIn;
}
});
module.controller('myController', function ($scope, GPlusAuthService) {
$scope.signIn = function() {
GPlusAuthService.signIn().then(function(response) {
});
}
});
<span id="signinButton" ng-controller="myController">
<span class="g-signin" ng-click="signIn()"></span>
</span>
Function that is going to be called after user agrees to sign in is specified in data-callback, this function needs to be globally accessible, that is bound to window object.
Accessing global object from controller is an anti-pattern, as a middle ground you can use $window provided by Angular, which you can mock in your tests