4

Please note: I did find this very similar question but if you read it the person asking it was actually using Ruby/Rails as their backend, which doesn't apply to my situation at all.

I'm building an AngularJS (Angular v1) app that will send real-time analytics to Google Analytics (GA). I just set up my GA account which gave me a Tracking ID.

I'm wondering how I can integrate my Angular app with my GA account? What files do I need to put in my app, and how do I customize those files with my Tracking ID or other credentials?

Reading the GA developer docs I've seen some mention of Sender ID, GoogleService-Info.plist as well as google-services.json, but astonishingly, nothing that really guides you through the process of the technical aspects of the integration.

Anybody know what these aspects are, files used, how to add your GA credentials to these files, etc. for an Angular app?

smeeb
  • 27,777
  • 57
  • 250
  • 447

2 Answers2

2

You most likely want to use analytics.js which is the newest analytics library from google. Google provides a nice walk through for adding this to your site. See https://developers.google.com/analytics/devguides/collection/analyticsjs/

<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', 'https://www.google-analytics.com/analytics.js', 'ga');
  ga('create', 'UA-XXXXXXXX-X', 'auto');
</script>

Replace UA-XXXXXXXX-X with your property id from google analytics.

You can access the ga api using $window.ga from within controllers, components, etc.

Example of setting an account id for the currently logged in user.

$window.ga('set', '&uid', 12312353)
epelc
  • 5,300
  • 5
  • 22
  • 27
1

The best way to implement analytics in AngularJS App is using Google Tag Manager (GTM). Include the GTM script in the index file (which will always load first time):

<!-- Google Tag Manager -->
<script>
var dataLayer = [];
</script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?
id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Then configure GTM for virtual page view. Please go through the documentation of GTM.

In your controller, call the function updateGoogleTagManager defined somewhere accessible to all the controllers (e.g. util) with URL and page title as parameters.

In the common function, inject the $rootScope and have it $broadcast the event:

 $rootScope.$broadcast('$viewContentLoaded', { 'myUrl': myUrl, myTitle: myTitle, modeType: 'myCustomDefined' });

In the App Config, listen to the broadcast and push the data to Google Tag Manager

angular.module('app.core')
.run((function($rootScope, $window, $location, GoogleTagManager) {
    $rootScope.$on('$viewContentLoaded', function(event,data) {
    if(data.modeType == 'myCustomDefined'){
        GoogleTagManager.push({ 'event': 'vpv', 'page.url':encodeURIComponent(data.myUrl), 'page.title' : data.myTitle});
    }
 });
 })
cuckoo
  • 11
  • 2