46

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

アプリを通常のウェブページのように扱い、ページの先頭にJavaScriptを配置することで、GoogleAnalyticsを入手できるかどうか疑問に思いました。

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

4

14 に答える 14

34

ビデオをチェックして、実際の動作を確認してください。

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

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

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

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

基本的に、Google Analyticsはfile：///urlから使用されている場合は機能しません。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>

これをシミュレーターでテストしたところ、GoogleAnalyticsのリアルタイムビューを使用して機能していることが証明されました。シミュレーターはiOS5.0で動作していました。私の電話はまだiOS4.2にあり、デバイスでテストしたところ、リアルタイムトラッキングに表示されませんでした。

スレッドの中で、誰かがAndroid 4.0以降で同じ問題について言及しました...将来的にはこれに対するより良い解決策があることを願っていますが、今のところ、これは私のアプリの基本的な分析を取得するための最も簡単で最も複雑でない方法です。オフライン追跡はできませんが、とにかく気味が悪いです。

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

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

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

于 2012-06-14T05:02:39.720 に答える
30

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

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

// 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でうまく機能します。まもなく、より多くのデバイスをテストします。お役に立てれば ！:)

于 2013-01-04T09:37:54.833 に答える
25

これは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パッケージアプリの両方で実行できるWebアプリのコメント付きコードです。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アカウント

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

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

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

その他の注意事項

  • <access>今ではすべてがhttpsを超えており、あなたとCSPでhttpプロトコルはもう必要ありません
  • *.google-analytics.comCSPへの書き込みは機能しないことに注意してください。このポリシーはChrome（56）では機能しますが、Cordova（5.6.0）では機能しません。
  • Googleアナリティクスでは、他の場所で読んだようなACCESS_NETWORK_STATEやACCESS_WIFI_STATEなどのアプリケーション権限は必要ありません。
  • これらはすべて、CrosswalkプラグインがインストールされたAndroidアプリ（iOSアプリでも機能することを期待しています）でテストされました。
于 2017-02-14T01:47:19.383 に答える
3

私はモバイルウェブサイトとしてIonicアプリ（cordovaに基づく）を使用していて、GAはそれのために働いていました。同じアプリをネイティブiOSに出荷すると、動作しなくなりました。

問題1.
シミュレータのログを確認したところ、GAが正しくロードされていなかったことがわかりました。ロードを試みていましたfile://。これを修正するために、私はhttps:下のGAURLの前に追加しました

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

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

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

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

于 2016-01-28T09:16:37.310 に答える
3

年は2019年11月です。Googleは、優れたドキュメントや下位互換性なしに、APIや「最高の」プラクティスなどを更新し続けています。

これが私のソリューションのために私がしたことです。ここでの2つの答えからの組み合わせを使用しました。

始める前に、これを読んでいて、cordovaのgoogle analytics / firebaseプラグインに問題がある場合は、そのままにしておいてください。webviewを使用する場合は、プラグインは必要ありません。

1）まず、Google Analyticsにアクセスして、「Webサイト」アクティビティを測定する新しい「プロパティ」を作成する必要があります（これを読んでいる時点で、それらがどのように呼び出されるかを知っていますが、すべてが「管理者」部分にある必要があります）パネルの）。

ここで頭に浮かぶ質問の1つは、「しかし、URLが必要なのですが、Cordovaアプリを作成しているURLがありません」です。

はい、その通りです。アプリのAPIを使用したURLの場合（これは、そこに入力したURLが機能する可能性が高いことを意味します）

2）次に、@ Louis Amelineの回答の指示に従います。これにより、スクリプトがアプリに読み込まれ、使用できるようになります。

3）この時点で、ブラウザでアプリを実行すると、すべてが正常になり、「ライブ分析」で1人のオンラインユーザーがいることがわかるようになります。

4）これをWebviewで機能させるには、@ Guillaume Gendre（更新されたもの）の回答に従う必要があります。コードをコピーして（もちろんtrackingIdを使用して）貼り付けたところ、アプリケーションをビルドしてAndroidで実行すると、期待どおりに機能し、分析が送信されます。

私のソリューションが実際に誰かを助け、時間を節約できることを願っています。すべてのプラグインは、バージョンの問題が原因で終了しないビルドの失敗の深い穴につながるため、そのままにしておきます。

また、私のアプリはReactベースですが、これは純粋なjsであるため、すべてのフレームワークとライブラリで機能するはずです。特定のライブラリに接続されていないため、このタイプの問題にはこの種のソリューションを使用することをお勧めします。

于 2019-11-09T15:41:46.717 に答える
2

私のために働いていませんでした。グーグルコードがクッキーを使用し、file：//urlsでは機能しないという問題。

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

于 2012-12-23T12:54:23.077 に答える
1

私はsegment.io--analytics.jsライブラリをHTML5/meteorアプリケーションに実装しました。

phonegap（3.1）に分析プラグインがありません。iOSですぐに動作しました。

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

うまくいけば、これは誰かが謎のバグを探すのに数時間を避けるのに役立つでしょう。

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

于 2014-02-25T10:57:57.877 に答える
1

このphonegapプラグインは、Googleアナリティクスをphonegapアプリに統合するのに役立ちます。 このブログを読んで、GoogleAnalyticsをphonegapに統合する方法を学びましょう。ここから動作するデモコードをダウンロードすることもできます。

于 2015-04-02T12:05:13.153 に答える
1

私にとって、プラグインは必要ないことがわかりました！Angular 8アプリをCordovaでラップしています（Ionicと同様のユースケース）。GoogleAnalyticsに新しい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：//プロトコルを使用して提供している間、ページ変更の自動追跡がないためです。

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

于 2019-08-18T11:49:13.270 に答える
0

Android4.1または別の特定のプラットフォームでGuillaumeGendreの優れたソリューションで問題が発生した場合は、これで問題が解決する可能性があります。

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

于 2013-09-13T08:56:27.723 に答える
0

迅速で汚い解決策。このように、光を隠したiframeを使用できます。

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

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

于 2014-05-16T04:43:09.743 に答える
0

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のライブラリ

于 2015-02-25T16:10:28.430 に答える
0

注：モバイルプラットフォーム用に生成されたGoogle AnalyticsクライアントトラッキングIDは、IOSとAndroidのみをサポートします。したがって、Googleアナリティクスを追跡する場合は、ウェブサイト用に作成したことを確認してください。ウェブサイトのトラッキングIDのみが、すべてのプラットフォームアプリのPhoneGapで機能します。次に、以下のリンクから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>
于 2015-07-09T11:24:24.117 に答える
0

2セント追加したいと思います。ここにいるみんなが分析プラグインに不運だったので、純粋なjavascriptソリューションを探し始めました。

私はこの答えに従いました、そしてそれは私のために働いています。つまり、Google Analyticsで、ブラウザおよびiOSシミュレーターからユーザーアクティビティをリアルタイムで分離していることがわかります。（Androidはまだテストしていません。）

スクリプトを少し変更しました。

1）

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

に変更されました

if(document.URL.indexOf('http') !== 0){

httpsケースを含める。

2）私がいる場所とは関係ありません：ブラウザまたはモバイルアプリでは、次のようなイベントを追跡します：

ga('send', 'event', '<myAppName>', '<eventName>');

そのため、同じアナリティクスプロパティでさまざまなアプリケーションを追跡できます。

Google Analyticsで1つのプロパティを作成し、このプロパティの下に3つのビューを作成しました。1つはWebタイプ、2つはモバイルタイプです。

各ビューに適用されたカスタムフィルター：

iOSビューに適用された値がiOSのフィールドオペレーティングシステムにフィルターを含める

適用されたAndroidビューに値Androidのフィールドオペレーティングシステムにフィルターを含める

Webビューに、 AndroidとiOSの値を持つフィールドオペレーティングシステムに2つの除外フィルターを適用しました

ハッピーコルドビング！

于 2019-12-09T21:20:25.287 に答える