-
🔭 I’m currently working on public websites, apps and infra
-
💬 Ask me about anything
-
📫 How to reach me [email protected]
JavaScript, TypeScript, React, Python, PostgreSQL, ElasticSearch, Docker, Kubernetes
Google Analytics tracking for your AngularJS apps
License: MIT License
🔭 I’m currently working on public websites, apps and infra
💬 Ask me about anything
📫 How to reach me [email protected]
JavaScript, TypeScript, React, Python, PostgreSQL, ElasticSearch, Docker, Kubernetes
Hi!
I'm using this for a project, where the currency is in DKK (Danish Kroner). I looked at the source, and found that the _addTrans-method takes a currency parameter, which defaults to "USD". However, the public addTrans-method doesn't take a currency-parameter, so it's not possible to override the default 'USD' currency.
Other than that, thanks for an awesome script :-)
/ Lars
Or would you allow me to use your code in an app? Cause i like your implementation!
regards, paul
Is there a reason you only track page views for multiple accounts, why not events and others?
e.g. line 316 would become:
_analyticsJs(function () {
if (angular.isArray(accountId)) {
accountId.forEach(function (trackerObj) {
$window.ga(trackerObj.name + '.send', 'event', category, action, label, value);
});
} else {
$window.ga('send', 'event', category, action, label, value);
}
that._log('event', args);
});
I was looking for a way to remove some strings from the url and in the code found setRemoveRegExp
which does exactly that, but is not documented in examples.
Is this tracking duplicate pageviews when setting checkout steps?
I don't see anything at a glance that would state there should be a page view here, https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#measuring-checkout
Shouldn't it be caught when the page changes?
... so that I can include it via browserify instead of bower.
Thanks!
Is there and will there be support for custom variables/dimensions ?
Seems GA is not receiving my data. In my module I have this pseudo code
angular.module('videomailApp', [
'...',
'angular-google-analytics'
])
.config(function($routeProvider, $locationProvider, $logProvider, AnalyticsProvider) {
$locationProvider.html5Mode(true)
// https://github.com/revolunet/angular-google-analytics
AnalyticsProvider.setAccount(clientSettings.analytics.account)
AnalyticsProvider.trackPages(true)
AnalyticsProvider.setDomainName(clientSettings.analytics.domainName)
// It has both ga.js (Classic) and and analytics.js (Universal) support.
// Call AnalyticsProvider.useAnalytics(true); to use the new Universal Analytics.
AnalyticsProvider.useAnalytics(true)
$routeProvider ...
})
// Anything inside run(...) will be run on initialization
.run([
'$rootScope',
'$location',
'$anchorScroll',
'$compile',
'$templateCache',
'$log',
'Analytics',
// Since we are relying on automatic page tracking, we need to inject Analytics
// at least once in your application (for example in the main run() block)
function($rootScope, $location, $anchorScroll, $compile, $templateCache, $log, Analytics) {
...
}])
...
Maybe you spot something I am doing wrong here or it could be a bug?
They will eventually drop support in Bower, so a rename to bower.json is recommended.
It took me some time to understand that I had to call AnalyticsProvider.useAnalytics(true) to make it work. I think it would be easier if analytics was used by default.
This happens when the application is approached without a known path in the routing configuration and trackRoutes in enabled. So any redirects due to the use of the otherwise function of angular routing result in an extra $routeChangeSuccess, which is picked up and results in another pageview to ga.
Is this known, or is there something I might be missing in relation to the routing of angular, or is this something that would be nice to fix? :)
In our AngularJS application we have noticed an issue where tracking conversions and pages aren't working when we're setting a domain name to .grasshopper.com
AnalyticsProvider.setAccount 'UA-XXXXX-X' # replaced with our account number
AnalyticsProvider.trackPages true
AnalyticsProvider.useECommerce true
AnalyticsProvider.setDomainName '.grasshopper.com'
AnalyticsProvider.setCookieConfig({
cookieDomain: '.grasshopper.com'
})
In a forked version if we moved the line if(domainName) $window._gaq.push(['_setDomainName', domainName]);
right below window._gaq.push(['_setAccount', accountId]);
then tracking conversions and pages works perfectly.
Hi,
Can you add https://developers.google.com/analytics/devguides/collection/analyticsjs/cross-domain
to the GA.
So we can track multiple domains and subdomains.
Thanks
Would it be possible to get support for displaying features? I looked through the code and documentation but did not find anything related to that. Google's Developer guide about the plugin: https://developers.google.com/analytics/devguides/collection/analyticsjs/display-features
Hello, Julien!
We faced in our project with some strange problem:
When users begin to use plugin "Google Analytics Opt-out Add-on (by Google)" (https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh) in Google Chrome, our application breaks.
TypeError: Cannot read property 'length' of undefined
at $interpolate (http://localhost:8080/static/lib.js:27215:24)
at ngBindTemplateDirective (http://localhost:8080/static/lib.js:36314:25)
at nodeLinkFn (http://localhost:8080/static/lib.js:25212:13)
at compositeLinkFn (http://localhost:8080/static/lib.js:24623:15)
at compositeLinkFn (http://localhost:8080/static/lib.js:24626:13)
at nodeLinkFn (http://localhost:8080/static/lib.js:25206:24)
at compositeLinkFn (http://localhost:8080/static/lib.js:24623:15)
at publicLinkFn (http://localhost:8080/static/lib.js:24528:30)
at http://localhost:8080/static/lib.js:20247:27
at Scope.$get.Scope.$eval (http://localhost:8080/static/lib.js:30986:28) lib.js:28444
TypeError: Cannot read property 'childNodes' of undefined
at compositeLinkFn (http://localhost:8080/static/lib.js:24626:36)
at compositeLinkFn (http://localhost:8080/static/lib.js:24626:13)
at nodeLinkFn (http://localhost:8080/static/lib.js:25206:24)
at compositeLinkFn (http://localhost:8080/static/lib.js:24623:15)
at publicLinkFn (http://localhost:8080/static/lib.js:24528:30)
at http://localhost:8080/static/lib.js:20247:27
at Scope.$get.Scope.$eval (http://localhost:8080/static/lib.js:30986:28)
at Scope.$get.Scope.$apply (http://localhost:8080/static/lib.js:31086:23)
at http://localhost:8080/static/lib.js:20245:15
at Object.invoke (http://localhost:8080/static/lib.js:22661:17) undefined lib.js:28444
...
(lib.js is a concatenated version of all JS libraries)
Another strange moment, that in output HTML file "script" tags with GA are before "head" tag:
When we turn off this plugin everything well.
Could you please help us with it? Any idea will be great!
I believe bower uses git tags to get the appropriate version of a package. You've defined the version as 0.0.1
in your bower.json
, but there needs to be a git tag too.
bower not-cached git://github.com/revolunet/angular-google-analytics.git#0.0.1
bower resolve git://github.com/revolunet/angular-google-analytics.git#0.0.1
bower ENORESTARGET No tag found that was able to satisfy 0.0.1
Additional error details:
No versions found in git://github.com/revolunet/angular-google-analytics.git
This should do it.
git tag -a "0.0.1"
git push origin master --tags
For browserify/webpack/es6 support: http://blog.npmjs.org/post/114584444410/using-angulars-new-improved-browserify-support
Hi,
how integrate social analytics with your module? facebook, G+ login, sign up? facebook share? or social interactions will be automatically reported?
regards
Stevens
As you rely on the onChangeSuccess (https://github.com/revolunet/angular-google-analytics/blob/master/src/angular-google-analytics.js#L125) for automatic pagetracking, I'd imagine you also suffer from the double event on the initial pageload as described here https://github.com/luisfarzati/angulartics/issues/31#issuecomment-23609410
The Analytics.trackPage('url') call does not log anything when the AnalyticsProvider has been configured with AnalyticsProvider.trackPages(false). By the documentation, trackPages(false) is only supposed to disable automatic page tracking, but instead it actually disables the ability to make any page tracking call since it sets the trackRoutes variable to false.
It doesn't make sense that page tracking would be completely disabled, since making an explicit call should still allow me to track a page. The offending lines are in the _trackPage function where the conditional checks whether trackRoutes is true and prevents execution of the function.
I'm using AngularJS UI Router, and here it is my config:
.config(function(AnalyticsProvider) {
// initial configuration
AnalyticsProvider.setAccount('UA-XXXXXXX-X');
// track all routes/states (or not)
AnalyticsProvider.trackPages(true);
// Use analytics.js instead of ga.js
AnalyticsProvider.useAnalytics(true);
// change page event name
AnalyticsProvider.setPageEvent('$stateChangeSuccess');
}))
Now is there any other steps to complete? I haven't modified any states/controllers, is there anything else required? And what does the following comment means? I guess enabling 'trackPages' is enough, am I right?
.run(function(Analytics) {
// In case you are relying on automatic page tracking, you need to inject Analytics
// at least once in your application (for example in the main run() block)
})
I noticed during my tests, that ecommerce data will not be send at all.
that._ecommerceEnabled() -> returns true for example on line 578
But it returns false on line 475 -> my guess is somthing with the scope is wrong.
Multiple trackers seems not to be supportet at all.
Just curious GA has the ability to start a new session manually via the sessionControl option:
ga('send', 'pageview', {'sessionControl': 'start'});
How can this option be used in angular-google-analytics?
Not sure if there is a way to pass options like that to pageView manually [think i only saw example of dimension and metric data being passed with a manually pageView in the documentation]
Thanks,
Ari
Hi,
could you expose the property checkProtocolTask in order to add support for hybrid mobile apps?
ga(‘set’, ‘checkProtocolTask’, null);
For hybrid mobile app is required disable the check protocol task, in order to suppor file:// protocol
In this post (http://www.blastam.com/blog/index.php/2013/07/ga-universal-analytics-phonegap-mobile-apps) you can see in more detail about this
thanks & regards
bower install
bower angular-google-analytics#~0.0.5 not-cached git://github.com/revolunet/angular-google-analytics.git#~0.0.5
bower angular-google-analytics#~0.0.5 resolve git://github.com/revolunet/angular-google-analytics.git#~0.0.5
bower angular-google-analytics#~0.0.5 ENORESTARGET No tag found that was able to satisfy ~0.0.5
Additional error details:
Available versions: 0.0.4, 0.0.3, 0.0.2, 0.0.1
Something like angulartics, very handy.
I'm using ui-router and need to change the UA account based on the route. Is there a mechanism to do this currently?
Does anyone else have issues with using these files when minifying all angular files? I keep getting unknown provider error. I tried patching up just the provider to have brackets which looked like the obvious fix, but that doesn't seem to fix the issue.
at function _send you send an obj even though send cant receive an object. You use it on the advance e commerce functions such as _producrClick, _promoClick and _trackCart. Another problem is that you dont send the whole object but rather only the first variable.
Hi,
Im getting very high bounce rate on our Google GA. Have you guys experienced anything like this?
Here is my setting:
AnalyticsProvider.setAccount('xxxx');
AnalyticsProvider.trackPages(true);
AnalyticsProvider.useAnalytics(true);
AnalyticsProvider.setDomainName('domain.com');
AnalyticsProvider.setPageEvent('$routeChangeSuccess');
Thanks
Hi!
It looks like Adblock does not like this angular module.
and angular will completely fail if we can't load it :/ That's not good. Any way to solve this.
From this code I can see that it's not possible to use an array of accountId
s and crossDomainLinker
at the same time. Is there a reason for that? I'm not very familiar with analytics.js
and I haven't seen a mention of this anywhere in the docs.
Src:
angular-google-analytics/src/angular-google-analytics.js
Lines 174 to 186 in 3055c1a
Can you please tag a new version?
0.0.2 causes a problem if you're using grunt-bower-install
because it looks at the main
file in bower.json
- which for 0.0.2 is referencing a non-existing file (_./dist/angular-google-analytics.min.js_)
utm params are not being passed down to Google:
?utm_medium=Email&utm_source=Bla&utm_campaign=BlaCamp
Thanks
I am seeing 3.3% of our traffic not show up in GA anymore... I noticed between our old app which uses old Universal Analytics and new Angular app which uses Universal Analytics (via angular-google-analytics) that the new data is missing the 'Android Browser' browser which was about 3.3% of traffic.
Both apps have the Browser 'Chrome' which has Browser Versions like 43.0.2357.124 which could be mobile or desktop.... but older Android devices should have a Browser of 'Android Browser' which versions like 4.0, 4.1, 4.2. I confirmed with an Android device that it isn't sending up the data at all by watching the Real-Time data.
Wasnt sure if someone could confirm or take a look.
Thanks,
Ari
PS here are the devices that this issue probably occurs for (pulled from the old GA data):
Samsung GT-P3113 Galaxy Tab 2 7.0
HTC 0PCV220 Desire 510
Samsung SPH-L710 Galaxy S III
Samsung GT-P5113 Galaxy Tab 2 10.1
Samsung SM-T217S Galaxy Tab 3 7.0
Samsung SGH-T999 Galaxy S III
Samsung SGH-I747 Galaxy S III
Hi,
I guess at some point you will need to update this to use the new analytics code.
Not an issue as such, just a heads up!
Hi,
Can you please clarify if this supports the new "Universal Analytics" or only the "Classical Analytics"?
Thanks
This is not valid js:
.config(function('AnalyticsProvider',function(){
}))
However, this is:
.config(function(AnalyticsProvider){
})
Instead of
AnalyticsProvider.setAccount(...)
AnalyticsProvider.trackPages(...)
AnalyticsProvider.setDomainName(...)
let's save some bytes with that:
AnalyticsProvider
.setAccount(...)
.trackPages(...)
.setDomainName(...)
by returning the AnalyticsProvider instance on each of these configuration methods.
A good idea might be to provide some helper directives to simplify the use even more.
e.g.
<button ng-repeat="button in buttons" ga-track-event="button.ga"></button>
where button.ga might look something like {category: 'video', action: 'play', label: 'video.mp4'}
or maybe even ['video', 'play', 'video.mp4']
. Meaning you don't even need to write code in your controllers for some simple actions.
Working on a sample working version on tsov/angular-google-analytics
, once ready I will propose a PR, but what are general thoughts on this one?
Hi,
As a companion to Analytics, I am using angular-google-experiments
to set up experiment variations - and was wondering if you could incorporate this functionality into the Analytics module for simplicity?
Would be good to have it all in one place..
The fork at https://github.com/eaguerralde/angular-google-experiments/blob/master/googleExperiments.js seems to have simplified the loading of the experiments js by using angularLoad
. Maybe a better way than in the origin, where a timeout is used?
Thanks for creating this Analytics module! I use it in all my angular webapps!
Would it be possible to implement a module so that you can generate all the metrics offline and then "push" the data to Google Analytics when being online?
Commit ce2889f contains a duplicate quote on line 10:
trackPrefix = ''',
On the front page in the last configuration block example it shows:
//Enable eCommerce module for analytics.js
AnalyticsProvider.useECommerce(true);
//Enable enhanced link attribution module for analytics.js or ga.js
AnalyticsProvider.useECommerce(true);
The second method I believe should be useEnhancedLinkAttribution
I'm a bit confused as to the description for this method:
// change filename to analytics.js
AnalyticsProvider.useAnalytics(true);
It seems as though the useAnalytics() option would be toggling some setting, but the description is a bit confusing. Is that description a mistake?
In the current implementation it is not possible to add custom Dimensions and Metrics in products.
For Example:
ga('ec:addProduct', { // Provide product details in an productFieldObject.
'id': 'P12345', // Product ID (string).
'name': 'Powerup', // Product name (string).
'category': 'Extras', // Product category (string).
'variant': 'red', // Product variant (string).
'price': '10.00', // Product price (currency).
'quantity': 2, // Product quantity (number).
'dimension4': 'strong', // Product-scoped custom dimension (string).
'metric2': 5 // Product-scoped custom metric (integer).
});
see more at: https://developers.google.com/analytics/devguides/platform/customdimsmets.
My suggestion would be to add a _addProductObject(obj) and _removeProductObject(obj) which will send the object in the same format as above.
First I tried to set up E-Commerce like in the example on Github (usinig UniversalAnalytics).
I use multiple tracker -> two different Analytics ID's.
AnalyticsProvider.useECommerce(true, true);
This causes an warning:
Enhanced ecommerce plugin is enabled. Only one plugin(ecommerce/ec) can be used at a time.
After that I tried to set it up like this to try:
AnalyticsProvider.useECommerce(false, true);
This causes also a warning:
'ecommerce not set. Use AnalyticsProvider.setECommerce(true, false);'
After that I tried to set it up like this to try:
AnalyticsProvider.useECommerce(true, false);
Now I get no warning. But from the Network Tab in Chrome Dev Tools I see that no data is send by analytics. Within analytics I get no Transactions tracked. How to use E-commerce Tracking and the advanced e-commerce plugin?
Might it it be that the support for multiple trackers is missing on e-commerce? I don't see a loop for each trackker inside the e-commerce functions.
Hi,
Is it currently possible to set the userId as per: https://developers.google.com/analytics/devguides/collection/analyticsjs/user-id
So basically replacing the scrip tag with on that sends a userId as well?
Thanks!
https://www.npmjs.com/package/angular-google-analytics
Could you publish 0.0.17? Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.