CocoonJSで開発するときに最近遭遇した問題の1つは、Googleアナリティクスを使用できないことでした。 Google Analyticsでは、その作業のためにHTTPまたはHTTPSプロトコルを使用する必要があります。
1つの解決策は、analytics.jsファイルを自宅のどこかにホストし、おそらく少し変更することでした。 私はこのファイルを一緒に保存するという考えが好きではなかったので、この方法については説明しません。
代わりに、CocoonJSのクールな機能の1つを使用しました。それは、Canvas +と同時に標準のWebビューに何かをアップロードする機能です。 あなたはここでそれについて読むことができます 。
実際、アイデアはシンプルです。 単純なGoogle Analyticsトラッキングページをホストし、CocoonJS APIを介してアクセスする必要があります。 このページにリクエストを送信して、Googleアナリティクスにリクエストを送信します。 Googleアナリティクスのプロキシページと呼ぶことができます。
サンプルページコードは次のとおりです。
<!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>
前述したように、ページはGoogleアナリティクスを初期化し、メインページ（トラッキングを開始できるアプリケーション）にのみ通知します。
ページを準備したら、ページをホストし、アプリケーションに接続する必要があります。 プロキシの準備が完了し、プルを開始できます。
私はあなたがあなたのアプリケーションをウェブ向けにリリースすると信じています。 そのため、プロキシページにアクセスするga（）関数の別の置換を行います。 通常のWebアプリケーションでは、通常どおりGoogleアナリティクスを使用します。
プロキシページは長時間ロードされる可能性があるため、一部のリクエストを失う可能性があるため、プロキシページを直接プルしないでください。 これを克服するために、プロキシがロードされるまでリクエストが保存されるキューを使用します。 プロキシの準備が整い次第、キューからリクエストを送信し、直接送信を開始します。
もう1つの微妙な点は、プロキシページの読み込みに関するCocoonJSメッセージを待つのは間違っているということです。 彼女自身が準備ができたことを私たちに通知するまで待つ必要があります。 実際、ページがロードされるまでロードハンドラーの実行に繰り返し気づいています。 プロキシコードを見ると、次の行が表示されます。
CocoonJS.App.forward('window.gaInterfaceIsReady()');
すべての微妙な点を把握したので、コードの記述を開始できます。
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,
すべてのようです。 私の説明を読むと、コードは明確になっているはずです。
プロキシページのあるWebビューは表示されていないことに注意してください。 Javascriptは、コンテンツを表示しなくても機能します。 これにより、ブラウザアプリケーション用に設計されたさまざまなサービスと通信したり、アプリケーションにDOMレイヤーを追加したりできます。 ただし、一度に起動できるWebビューは1つだけなので、1ページですべてを収集する必要があります。
この記事がお役に立てば幸いです！
この記事は翻訳です。 Remi Vansteelandtによるオリジナル記事の著者 。