Problem using Google Analytics with Require.js

Question

I am using require.js ( http://requirejs.org/ ) for a number of functions on my site, and for now it works Well. However, while trying to enable the Google Analytics code, I ran into a problem. The code seems to refuse to add utm.gif and does not send the beacon to Google. I wonder if this is a subject of visibility.

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 does not produce errors, and utm.gif does not appear. If I translate the code outside of require.js (by which I mean modular javascript using require.js, so just adding it to the line on the page), utm.gif is added to the page successfully, and ga.debug sends its beacon.

I found this site that seems to be using it successfully, but I'm not sure this site does different: http://paceyourself.net/2011/05/14/managing-client-side-javascript-with-requirejs/

Does anyone else run into problems combining require.js and GA?

Answer 1

None of the other answers worked for me, but I was able to figure out what works by reading the Google Analytics documentation .

in the main app.js

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

in the own analytics.js file:

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

This works because requirejs ensures that analytics.js finished loading by the time the function is executed. This means that the window.ga function window.ga ready to accept commands.

Answer 2

See requirejs group thread for a discussion of the problem.

Answer 3

For the latest version of Google Analytics, the code snippet I'm using with RequireJS is

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

Here we go:

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

That the module I am currently using is a hint for the hat @ user2305274

Answer 5

Other solutions did not work for me when using the new analytics.js . Including the URL directly as a dependency did not help, because requirejs was unable to determine when the script had finished loading. The asynchronous plugin for requirejs did not seem to work for me (although I use it for google maps api).

The following approach worked for me:

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