How to connect Google Analytics in a Flutter Web App? - flutter

I'm trying to use the Google API Package (Pub Dev) but with no lucky to undestand how to connect it in my Flutter Project.

Hi 🙂 you need to use this package https://pub.dev/packages/firebase_analytics
you can find a sample App using analytics following this link
Google Analytics works on mobile Apps too and provides all sorts of useful features check this link for more info 😉

You need to add dependency for analytics in android/app/build.gradle, implementation 'com.google.firebase:firebase-analytics'. If you need to log events then you might want to use the package https://pub.dev/packages/firebase_analytics. Otherwise just adding above dependency is sufficient.

If you are looking for a simple approach more than using a package, then you can follow the below solution.
Add the following app.js in web/ directory
// file: /web/app.js
function sendNavigation(location) {
// Replace UA-XXXXXXXXX-X with Google Analytics ID
gtag('config', 'UA-XXXXXXXXX-X', { page_path: location });
}
Add the script into web/index.html by adding
<head>
<!--...-->
<script src="app.js" defer></script>
</head>
Now, you can simply call
js.context.callMethod('sendNavigation', ['routePath']);
when the user navigates to the page in dart file.
You can learn more about this from a blog I wrote - link

Related

Flutter Web Get Chrome Extension info from Polkadot.js web3Enable

I am hoping to confer on a strategy for a flutter web app (as can ignore mobile cases here) to get chrome extension info for a Polkadot.js wallet from the Polkadot browser extension.
My first thought is to use dart's JS library and use the Polkadot extension JS package and then try and pull the info from there. However, I'm not sure how to properly use this in flutter as it is a whole package full of dependencies, not just a single JS file. Also it is in TS not JS. Any thoughts here?
Eg., I need a JS file to be able to call this; and for flutter to in turn call the JS file:
import {
web3Enable,
} from '#polkadot/extension-dapp';
By writing out a "bridging" layer, you can do it easily.
Firstly, create a normal javascript (or typescript) application (nothing related to Flutter). You should be able to happily use the polkadot lib in your js/ts code without any problem. You may need to learn a bit about how to develop js code normally (e.g. you can depend on polkadot using npm, etc).
One small thing is that, you should "expose" some object publicly in your js/ts code. For example, your code may look like window.myFancyFunction = function() { call_some_polkadot_function(); }. Of course you can do more things like exposing other functions/objects/...
Then, you can bundle this normal js/ts application into a .js file. This is still very normal for js/ts developers and should have nothing special to deal with here, and you still do not need to touch Flutter at this stage.
Next, load this single-filed .js file when you are loading your Flutter Web application. You may simply do this by editing your Flutter Web's html file and add <script src="my_single_filed_js_mentioned_above.js" />. Notice that, when loading this script, it simply sets window.myFancyFunction and does not do anything more. Still very trivial here, should have no problem.
Lastly, in your Flutter Web code, i.e. Dart code, call that window.myFancyFunction function. For example, Flutter Web : How to run javascript using dart js says you can do import 'dart:js' as js; js.context.callMethod('myFancyFunction', ['some arguments']);

How do I actually install and use YouTube Android Player API?

I want to make a Flutter app that can play YouTube playlists using the YouTube Android Player API, found here: https://developers.google.com/youtube/android/player
The "Getting started" instructions say:
The following documents will help you to set up your development environment and use the YouTube Android Player API:
The download page provides a link to download the API client library
and JavaDocs.
The instructions for registering your application explain how to
register your app in the Google API Console and to obtain an Android
API key, which you will need to use the API.
The setup instructions explain how to set up an API project using
either Eclipse or IntelliJ.
The sample applications overview describes the sample applications
included in the API download.
The JavaDoc reference provides detailed definitions of the API's
interfaces, classes, methods, and enums.
I've followed every step in those points and links, but I still don't know how to use the provided package in my code! I now have a sample app running on my phone, and apparently using the package... which is cute... but it is in Java, which I don't speak, so it doesn't help me make my own app! Plain English instructions would have been more helpful...
I have tried:
import 'com.google.android.youtube.player'
and even:
import '<path>/YouTubeAndroidPlayerApi.jar'
but Dart Analysis tells me the URL doesn't exists. And when I try any of the classes that are supposed to be included in the package, I get that it's not defined.
I've tried right-clicking on the YouTubeAndroidPlayerApi.jar file and choosing "Add as library", but same result.
So what I normally do is to write something in my pubspec.yaml file, like:
dependencies:
provider: ^4.3.2+3
Then I would run pub get.
Then I would write import <package name> in my code, and now the classes will be ready to use.
What is the correspondence in this case? What am I supposed to do with this package so that I can use the classes in my code? I'm using Android Studio.
Most grateful for guidance!

How do I access Ionic framework from Trigger.io?

I want to use the Ionic UI framework with Trigger.io for my hybrid mobile app, but it isn't clear to me just how to combine the two in my code because it's not like using Jquery where you just add the library to a script tag.
After install, both of these frameworks provide their own "hello world" type of index.html file, their own css and js files as well as framework specific configuration files which I know are important. So which one do I use as a base and how do I call into the other framework from that base? How do I structure the project file tree to combine the two so that when I go to do an app build for distribution, there isn't some crazy error because the frameworks are set up to look for their own files via set paths?
Here is one answer I found in my googling.
What steps do I need to take to use the Ionic Framework with trigger.io?
here is an example project on git hub:
https://github.com/travisrussi/ionic-triggerio
here is the link to the ionic cdn to be used for testing:
https://code.ionicframework.com/#

How can I accessing a 3rd party plugin (phonegap-facebook-plugin) in Intel XDK?

I am importing the Wizcorp phonegap-facebook-plugin using the intelxdk.config.additions.xml file with this code:
<intelxdk:plugin intelxdk:name="com.phonegap.plugins.facebookconnect" intelxdk:value="https://github.com/Wizcorp/phonegap-facebook-plugin/">
<intelxdk:param intelxdk:name="APP_ID" intelxdk:value="MyActualAppID" />
<intelxdk:param intelxdk:name="APP_NAME" intelxdk:value="fizz points" />
</intelxdk:plugin>
I've read and understand that I will not be able to test this 3rd party plugin in the emulator, or via the test or debug tabs, so I've created a test build for Android.
Based on the documentation, I believe I am supposed to reference this API via calls to the facebookConnectPlugin, such as:
facebookConnectPlugin.login(["publish_stream", "publish_actions", "offline_access"],
fbLoginSuccess,
function (error) { alert("There was an error: " + error) });
However, I know that in the built app, as in the emulator, the facebookConnectPlugin is not defined, because I get an alert based on the following block:
if (typeof facebookConnectPlugin != 'undefined'){
// do stuff
} else {
alert("FacebookConnectPlugin Not Defined");
}
I assume this is because I need to include the 3rd party library in my code in addition to including it in my project where suggested by the helpful comments, something like:
<!-- Most third-party libraries should go here. References (below) are just examples to give you the general idea... -->
<!-- <script src="lib/mc/hammer.js"></script> -->
Initially, I didn't know the path where the 3rd party library is ultimately located in the package after the build tool retrieves it. But I was told that I could change the .apk extension to .zip extract and explore the contents.
I did this, and found that the library was stored in:
www/plugins/com.phonegap.plugins.facebookconnect/www/phonegap/plugin/facebookConnectPlugin/facebookConnectPlugin.js
So I added the following to my index.html file:
<script src="plugins/com.phonegap.plugins.facebookconnect/www/phonegap/plugin/facebookConnectPlugin/facebookConnectPlugin.js"></script>
However, when built, my test to see if the FacebookConnectPlugin is defined still fails.
Thanks!
Noah
[I've essentially asked the same question on the Intel forums here: https://software.intel.com/en-us/forums/topic/536743 . No solution yet, but if I get one I will post it here.]
You need to build your app and install it on your device to test the WizCorp Facebook plugin. Please make sure you follow the instructions for configuring your app on Facebook.
note the Emulator (simulator) does not support third party plugins as you have noted. Same for using App Preview to test. You must build your app in the cloud.
thanks,
Ian
Are you accessing the facebookConnectPlugin object from inside device ready event?
document.addEventListener("intel.xdk.device.ready",function() {
// try in here
}, false);
It could be undefined if you are accessing it from outside as the plugin is not ready to be used yet.

WinJS.UI Metro Animation Library

I'm starting to port over my web app that I've built with Sencha Touch into the Windows 8 world. I'm seeing a lot of WinJS.UI documentation, basically telling me that there are more 'native' feeling animations and UI actions already build into this framework.
My app is already structured, but I'd like to mix in WinJS.UI if I can. How do I go about doing this? I haven't found a link to download the library or anything of the sort.
For example, this link:
http://blogs.msdn.com/b/windowsappdev/archive/2012/05/01/fast-and-fluid-animations-in-your-metro-style-app.aspx
I see that they are using:
<script>
function runAnimation(){
enterPage = WinJS.UI.Animation.enterPage(input);
}
</script>
But I find no documentation on where to include the library.
Little bit lost, any help is appreciated!
These animations are included in the UI.Js from the WinJS Package -- this is the same WinJS that is included in the default Visual Studio Templates. Just create a new HTML Windows Store application, and the details will be there.
Here's your library: http://code.msdn.microsoft.com/windowsapps/Using-the-Animation-787f3720
You can deploy this on your computer and play with the animations.