Google Analytics with AngularJS

Question

I'm trying to set up the new google analytics tag for my angularjs website.

I basically added this to my index.html:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE-ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GOOGLE-ID'); //remove in order to avoid sending hits on index twice
</script>

This is my script.js:

var app = angular.module('app', ['plangular','ngRoute', 'ngSanitize', 'slick', 'chart.js', 'ngMeta']);

I added:

app.run(['ngMeta', '$rootScope' , '$location', '$window', function(ngMeta,$rootScope , $location, $window) { 
  ngMeta.init();


        $window.gtag('create', 'GOOGLE-ID', 'auto');


        $rootScope.$on('$stateChangeSuccess', function (event) {
            $window.gtag('send', 'pageview', $location.path());
        });

}]);

But I'm not able to see any hits on the analytics page, except for the index.

Manuel Darveau · Accepted Answer · 2018-01-06 03:58:03Z

1

Have a look at https://github.com/angulartics/angulartics. It works well and has detailed installation instructions. You can even send events to multiple analytic services.

answered Jan 6, 2018 at 3:58

Manuel Darveau

4,6455 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LucaP Over a year ago

Thanks for the tip, the gtag was not working but I switched to the old Google Analytics snippet and it's now working perfectly. I followed this doc: github.com/angulartics/angulartics-google-analytics/blob/master/…

Chris Akers · Accepted Answer · 2018-01-09 01:32:50Z

0

In your index.html:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE-ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GOOGLE-ID', { 'send_page_view': false });
</script>

This will ensure that index doesn't count as a pageview when it loads. Then in your $stateChangeSuccess:

app.run(['ngMeta', '$rootScope', '$location', '$window', function(ngMeta, $rootScope , $location, $window) { 
  ngMeta.init();

  $rootScope.$on('$stateChangeSuccess', function (event) {
      $window.gtag('config', 'GOOGLE-ID', {'page_path': $location.path()});
      $window.gtag('event', 'page_view');
  });

}]);

Your code should now be firing pageviews for each state change. Gtag doesn't have create or send handlers. I think it only supports js, config, set, and event as the first param.

See https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications for more info about using Gtag in SPAs.

edited Jan 9, 2018 at 1:32

answered Jan 6, 2018 at 6:32

Chris Akers

885 bronze badges

3 Comments

LucaP Over a year ago

This is not working, no routes are sent to analytics

Chris Akers Over a year ago

Sorry! Edited answer to add 'page_view' event.

Drenai Over a year ago

The 'event, 'page_view' is just a custom event, it's the line above that that sends the actual page view. Just a note for anyone looking at this

William · Accepted Answer · 2019-02-21 23:56:12Z

-1

I suggest embedding the Segment script into your index.html, extend analytics library onto the window object, and add tracking calls onto the (click) event handler:

@Component({
  selector: 'app-signup-btn',
  template: `
    <button (click)="trackEvent()">
      Signup with Segment today!
    </button>
  `
})
export class SignupButtonComponent {
  trackEvent() {
    window.analytics.track('User Signup');
  }
}

I’m the maintainer of https://github.com/segmentio/analytics-angular. I recommend checking it out if you want to solve this problem by using one singular API to manage your customer data, and be able to integrate into any other analytics tool (we support over 250+ destinations) - without writing any additional code. 🙂

answered Feb 21, 2019 at 23:56

William

834 bronze badges

1 Comment

runderworld Over a year ago

the question was about AngularJS, not Angular (2+)

Collectives™ on Stack Overflow

Google Analytics with AngularJS

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related