mgonto / angularytics Goto Github PK
View Code? Open in Web Editor NEWThe solution to tracking page views and events in a SPA with AngularJS
License: MIT License
The solution to tracking page views and events in a SPA with AngularJS
License: MIT License
Is it possible to add a basic ng-click event without a filter?
<a ng-click="trackEvent:'Home Category':'Button clicked'" href="#">Foo</a>
Hello,
Thank you for angularytics! Right now I have the intention to allow multiple GA Trackers. I see that there is an open PR that issues this:
Support multiple GA trackers
#51
I wanted to know if you can merge it to be able to use multiple trackers. It would be really helpful! Thanks
Not exactly an issue but something that would be great to have.
Using below
.config(function(AngularyticsProvider, ENV) {
if(ENV.name === "production")
AngularyticsProvider.setEventHandlers(['Console', 'GoogleUniversal']);
else
AngularyticsProvider.setEventHandlers('Console');
}).run(function(Angularytics) {
Angularytics.init();
})
as expected, I am able to trigger events only in production mode. But now I also wish to log events in staging (pre-production) env under some different tracking ID UA-XXXXX-Y
(to segregate data). I need to set tracking id conditionally for this. Is there a way to set this in above block instead of hardcoding it in html file?
If not, I would be happy to contribute.
Thanks for this awesome utility 👍
If you have a SPA you want to track events to the actual pageView for better filtering in analytics. For Example: If you track the login button with a custom event and want to know on which page the user press it, you can't filter it because it gets always tracked on the first pageView.
The problem is that actual events will not be associated with virtual pages.
But i found a litte hacky solution on the web when I implemented the tracking for one of our customers:
Replace:
_gaq.push(['_trackPageview', url]);
with:
_gaq.push(['_set', 'page', url]);
_gaq.push(['_set', 'title', document.title]);
_gaq.push(['_trackPageview']);
I hope I could help with that.
Greetings
Sascha
The most simplistic code I can use to test this is this:
angular.module('weather', ['ngRoute', 'angularytics']).
config(function($routeProvider, AngularyticsProvider){
AngularyticsProvider.setEventHandlers(['Console', 'GoogleUniversal']);
}).
controller...
working
but this:
angular.module('weather', ['ngRoute', 'angularytics']).
config(function($routeProvider, AngularyticsProvider){
AngularyticsProvider.setEventHandlers(['Console', 'GoogleUniversal']);
}).run(function(Angularytics){
Angularytics.init();
}).
controller....
not working. I get the following error:
Uncaught Error: [$injector:unpr] Unknown provider: AngularyticsConsoleHandlerProvider <- AngularyticsConsoleHandler <- Angularytics
Is it possible to define trackerName? I could not find any place to define the trackerName for googleanalytics for example
Hi,
I have integrated Angularytics in my AngularJS web app. It´s working fine. But, I have three environments (development, test and production), so Angularytics is gathering analytics from both of them. I just would like to run it in production environment.
I don´t find a proper way to do it. I have an ENVIRONMENT constant with different values according to the environment, in order to do something like:
if ($rootScope.ENVIRONMENT == 'Production') {
var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "lib/plugins/angularytics-yanpy.js";
head.appendChild(js);
where lib/plugins/angularytics-yanpy.js is:
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-59702007-1', 'auto');
I guess this will work in production, however in development I´m getting this error because Angularytics script is looking for ga.
ReferenceError: ga is not defined
at Object.a.trackPageView (http://localhost/lib/plugins/angularytics.min.js:8:1406)
at http://localhost/lib/plugins/angularytics.min.js:8:710
at http://localhost/lib/plugins/angularytics.min.js:8:543
at Array.forEach (native)
at Object.forEach (http://localhost/lib/angular/angular.js:130:11)
at $get.g (http://localhost/lib/plugins/angularytics.min.js:8:521)
at Object.$get.h.trackPageView (http://localhost/lib/plugins/angularytics.min.js:8:691)
at http://localhost/lib/plugins/angularytics.min.js:8:751
at Object.$get.Scope.$broadcast (http://localhost/lib/angular/angular.js:8307:28)
at afterLocationChange (http://localhost/lib/angular/angular.js:5649:18)
Any suggestions?
Upon running grunt
, I get the following build failure:
Running "uglify:dist" (uglify) task
{ message: 'Unexpected token name «Object», expected punc «,»',
line: 1,
col: 8,
pos: 8,
stack: 'Error\n at new JS_Parse_Error (/Users/paolo.delmundo/tmp/angularytics/node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:196:18)\n at js_error (/Users/paolo.delmundo/tmp/angularytics/node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:204:11)\n at croak (/Users/paolo.delmundo/tmp/angularytics/node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:663:9)\n at token_error (/Users/paolo.delmundo/tmp/angularytics/node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:671:9)\n at expect_token (/Users/paolo.delmundo/tmp/angularytics/node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:684:9)\n at expect (/Users/paolo.delmundo/tmp/angularytics/node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:687:36)\n at expr_list (/Users/paolo.delmundo/tmp/angularytics/node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:1179:44)\n at /Users/paolo.delmundo/tmp/angularytics/node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:1194:23\n at /Users/paolo.delmundo/tmp/angularytics/node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:710:24\n at expr_atom (/Users/paolo.delmundo/tmp/angularytics/node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/parse.js:1157:35)' }
>> Uglifying source "dist/angularytics.js" failed.
The dist/angularytics.js looks like this:
[Object object]
This does not seem to work.
Angularytics.trackEvent("Vote", "Up", $scope.current_user.username);
Also I was receiving an error if I did not define _gaq, so I've added:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', "#{global.gaID}"]);
_gaq.push(['_trackPageview']);
I'm not sure what is going on here, it seems to be working otherwise.
If possible I would like to have get a new release tag on this project so that it can get pulled from https://rails-assets.org/. Most interested by the optional out of the box page tracking.
Hi,
I'm fairly new to Angular but not sure why installing this package breaks my routing.
I am using angular-ui-router states and have a state set up for the url:"/".
This works fine normally but when I install Angularytics as per your instructions that state is not loaded any more when I visit the appropriate URI. I have no errors or anything so I guess something else is happening.
This is only true for the initial application load, so subsequent pages/states load fine and trigger page tracking too.
The functionality of Angularytics works perfectly though.
Just trying to work it out at the moment but if you can think of anything I should look at please let me know.
Thanks,
Chris
I developed an application in phonegap and deployed your plugin.
When open on desktop, works well, I can see the hits in real time through the google panel. But to compile and test the application on android, does not appear the hits.
Is there any thing can do?
Thank you.
When setting up the GA Account for the usage of your code.
Should the account be set as Mobile App or for Website?
Before I call any of the tracking events?
Looking into using this in my project. Seems you excluded the unit tests. Could you add them?
Not everyone wants to use lodash or underscore. I for one, use SugarJS and I sure as hell don't want to be forced to include another utility library as well!
Surely removing the dependency altogether and using straight native code is the best option?
I'm not sure if I'm doing something wrong but I'm getting a ReferenceError: _gaq is not defined error referencing Object.service.trackPageView on line 78.
I have the following code on the bottom of the body tag:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-43804435-1', 'facial-recog.herokuapp.com');
ga('send', 'pageview');
</script>
and this in for my module config:
angular.module('myApp', ['angularytics', 'ajoslin.promise-tracker', 'myApp.filters', 'myApp.services', 'myApp.directives']).
config(['$routeProvider', '$locationProvider', '$httpProvider', 'AngularyticsProvider', function ($routeProvider, $locationProvider, $httpProvider, AngularyticsProvider) {
AngularyticsProvider.setEventHandlers(['Console', 'Google']);
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$routeProvider stuff here
$locationProvider.html5Mode(true);
}]).
run(function(Angularytics) {
Angularytics.init();
});
My whole app source can be seen here: https://github.com/jewelsjacobs/facial_recog_demo
Thanks!
I try to include angularytics to web site that use library Cookie consent.
The issue is when the user doesn't agree analytics cookies, my google analytics script is not loaded. So I've the following error: ReferenceError: _gaq is not defined.
I try to manage angularytics with cookies consent but when the user doesn't agree analytics cookies, the script is not loaded and angular doesn't know the provider.
How can I do to solve this issue.
I installed angularytics and follow the doc, but when i run i meet error: ReferenceError: ga is not defined
I'm getting this error in my console:
Unknown provider: AngularyticsConsoleHandlerProvider <- AngularyticsConsoleHandler <- Angularytics
(https://docs.angularjs.org/error/$injector/unpr?p0=AngularyticsGoogleHandlerProvider%20%3C-%20AngularyticsGoogleHandler%20%3C-%20Angularytics)
I have the angularytics.js file copy & pasted into my app resources, so I know loading the module isn't the issue. Then I am running the following within my app.js, as recommended in the ReadMe.
.config(function(AngularyticsProvider) { AngularyticsProvider.setEventHandlers(['Console', 'GoogleUniversal']); }) .run(function(Angularytics) { Angularytics.init(); })
Anyone else experience this?
I am using your module it is tracking the page views but it is not tracking my events. I have included angularytics.min.js in my page and this is the other code i have used.
app.js
.config(function($stateProvider, $urlRouterProvider, AngularyticsProvider){
AngularyticsProvider.setEventHandlers(['Console', 'GoogleUniversal']);
$urlRouterProvider.otherwise('/');
$stateProvider
.state('upload', {
url: "/:user_id",
templateUrl: 'templates/upload.html',
controller: 'uploadCtrl'
})
});
controller
.controller('uploadCtrl', function(Angularytics, $scope){
$scope.trackDownload = function(){
Angularytics.trackEvent("Home Category", "Button clicked");
console.log('tracked');
}
});
html
<a href="#" ng-click="trackDownload()">Click Me!</a>
Hi, Please tell me how to set userid of google analytics using this service.
Hi,
This is more of a comment rather than an issue but I had a hard time getting your code to work with an existing app. Placing the config in the following order was important along with using multiple config files. Hope this is helpful to the next coder as the following code finally did it for me!
John
angular.module('imageGallery', ['imageGallery.services','kalitte.services', 'imageGallery.directives','angularytics'])
.config(function(AngularyticsProvider) {
AngularyticsProvider.setEventHandlers(['Console', 'GoogleUniversal']);
})
.run(function(Angularytics) {
Angularytics.init();
console.log('in Angularytics')
})
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
console.log('in $routeProvider')
$routeProvider
.when('/', {templateUrl: 'partials/home.html', controller: GalleryController})
.when('/index', {templateUrl: 'partials/gallery_partial.html', controller: GalleryController})
.when('/statement', {templateUrl: 'partials/statement.html', controller: StatementCtrl})
.when('/about', {templateUrl: 'partials/about.html', controller: AboutCtrl})
.otherwise({redirectTo: '/'});
}])
;
In the documentation it is written that you can disable the module Angularytics using the following function :
AngularyticsProvider.disablePageViewTracking();
Unfortunately, This function does not exists. Any idea how to resolve it ?
Hi!
I was wondering if there is a way to config when we init(), so that the automatic visit of a url is disabled. I see this as a feature for not sending visits to soft 404 urls.
It would be great if you add support for _setCustomVar to add more information to the tracked events
We are using component directives for example a custom select form element.
Obviously these directives require a custom scope to interact with their templates.
Unfortunately this causes troubles when using the analytics directive:
Error: Multiple directives [funkySpecialSelectElement, analyticsOn] asking for new/isolated scope.
Why does the analyticsOn require an isolated scope?
I would suggest to use var analytics = {};
instead of $scope.$analytics = {};
inside your directive.
What do you think?
return {
restrict: 'A',
link: function ($scope, $element, $attrs) {
var eventType = $attrs.analyticsOn || inferEventType($element[0]);
var analytics = {};
angular.forEach($attrs.$attr, function (attr, name) {
if (isProperty(name)) {
analytics[propertyName(name)] = $attrs[name];
$attrs.$observe(name, function (value) {
analytics[propertyName(name)] = value;
});
}
});
angular.element($element[0]).bind(eventType, function ($event) {
var eventName = $attrs.analyticsEvent || inferEventName($element[0]);
analytics.eventType = $event.type;
if ($attrs.analyticsIf) {
if (!$scope.$eval($attrs.analyticsIf)) {
return; // Cancel this event if we don't pass the analytics-if condition
}
}
// Allow components to pass through an expression that gets merged on to the event properties
// eg. analytics-properites='myComponentScope.someConfigExpression.$analyticsProperties'
if ($attrs.analyticsProperties) {
angular.extend(analytics, $scope.$eval($attrs.analyticsProperties));
}
$analytics.eventTrack(eventName, analytics);
});
}
};
Hi,
Please could you bump the version of the bower/package.json so that the latest changes can be retrieved.
Thanks
I wanted to run the tests when submitting my pull request but the Karma config file seems to be outdated?
It complained ReferenceError: JASMINE is not defined
.
But also, I see it references a src/restangular.js
file which I don't think exists anymore.
After adding the basic Angularytics configuration to my app - where within Google Analytics will I start to see page view stats for when the URL changes? Should it be in the Content > Overview page?
Thanks in advance, Cole.
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.