Integrate Google Analytics on Ionic WooCommerce App - ionic-framework

I want to integrate Google Analytics on mine Ionic / WooCommerce App, so I added a Google Analytics plugin:
cordova plugin add https://github.com/danwilson/google-analytics-plugin.git
ionic cordova plugin add cordova-plugin-google-analytics
npm install --save #ionic-native/google-analytics
I saw this codes on ionic framework so I added them on the app.component.ts:
import { GoogleAnalytics } from '#ionic-native/google-analytics';
constructor(private ga: GoogleAnalytics) { }
...
this.ga.startTrackerWithId('YOUR_TRACKER_ID')
.then(() => {
alert('Google analytics is ready now');
this.ga.trackView('test');
// Tracker is ready
// You can now track pages or set additional information such as AppVersion or UserId
})
.catch(e => console.log('Error starting GoogleAnalytics', e));
I added tracker Id…
After running this on the browser the console logs what I got was GoogleAnalytics.startTrackerWithId, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator:
cordovaWarn # util.js:66
app.component.ts:155 Error starting GoogleAnalytics cordova_not_available).
So I produced an Apk tested on a device then the console log was (Google analytics is ready now). I checked the analytics dashboard still showing 0 users, 0 device.
Any help on this is appreciated.

That is because in the browser you are not in a cordova context.
You need to wrap that code inside a platfom ready event like so:
constructor(platform: Platform, private ga: GoogleAnalytics) {
///
platform.ready().then(() => {
this.ga.startTrackerWithId('YOUR_TRACKER_ID')
.then(() => {
alert('Google analytics is ready now');
this.ga.trackView('test');
// Tracker is ready
// You can now track pages or set additional information such as AppVersion or UserId
})
.catch(e => console.log('Error starting GoogleAnalytics', e));
});
///
}
This means this will only execute when you are in a device context.
However, you can choose to implement GA in Web way by putting the GA scripts in your index.html, import typings for GA and it should work in all platforms and environments

Related

How can I get a google IdToken?

I am using this plugin: cordova-plugin-googleplus
After the user selects his Gmail correctly I get an object with a lot of different user informations
and on the backend side I use Java and followed this tutorial: backend-auth
Now I got the problem that I only get an Access Token via the googleplus plugin, but I need an IDToken. This is the code I used:
this.googlePlus.login({webclientId:'778525824123-83qa65tspdfd5c6i6roquf3dd41m3nk8.apps.googleusercontent.com'})
.then(res => {
console.log(res);
}
)
.catch(err => console.error(err));
Maybe there is something wrong with my webclientId? I don't know.
I solved it by not using the npm version, I used:
ionic cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-googleplus ......

Ionic 3 - how to open urls (hrefs) of rich text content

I have an ionic 3 chat application. In the chat messages users would like to place links (urls) to external resources.
Is there any opportunitiy to make this urls clickable (for chat message receivers) for opening that external resources?
Example:
Thanks in advance
Install InAppBrowserPlugin -- link
$ ionic cordova plugin add cordova-plugin-inappbrowser
$ npm install --save #ionic-native/in-app-browser
then on url call make your logic ... eg:
import { InAppBrowser } from '#ionic-native/in-app-browser';
constructor(private iab: InAppBrowser) { }
...
const browser = this.iab.create('https://ionicframework.com/');
browser.show();
// browser.close()

Ionic native device plugin #ionic-native/device returns all nulls

I need to do a device detection in my Ionic project so I've installed #ionic-native/device plugin per instructions here: https://ionicframework.com/docs/native/device/
However when I wire it in inside of a component, then run ionic serve to preview changes, console.log returns Device object with all values set to null, same happens when I try to use individual property e.g. this.device.model:
Here is how I use it inside of a component:
import {Device} from "#ionic-native/device";
// ...
#Component({
// ...
})
export class MyComponent {
constructor(private device: Device) {
}
ngOnInit() {
console.log(this.device);
}
}
And I've added it to AppModule as well:
import {Device} from "#ionic-native/device";
// ...
#NgModule({
// ...
providers: [
Device
]
})
export class AppModule() {
}
Cordova device plugin was auto injected into config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget <!-- ... --> >
<!-- ... -->
<plugin name="cordova-plugin-device" spec="2.0.0" />
</widget>
Here is my Ionic stack (at least packages that should be relevant to the issue):
"#angular/*": "^5.2.4", // all packages
"#ionic-native/*": "4.5.2", // all packages
"#ionic-native/device": "4.5.2"
"ionic-angular": "3.9.2",
"cordova-plugin-device": "2.0.0",
"typescript": "2.6.2"
Thanks!
UPDATE:
I was able to get device details in the browser by running:
cordova run browser
This assumes you have added browser as a platform, if not run:
ionic cordova platform add browser
(From the link in the answer posted by #AndrewLively: https://stackoverflow.com/a/49034015/448816)
If you are running in the browser using ionic serve then most of the ionic-native plugins won't work since it is not treated by ionic as a valid browser platform.
This is not well documented, but is discussed in an issue in the ionic-native repo.
Should see the packages installed and see they are in the same version in "package.json"
Core and Native packages must be in the same version or the native package should not be larger.
The folder "platforms" must be delete
Use these commands
ionic build
ionic cordova platform add browser
cordova run browser
code for .ts
console.log('Device Model is: ' + this.device.model);
And works !

Ionic Facebook Plugin Error

I am trying to add the Facebook plugin (https://github.com/Wizcorp/phonegap-facebook-plugin) to my existing Ionic app, but I cannot get it to work.
I am currently getting the following when I include the plugin script:
Can't find variable: require
Here's the script in my markup:
<script src="cordova.js"></script>
<script src="https://cdn.rawgit.com/Wizcorp/phonegap-facebook-plugin/master/facebookConnectPlugin.js"></script>
If I throw in a reference to requirejs (which I'm using later in the markup for bootstrapping the Angular + RequireJS part of my app), I end up with the following error:
Module name "cordova/exec" has not been loaded yet for context: _. Use require([])
What am I doing wrong?
See the ngCordova facebook plugin document
ngCordova Facebook Plugin
enjoy the program
sample code===
first plugin install and then inject $cordovaFacebook in controller and write some code below
$scope.facebook_login = function() {
$cordovaFacebook.login(["public_profile", "email", "user_friends"])
.then(function(success) {
console.log('Arguments', arguments);
$http.get("https://graph.facebook.com/v2.2/me", {
params: {
access_token: success.authResponse.accessToken,
fields: "id,name,gender,email,birthday",
format: "json"
}
}).then(function(result) {
console.log(result);
}, function(error) {
console.log(error);
});
}, function(error) {
console.log(error);
});
}
as far as i understand you need to install this plugin on your app. I don't see in install guid ability to include it from web. It should build some things and add some settings to cordova. Have you read this instruction?
instruction on git

Exception running command on UI thread

I add Prime31 plugin for GooglePlayGameServices but it don't want to authenticate and send an error: "Exception running command on UI thread"
if( GUILayout.Button( "Authenticate" ) )
{
PlayGameServices.authenticate();
}
public static void authenticate()
{
if( Application.platform != RuntimePlatform.Android )
return;
_plugin.Call( "authenticate" );
}
And I did all this tutorial steps.
Please make sure that you are using the Activity Sharing System. And also that The r21 Google Play SDK now requires that you are using JDK 1.7 or newer to compile. It will not compile with older JDK versions. The r21 Play SDK also has a bug with regard to silent authentication. We had to turn off automatic silent authentication in version 2.10 of the plugin due to a bug in the Play SDK. You can use the beginSilentAuthentication method when you are ready to actually authenticate the user or the authenticate method.