0

これは数日間私を悩ませてきました、そして私はそれを機能させる方法を見つけられませんでした。私のサイトはJquery、Jquery-Mobile、RequireJSを使用しており、GoogleAnalyticsを追加したいと考えています。

私のアナリティクスのセットアップはそのようなものです（ここも参照してください）：

<script type="text/javascript">
    var _gaq = _gaq || [];
    (function() {
         ... regular stufff 
    })();
// bind to pageshow event
$(document).on('pageshow', 'div:jqmData(role="page").basePage', function (event, ui) {
try {
    _gaq.push(['_setAccount', 'ID';
    _gaq.push(['_gat._anonymizeIp']);
    var url = location.href;
        try  {
            if (location.hash) {
                url = location.hash;
                }
            _gaq.push(['_trackPageview', url]);
            } catch(err) {}
        }); 
    </script>

だから私はアナリティクスのために追跡するためにJQMページショーイベントを聞いています。このスニペットは、すべてのページの最後に貼り付けられます。

私はAnalyticsを次のようにrequireJSにいじりました：

Main.js： 

require.config({ 
    baseUrl: "../js/",  
    paths: {
        "jquery":        "libs/jquery/jquery.min",
        "jqm":           "libs/jquery-mobile/jquery-mobile.min", 
        "analytics":     "https://www.google-analytics.com/ga"
        }

require(['order!jquery', 'order!jqm', 'order!analytics', 'app'],
    function(jquery, jqm, analytics, App){  
        App.start();        
        });

そしてApp.jsで：

var start = function() {
   require(['order!jquery', 'order!jqm', 'order!analytics'],function() {
    // do stuff
   });

問題は、AnalyticsスニペットがすべてのページのHTMLマークアップの最後にあるため、以前にJqueryとJquery Mobileを読み込んでrequireJSで正しく設定したと思いますが、それでもエラーが発生します。

 $ is not defined
  ....ocument).on('pageshow', 'div:jqmData(role="page").basePage', function (event, ui...

最初のページが読み込まれたとき。

HTMLマークアップはrequireの範囲外であり、JQMがロードされる前に解析されるためだと思います。それでも、これを適切に設定する方法が必要です。

質問：
エラーが表示される理由と、それに対して何ができるかについて何か考えはありますか？

手伝ってくれてありがとう！

編集：
わかりました。このように行うと、次のように機能します。

ページヘッダー内で、最初の部分を宣言しています。

<script type="text/javascript">
var _gaq = _gaq || [];

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';     
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

次に、requirejs start関数内で、2番目のスニペットを呼び出しています。

    var start = function() {
        require(['order!jquery', 'order!jqm'],function() {
            var analyticsHasBeenSet; 
            ...
            var analyize = function () {

                if ( analyticsHasBeenSet != true ){
                    analyticsHasBeenSet = true;
                    require(['https://www.google-analytics.com/ga.js'], function (App) {

                        $(document).on('pageshow', 'div:jqmData(role="page"), function() {
                            _gaq.push(['_setAccount', '']);
                            _gaq.push(['_gat._anonymizeIp']);
                            var url = location.href;
                            try  {
                                if (location.hash) {
                                    url = location.hash;
                                    }
                                _gaq.push(['_trackPageview', url]);
                                } catch(err) { // error catch }
                            });
                        });
                     }
                 }
            analyize();

このように、2番目のスニペットはJqueryとJqueryMobileがロードされた後にのみ実行されます。グローバル変数を設定することにより（私は願っています）、バインディングは1回だけ開始されます。これまでのところうまくいくようです。

4

1 に答える 1

1

問題は、注文の使用に関連している可能性が最も高いです! プラグイン。これは、モジュールではなく、標準の .js ファイルでのみ使用する必要があります。

order プラグインは、従来のスクリプトで使用するのが最適です。define() を使用してモジュールを定義するスクリプトには必要ありません。組み合わせて「オーダー！」が可能です。通常の依存関係との依存関係ですが、「順序!」のみです。それらは互いに相対的な順序で評価されます。

http://requirejs.org/docs/api.html#order

分析パスを従来の js ファイルに変更する必要があります (ga.js はそれ自体をモジュールとして登録しないため)。

"analytics":     "https://www.google-analytics.com/ga.js"

jQuery と jQuery mobile はそれ自体をモジュールとして登録するため、それらの設定は正しいです。

必要な呼び出しでは、必要なのは次のとおりです。

require(['jquery', 'jqm', 'analytics'],function($, jqm) {
    // analytics is not a module so _gaq will now exist as a global var.
   });

ga.js がモジュールではない唯一のファイルであることを確認してください。プラグインは、特定の順序でロードする必要がある従来のスクリプトが複数ある場合にのみ問題になるため、おそらくほとんど役に立ちません。

order プラグインは、従来のスクリプトで使用するのが最適です。define() を使用してモジュールを定義するスクリプトには必要ありません。組み合わせて「オーダー！」が可能です。通常の依存関係との依存関係ですが、「順序!」のみです。それらは互いに相対的な順序で評価されます。

ただし、Google Analytics を使用するために Google が提供するコード スニペットは、既に非同期読み込みを考慮しているため、Require を使用する必要がまったくない可能性があることに注意してください。

于 2012-05-23T11:58:03.893 に答える