AngularJS Application Integration with Google Analytics

Question

Note: I found this very similar question , but if you read it, the person asking about it actually used Ruby / Rails as their backend, which does not apply to my situation at all.

---

I am creating an AngularJS application (Angular v1) that will send real-time analytics to Google Analytics (GA). I just set up my GA account, which gave me the tracking ID .

I am wondering how can I integrate an Angular app with my GA account? What files do I need to place in my application and how do I configure these files with a tracking ID or other credentials?

Reading GA Developer Docs I saw the mention of the Sender ID , GoogleService- Info.plist , as well as google-services.json , but surprisingly, nothing really helps you with the technical aspects of integration.

Does anyone know what these aspects are, the files used, how to add your GA credentials to these files, etc. for an angular app?

Answer 1

, analytics.js, Google. Google , . . 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>

UA-XXXXXXXX-X Google Analytics.

ga api, $window.ga , ..

.

$window.ga('set', '&uid', 12312353)

Answer 2

AngularJS - Google Tag Manager (GTM). GTM script ( ):

<!-- 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 -->

GTM . , GTM.

updateGoogleTagManager, - (, ) URL- .

$rootScope $broadcast :

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

App Config Google

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});
    }
 });
 })