Using Google Analytics with CocoonJS
CocoonJS is an excellent platform that will allow you to release your HTML5 application in Google Play or the App Store, as well as in many other application stores. For myself, I decided that I would do my next game on it. Using the CocoonJS container, you get great execution speed without having to rewrite the code. Although I'm pretty sure that the first build of your application on CocoonJS will not be the last.
One of the problems that I recently rested on when developing on CocoonJS was the inability to use Google Analytics. For its work, Google Analytics needs to use the HTTP or HTTPS protocols.
One solution was to grab the analytics.js file somewhere, and maybe slightly modify it. I will not describe this method, since I did not like the idea of keeping this file in my possession and I went the other way.
Instead, I used one of the cool features of CocoonJS: the ability to load something into a standard webview at the same time as Canvas +. You can read about it here .
In fact, the idea is simple. We need to capture a simple Google Analytics tracking page and access it through the CocoonJS API. We will ask this page to send inquiries to Google Analytics. Call it a proxy page for Google Analytics.
')
Here is an example code for the page:
As I said before, the page only initializes Google Analytics and notifies our main page, the application, that we can start tracking.
As soon as you prepare the page, you need to capture it and connect it to the application. Our proxy is ready and we can start pulling it.
I suppose you're going to release your application for the web. Therefore, we will make another substitution function ga () , which will access our proxy page. For a regular web application, we will use Google Analytics as usual.
A proxy page can load for a long time, so you should not pull it directly, because you can lose some requests. To overcome this, we will use a queue in which requests will be saved before loading the proxy. As soon as the proxy is ready, we will send requests from the queue to it and start sending them directly.
Another subtlety is that it is wrong to wait for a message from CocoonJS about loading a proxy page. We must wait until she notifies us of her readiness. The fact is that I repeatedly noticed the execution of load handlers before the page loads itself. If you look at the proxy code, you will see this line:
Now that we have dealt with all the subtleties, we can start writing the code:
It seems to be all. If you read my explanations, the code should be clear to you.
Notice that we do not show a webview with a proxy page. Javascript will work on it even without showing content. This way you can communicate with various services designed for browser applications, and even add a DOM layer to your application. But remember that only one webview can be launched at a time, so you will need to put everything on one page.
I hope this article will be useful to you!
This article is a translation . The author of the original article Remi Vansteelandt .
One of the problems that I recently rested on when developing on CocoonJS was the inability to use Google Analytics. For its work, Google Analytics needs to use the HTTP or HTTPS protocols.
One solution was to grab the analytics.js file somewhere, and maybe slightly modify it. I will not describe this method, since I did not like the idea of keeping this file in my possession and I went the other way.
Instead, I used one of the cool features of CocoonJS: the ability to load something into a standard webview at the same time as Canvas +. You can read about it here .
In fact, the idea is simple. We need to capture a simple Google Analytics tracking page and access it through the CocoonJS API. We will ask this page to send inquiries to Google Analytics. Call it a proxy page for Google Analytics.
')
Here is an example code for the page:
<!DOCTYPE html> <html> <head> <script src="cocoon.js"></script> <script> // , // CocoonJS CocoonJS.App.proxifyConsole(); // Google Analytics (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); // Canvas+ , // - console.log('GA interface ready, informing parent'); CocoonJS.App.forward('window.gaInterfaceIsReady()'); </script> </head> <body> </body> </html> As I said before, the page only initializes Google Analytics and notifies our main page, the application, that we can start tracking.
As soon as you prepare the page, you need to capture it and connect it to the application. Our proxy is ready and we can start pulling it.
I suppose you're going to release your application for the web. Therefore, we will make another substitution function ga () , which will access our proxy page. For a regular web application, we will use Google Analytics as usual.
A proxy page can load for a long time, so you should not pull it directly, because you can lose some requests. To overcome this, we will use a queue in which requests will be saved before loading the proxy. As soon as the proxy is ready, we will send requests from the queue to it and start sending them directly.
Another subtlety is that it is wrong to wait for a message from CocoonJS about loading a proxy page. We must wait until she notifies us of her readiness. The fact is that I repeatedly noticed the execution of load handlers before the page loads itself. If you look at the proxy code, you will see this line:
CocoonJS.App.forward('window.gaInterfaceIsReady()'); Now that we have dealt with all the subtleties, we can start writing the code:
if(!navigator.CocoonJS){ // Google Analytics (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); }else{ var interfaceReady = false; var queue = []; var flushQueue = function(){ var cmd; while(cmd = queue.shift()){ forwardCmd(cmd); } }; var forwardCmd = function(cmd){ CocoonJS.App.forwardAsync(cmd); }; var addToQueue = function(cmd){ queue.push(cmd); if(interfaceReady){ flushQueue(); } }; // window.gaInterfaceIsReady = function(){ interfaceReady = true; flushQueue(); }; // - webview console.log('Creating GAI interface'); CocoonJS.App.loadInTheWebView("http://path.to/your/proxy.html"); // GA window.ga = function(){ var args = ''; for(var i = 0 ; i < arguments.length ; i++){ if(i > 0){ args += ','; } args += JSON.stringify(arguments[i]); } var cmd = 'window.ga(' + args + ')'; addToQueue(cmd); }; } // ga, It seems to be all. If you read my explanations, the code should be clear to you.
Notice that we do not show a webview with a proxy page. Javascript will work on it even without showing content. This way you can communicate with various services designed for browser applications, and even add a DOM layer to your application. But remember that only one webview can be launched at a time, so you will need to put everything on one page.
I hope this article will be useful to you!
This article is a translation . The author of the original article Remi Vansteelandt .
Source: https://habr.com/ru/post/246431/
All Articles