web-dev-qa-db-ja.com

プラグインなしでPhonegapでGoogle Analyticsを使用する方法

私はアプリを作成していますが、ユーザーから分析を取得したいです。 Phonegapプラグインを使用しようとしましたが、それを実装しようとして運がありませんでした。

アプリを通常のWebページのように扱い、ページの先頭にJavaScriptを配置することでGoogleアナリティクスを取得できるかどうか疑問に思っていました。

これを行うためのより良い方法はありますか？ Phonegap Google Analyticsは、私がやろうとしていることよりもはるかに優れていますか？

cordovagoogle-analyticsphonegap-plugins
44
Mike

[編集] Googleアナリティクスは、ハイブリッドアプリのローカルストレージで動作するようになりました。

Googleアナリティクスには、Cookieの代わりにLocalStorageを使用するための ここで説明するオプション があり、Webビューで動作させるためのハックもあります（file:// urls）。したがって、前に提案したコードを使用する代わりに、これを行うことができます：

// THIS IS FOR LOCALSTORAGE
var GA_LOCAL_STORAGE_KEY = 'ga:clientId';
ga('create', 'UA-XXXXX-Y', {
  'storage': 'none',
  'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
});
ga(function(tracker) {
  localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
});

// THIS IS FOR FILE URL SUPPORT
ga('set', 'checkProtocolTask', function(){ /* noop */});

// And then as usual...
ga('send', 'pageview');

以前の回答内容：

Alexによって提案されたpokkiソリューションは、Pokkiの必要性をなくすためにいくつかの調整を加えて正常に機能しています。

このクリーンアップバージョンのgitプロジェクトをここで作成しました。

https://github.com/ggendre/GALocalStorage

Android 4.1およびios6で動作します。すぐにもっと多くのデバイスをテストします。これが役に立てば幸いです！:)

25
Guillaume Gendre

ビデオで実際の動作を確認してください。

http://screencast.com/t/6vkWlZOp

いくつかの調査の後、解決策を見つけました。 Phonegap Googleグループでこのスレッドに出会いました： https://groups.google.com/forum/#!msg/phonegap/uqYjTmd4w_E/YD1QPmLSxf4J （TimWとDan Levineに感謝します！）このスレッドで、プラグインなしでGoogle Analyticsを使用できることがわかりました。 Googleからga.jsファイルをダウンロードするだけです http://www.google-analytics.com/ga.js （保存するだけです）ページをwwwフォルダーに入れます）

次に、ga.jsファイルに1文字を追加して変更します。 ga.jsファイルでWordの「file：」を検索し、「_ file：」に置き換えます。

上記にリンクしたスレッドで、「TimW」がこの理由を説明しています。

基本的に、file：/// urlから使用されている場合、Google Analyticsは機能しません。 iOS/PhoneGapではこれが当てはまります。この問題を解決するには、まずGoogleからga.jsファイルをダウンロードし、ローカルビルドの一部として含める必要があります。このファイルが難読化されていることがわかります。 1回だけ発生する文字列「file：」をファイルで検索します。見つかったら、先頭にアンダースコアを追加します（つまり、「_ file：」になります）。これにより、ページの場所のプロトコル（ "file："）と一致しなくなります。

Ga.jsファイルに1つの文字を追加したら、ページの上部に次の文字列を含めるだけです。

<script type="text/javascript" src="ga.js"></script>
    <script>
 var _gaq = _gaq || [];
    _gaq.Push(['_setAccount', 'UA-YOUR_ID_HERE']);
    _gaq.Push(['_setDomainName', 'none']);
    _gaq.Push(['_trackPageview', 'NAME_OF_PAGE']);
    </script>

これをシミュレータでテストし、Googleアナリティクスのリアルタイムビューを使用して機能していることを証明しました。シミュレーターはiOS 5.0で動作していました。私の電話はまだiOS 4.2であり、デバイスでテストしたとき、リアルタイムトラッキングに表示されませんでした。

スレッドで、誰かが同じ問題をAndroid 4.0 + ...と言いました...将来的にはこれに対するより良い解決策があることを願っていますが、現時点ではこれが最も簡単で簡単な方法ですアプリの基本的な分析。オフライントラッキングはできませんが、とにかく気味が悪いです。

IOS 4およびAndroidユーザーは市場では少数派ですが（円グラフを参照）：

http://static7.businessinsider.com/image/4fd65fac6bb3f7925700000f/chart-of-the-day-ios-vs-Android-june-2012.jpg

すべてのOSからデータを取得したいです。

34
Mike

これは2017年2月であり、analytics.jsを編集する必要はなく、ライブラリやプラグインはもう必要ありません。少なくとも、私はそれらを必要としませんでした。過去数年間に述べられた多くのことは非推奨または単に時代遅れであるため、ここに最新の包括的なガイドがあります。

1。 config.xmlファイル

Config.xmlで、クロスサイトリクエストを許可する必要があります。

<access Origin="https://www.google-analytics.com" />

2。 HTML

CSPメタタグでタグを選択する場合は、Googleへの呼び出しも許可する必要があります。次のようになります。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' 'unsafe-eval' https://ssl.gstatic.com https://www.google-analytics.com;">

3。 javascript

以下は、ブラウザーとCordovaパッケージアプリの両方で実行できるwebappのコメント付きコードです。ブラウザーを気にしない場合は、elseブロックを無視できます。

// the default GA code, nothing to change
(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','https://www.google-analytics.com/analytics.js','ga');

var fields = {
  // note: you can use a single tracking id for both the app and the website,
  // don't worry it won't mix the data. More about this in the 3rd section
  trackingId: 'UA-XXXXXXXX-Y'
};

// if we are in the app (the protocol will be file://)
if(document.URL.indexOf('http://') !== 0){

  // we store and provide the clientId ourselves in localstorage since there are no
  // cookies in Cordova
  fields.clientId = localStorage.getItem('ga:clientId');
  // disable GA's cookie storage functions
  fields.storage = 'none';

  ga('create', fields);

  // prevent tasks that would abort tracking
  ga('set', {
    // don't abort if the protocol is not http(s)
    checkProtocolTask: null,
    // don't expect cookies to be enabled
    checkStorageTask: null
  });

  // a callback function to get the clientId and store it ourselves
  ga(function(tracker){
    localStorage.setItem('ga:clientId', tracker.get('clientId'));
  });

  // send a screenview event
  ga('send', {
    // these are the three required properties, check GA's doc for the optional ones
    hitType: 'screenview',
    // you can edit these two values as you wish
    screenName: '/index.html',
    appName: 'YourAppName'
  });
}
// if we are in a browser
else {

  ga('create', fields);

  // send a pageview event
  ga('send', {
    // this is required, there are optional properties too if you want them
    hitType: 'pageview'
  });
}

3。あなたのGA account

  • モバイルアプリのトラフィックを監視するには、Appタイプのビューを作成します。

WebサイトからのWebアプリのトラフィックを監視する必要がない場合は、ここで読むのをやめるか、そうでなければ読み進めてください。ウェブサイトとアプリの両方の追跡に単一のアカウントを使用していると思います。

  • 作成されたビューに「Application？=> yes」という名前のカスタムフィルターを適用して、screenviewヒットのみを表示します。公式ガイドがあります こちら
  • 次に、Webサイトからのトラフィックを追跡するには、Websiteタイプの2番目のビューを作成します。カスタムフィルター「Application？=> no」を適用します。
  • オンラインとアプリ内のトラフィックの統合ビューが必要な場合は、Appタイプの3番目のビューを作成します。デフォルトでは（フィルターなし）、すべてのデータが表示されます。

追記

  • これですべてがhttpsを介して処理されるようになり、<access>およびCSP
  • *.google-analytics.com CSPでは機能しません。そのポリシーはChrome（56）で機能しますが、コルドバ（5.6.0）では機能しません
  • Googleアナリティクスでは、他の場所で読んだようなACCESS_NETWORK_STATEやACCESS_WIFI_STATEなどのアプリケーション権限は必要ありません。
  • これはすべて、Androidアプリ（iOSアプリでも動作するはずです）、Crosswalkプラグインを使用してテストされました。
24
Louis Ameline

私はIonicアプリ（cordovaに基づく）をモバイルWebサイトとして使用し、GAはそれのために働いていました。動作を停止。

問題1。
シミュレーターのログを確認したところ、GAが正しくロードされていませんでした。ロードしようとしましたfile://。これを修正するために、https: to GA下のURL

(window,document,'script','//www.google-analytics.com/analytics.js','ga')

問題2。 Googleは、ページプロトコルがhttpまたはhttpsでない場合、デフォルトでリクエストを中止します。これを修正するには

ga('set', 'checkProtocolTask', null);

そして、設定する必要があります。これらの変更を行った後、GAでイベントを確認することができました。それがあなたにも役立つことを願っています。

3
Nirav Gandhi

うまくいかなかった。 GoogleコードがCookieを使用し、file：// URLで機能しないという問題。

Cookieの代わりにlocalStorageを使用する適切な実装を見つけました： https://developers.pokki.com/docs/tutorials.php

2
Alex

HTML5/meteorアプリケーションでのanalytics.jsライブラリであるsegment.ioを実装しました。

Phonegap（3.1）には分析プラグインがありません。 iOSですぐに働きました。

実装後、Androidアプリからの分析は約4時間表示されませんでした。その後、phonegapまたはmeteorの設定を変更せずに機能し始めました。

うまくいけば、誰かがミステリーバグを探すのに数時間かかるのを防ぐことができます。

注：正しいアクセスOriginが設定されていることを確認してください。追加

1
kate

これ phonegapプラグイン は、Google Analyticsをphonegapアプリに統合するのに役立ちます。 このブログを読む Google Analyticsをphonegapに統合する方法の詳細をご覧ください。 here から実際のデモコードをダウンロードすることもできます。

1
Shashi

注：モバイルプラットフォーム用に生成されたGoogleアナリティクスクライアントトラッキングIDは、IOSおよびAndroidのみをサポートします。ウェブサイトはすべてのプラットフォームアプリで電話のギャップを処理します。次に、下のリンクからGALocalStorageをダウンロードして、wwwフォルダーの下のjsフォルダーに配置します。

www
 |__
    js
      |__
          GALocalStorage.js

次に、<head>タグの下に次のコードを記述すると、ダッシュボードにリアルタイムのアクティブユーザーが表示されます。

https://github.com/ggendre/GALocalStorage

       <script>
        ga_storage._setAccount('UA-XXXXXXXX-X'); //Replace with your own
        ga_storage._trackPageview('Home Screen');
        </script>
0
9to5ios

私にとっては、プラグインは必要ないことがわかりました！ Angular 8アプリをCordovaでラップ（Ionicと同様のユースケース）を使用しました）Googleアナリティクスに新しいWebサイトを登録しました。コードフォームを修正しましたGAこんな風に見える：

const gaScript = document.createElement('script');
        gaScript.src = "https://www.google-analytics.com/analytics.js";
        gaScript.type = "text/javascript";
        document.getElementsByTagName('head')[0].appendChild(gaScript);
        gaScript.onload = (ev: Event) => {
            const GA_LOCAL_STORAGE_KEY = 'ga:clientId';
            window['ga']('create', 'XXXX-XXXXX', {
                'storage': 'none',
                'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
            });
            window['ga'](function(tracker) {
                localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
            });

            // THIS IS FOR FILE URL SUPPORT
            window['ga']('set', 'checkProtocolTask', function(){ /* noop */});
            console.log('GA OK!')
        }

そして、GAを通常の方法で使用できます：window ['ga']（ 'send'、 'pageview'、screenName）;これは、配信中にページ変更の自動追跡がないためですfile：//プロトコルを使用します。

このソリューションはDRYであるため非常に便利です。ハイブリッドバージョンとホストバージョンの両方で、アプリにGoogleアナリティクスを埋め込む方法が1つしかないためです。

0
ToM

GALocalstorageライブラリを使用できます。モバイルデバイスでは正常に動作します

セットアップは簡単です

<script type="text/javascript" src="js/libs/GALocalStorage.js"></script>
<script>
    ga_storage._setAccount('UA-37167XXX-1'); //Replace with your own
    ga_storage._trackPageview('/index.html');

</script>

そしてそれは、修正やその他のことではありません。

このライブラリを使用するには、Website AccountにGoogle analyticsを作成する必要があります

GitHubのライブラリ

0
Reza

迅速で汚れたソリューション。 Useは、このように非表示のiframeを使用できます。

<iframe src="http://www.yourwebsite.com/userControls/GoogleAnalytics.html?param=extraParamHere" style="visibility: hidden"></iframe>

また、PhoneGapアプリでページをリクエストするたびに、このiframeをリロードしてトラックを初期化します。

0
Teoman shipahi

Android 4.1または別の特定のプラットフォームでGuillaume Gendreの素晴らしいソリューションで問題に遭遇した人は、これで解決できるかもしれません。

Androidコンソールログに「不明なChromiumエラー：0」が表示される場合、config.xmlでアクセス許可を調整する必要がある可能性があります。問題を修正し、説明しました こちら 。

0
Wytze