Last active
March 14, 2022 21:32
-
-
Save ismyrnow/6252718 to your computer and use it in GitHub Desktop.
Google Analytics AMD Module
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(["//www.google-analytics.com/analytics.js"]); | |
return module; | |
}); |
You should use require(["//www.google-analytics.com/analytics.js"]
instead of require(["http://www.google-analytics.com/analytics.js"]
.
Thanks @saxicek for that change. I've updated the gist.
For anyone wondering, I'm using this in production with RequireJS and the R.js optimizer, and it works great.
I would recommend the Google's option for changing the global name of the analytics object.
Just add another variable gaName
and replace all window.ga
instances with window[gaName]
define(function (require) {
var module,
gaName = "ga"; // Global name of analytics object. Defaults to `ga`.
// Setup temporary Google Analytics objects.
window.GoogleAnalyticsObject = gaName;
window[gaName] = function () { (window[gaName].q = window[gaName].q || []).push(arguments); };
window[gaName].l = 1 * new Date();
// Immediately add a pageview event to the queue.
window[gaName]("create", "{{TrackingID}}", "{{Domain}}");
window[gaName]("send", "pageview");
// Create a function that wraps `window[gaName]`.
// This allows dependant modules to use `window[gaName]` without knowingly
// programming against a global object.
module = function () { window[gaName].apply(this, arguments); };
// Asynchronously load Google Analytics, letting it take over our `window[gaName]`
// object after it loads. This allows us to add events to `window[gaName]` even
// before the library has fully loaded.
require(["//www.google-analytics.com/analytics.js"]);
return module;
});
If I add this to my RJS project, how exactly do I use it?
@paulcanning. You can just just add the module to your require / define method. It will take care of rest of things.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Anyone have any issues where this is working locally with hostfile change but not in production?
GA docs say "be sure the tracking code in included just before the closing /HEAD tag. RequireJS is usually just before the closing /BODY tag, not not sure if thats an issue?
Its the weirdest thing that I have this working locally and pushed it live and now GA Admin is not reporting any traffic under Realtime at all.
I have the url in GA admin set to www.jamdeo.com and the domain in the tracking code set to the same.