mgonto / angularytics Goto Github PK

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.

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?

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

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.

I installed angularytics and follow the doc, but when i run i meet error: ReferenceError: ga is not defined

Is it possible to define trackerName? I could not find any place to define the trackerName for googleanalytics for example

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,
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: '/'});

}])

;

It would be great if you add support for _setCustomVar to add more information to the tracked events

When setting up the GA Account for the usage of your code.
Should the account be set as Mobile App or for Website?

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,

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

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.

Before I call any of the tracking events?

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]

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

Hi,

Please could you bump the version of the bower/package.json so that the latest changes can be retrieved.

Thanks

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?

Is it possible to add a basic ng-click event without a filter?

<a ng-click="trackEvent:'Home Category':'Button clicked'" href="#">Foo</a>

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?

Hi, Please tell me how to set userid of google analytics using this service.

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!

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 ?

Looking into using this in my project. Seems you excluded the unit tests. Could you add them?

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.

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

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.

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.

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.

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 👍