Comment configurer Google Analytics avec Jquery, Jquery Mobile et RequireJS?

Question

Cela me dérange depuis quelques jours et je n'ai pas trouvé le moyen de le faire fonctionner. Mon site utilise Jquery, Jquery-Mobile et RequireJS et je souhaite ajouter Google Analytics au mixage.

Ma configuration Analytics est comme si (voir aussi here):

<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> 

Je suis à l'écoute de l'événement pageshow de JQM à suivre pour Analytics. Cet extrait est collé à la fin de toutes les pages.

Je tripoté Analytics dans requireJS comme ceci:

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();   
     }); 

Et app.js:

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

Le problème est, Analytics extrait est à la fin de chaque balise HTML de la page, donc même si je pense que je l'ai mis en place correctement dans requ ireJS avec JQuery et JQuery chargement mobile avant, je suis toujours obtenir une erreur:

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

lorsque les premières charges de page.

Je suppose que le balisage HTML est hors de la portée de require et est analysé avant le chargement de JQM. Cependant, il doit y avoir un moyen de le configurer correctement.

Question:
Toute idée pourquoi l'erreur apparaît et ce que je peux faire à ce sujet?

Merci pour votre aide!

EDIT:
Ok. Faire comme cela fonctionne:

Dans ma tête de page Je déclare la première partie:

<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> 

Puis dans mes requirejs fonction de démarrage J'appelle le 2ème extrait:

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(); 

De cette façon, le deuxième extrait ne sera exécuté qu'une fois Jquery et Jquery Mobile chargés. En définissant une variable globale (j'espère), la liaison ne sera lancée qu'une seule fois. Jusqu'à présent, semble fonctionner.

Answer 1

Le problème est très probablement lié à votre utilisation de la commande! brancher. Cela ne devrait être utilisé qu'avec des fichiers standards .js, et non des modules.

The order plugin is best used with traditional scripts. It is not needed for scripts that use define() to define modules. It is possible to mix and match "order!" dependencies with regular dependencies, but only the "order!" ones will be evaluated in relative order to each other.

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

Votre chemin d'analyse devrait être modifié pour un fichier js traditionnel (comme ga.js ne s'enregistre pas comme module)

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

jQuery et jQuery mobile ne s'enregistrent sous forme de modules, de sorte que votre config pour ceux qui est correct.

Dans votre appel exigent, tout ce que vous avez besoin est:

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

Voyant que les ga.js est le seul fichier qui n'est pas un module, l'ordre! Le plugin ne sera probablement pas très utile car il est important que vous ayez plusieurs scripts traditionnels à charger dans un certain ordre.

The order plugin is best used with traditional scripts. It is not needed for scripts that use define() to define modules. It is possible to mix and match "order!" dependencies with regular dependencies, but only the "order!" ones will be evaluated in relative order to each other.

Cependant, il convient de noter que l'extrait de code fourni par Google pour l'utilisation de Google Analytics représente déjà pour le chargement async il est peut-être pas nécessaire d'utiliser Exigent du tout.