We help IT Professionals succeed at work.

Google Analytics in AngularJS project

High Priority
111 Views
Last Modified: 2020-01-28
How to use google analytics in to my angular js project. I am new to angular js . Please send me steps and links to use the google analytics into my angular project.
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Google "angularjs google analytics"

From here https://stackoverflow.com/questions/10713708/tracking-google-analytics-page-views-with-angularjs
If you're using ng-view in your Angular app you can listen for the $viewContentLoaded event and push a tracking event to Google Analytics.

Assuming you've set up your tracking code in your main index.html file with a name of var _gaq and MyCtrl is what you've defined in the ng-controller directive.
function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', { page: $location.url() });
  });
}

Open in new window


From here https://www.zuehlke.com/blog/en/google-analytics-with-angularjs/
First we added the snippet that is usually used to enable Google Analytics to our index page; this sets up the connection to Google and specifies our account information.
<script>
 (<strong>function</strong>(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||<strong>function</strong>(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*<strong>new </strong>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-xxxxxx-x', 'auto');
 ga('send', 'pageview');
</script>

Open in new window

We then simply added a function to our core module that sends the current URL to Google as soon as the URL, and thus the content of the application, changes.
.run(['$rootScope', '$window', <strong>function </strong>($rootScope, $window) {
$rootScope.$on(&quot;$locationChangeStart&quot;, <strong>function </strong>(event, nextUrl, currentUrl) {
$window.ga &amp;&amp; $window.ga('send', 'pageview', {'page': nextUrl});
});
}])

Open in new window


Additional information here https://jasonwatmore.com/post/2015/11/07/angularjs-google-analytics-with-the-ui-router

Author

Commented:
Hi Julian
Thanks for the response. have added following in index.html. i don't know how/where to add the rest

<script>
 (<strong>function</strong>(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||<strong>function</strong>(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*<strong>new </strong>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-xxxxxx-x', 'auto');
 ga('send', 'pageview');
</script>
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
On your main module

angular.module(...)
   .run(function() {
   // code here
})

Open in new window

Author

Commented:
Great help!
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.