Problema con Google Analytics con Require.js

Question

Estoy usando require.js (http://requirejs.org/) para una serie de funciones en mi sitio y hasta ahora parece funcionar bien. Sin embargo, me he encontrado con un problema al intentar incluir el código de Google Analytics. El código parece negarse a agregar un utm.gif y no está enviando un faro a Google. Me pregunto si se trata de un alcance.

define(function() { 
    var Analytics = {}; 
    Analytics.Apply = function() { 
    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-XXXXX-X']); 
    _gaq.push(['_trackPageview']); 

    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); 
} 
return Analytics; 
}); 

ga.debug no arroja errores y utm.gif no aparece. Si muevo el código fuera de require.js (con esto me refiero al javascript modular que usa require.js, así que simplemente lo agrego en línea a la página), utm.gif se agrega a la página con éxito y ga.debug envía su baliza.

me encontré con este sitio que parece estar usando con éxito, pero no estoy seguro de lo que está haciendo sitio diferente: http://paceyourself.net/2011/05/14/managing-client-side-javascript-with-requirejs/

Cualquier otra persona que tenga problemas combinando require.js y GA?

Answer 1

Consulte este requirejs group thread para una discusión del problema.

Answer 2

Para obtener la última versión de Google Analytics, el fragmento de código que utilizo con RequireJS es -

<script> 
    window.GoogleAnalyticsObject = 'ga'; 
    window.ga = { q: [['create', 'UA-40327700-1', 'jspm.io'], ['send', 'pageview']], l: Date.now() }; 
    require(['http://www.google-analytics.com/analytics.js']); 
</script> 

Answer 3

Aquí vamos:

define([ 'http://www.google-analytics.com/ga.js' ], function (ga) { 
    ga = { q: [['create', 'UA-18710277-1', 'jspm.io'], ['send', 'pageview']], l: Date.now() }; 
}); 

Ese es el módulo Actualmente estoy usando, sombrero de punta a @ user2305274

Answer 4

Ninguna de las otras respuestas funcionó para mí, pero logré descubrir algo que sí funciona, después de leer Google Analytics documentation.

en su principal app.js

requirejs.config({ 
    paths: { 
     ga: '//www.google-analytics.com/analytics' 
    } 
}); 

requirejs(['analytics'], function() { 
    ... 
}); 

en su propio archivo analytics.js:

define(['ga'], function() { 
    window.ga('create', 'UA-XXXXXX-1'); 
    window.ga('send', 'pageview'); 
}); 

Esto funciona porque RequireJS garantiza que por el momento la función ejecuta, analytics.js se habrá terminado de cargar. Esto significa que la función window.ga está lista para aceptar comandos.

Answer 5

Las otras soluciones no funcionaron para mí cuando usé el más nuevo analytics.js. Poner la URL directamente como una dependencia no funcionó, porque requirejs no pudo determinar cuándo se terminó de cargar la secuencia de comandos. El complemento asíncrono para requirejs tampoco parece funcionar para mí (aunque lo estoy usando para la API de Google Maps).

El siguiente enfoque funcionó para mí:

define(function (require) { 

    var module; 

    // Setup temporary Google Analytics objects. 
    window.GoogleAnalyticsObject = "ga"; 
    window.ga = function() { (window.ga.q = window.ga.q || []).push(arguments); }; 
    window.ga.l = 1 * new Date(); 

    // Immediately add a pageview event to the queue. 
    window.ga("create", "{{TrackingID}}", "{{Domain}}"); 
    window.ga("send", "pageview"); 

    // Create a function that wraps `window.ga`. 
    // This allows dependant modules to use `window.ga` without knowingly 
    // programming against a global object. 
    module = function() { window.ga.apply(this, arguments); }; 

    // Asynchronously load Google Analytics, letting it take over our `window.ga` 
    // object after it loads. This allows us to add events to `window.ga` even 
    // before the library has fully loaded. 
    require(["http://www.google-analytics.com/analytics.js"]); 

    return module; 

});