Documentation
Help centerCommunityDevelopersAcademyStatus

Add analytics to your site

Suggest Edits

You can start analyzing and monitoring your site by adding Analytics solutions, like for instance Google Analytics. The following tutorial walks you through the steps to set up Google Analytics for your site.

Before you begin

To get started, you need:

Set up your Google Analytics account

  1. Create a Google Analytics account Google Analytics Sign up. For more information about creating a Google Analytics account, see Get started with Analytics.
  2. Register your website URL while you set up the Google Analytics account.

Install Google Analytics packages

  1. Go to the directory where the sample site source files are saved.
  2. Run the following command to install the Google analytics packages.
    npm install --save-dev @types/google.analytics

Add Google Analytics class for Angular

  1. Go to the directory where the sample site source files are saved.
  2. Create a Typescript file /src/app/google-analytics-events.service.ts and include the following code.
import {Injectable} from "@angular/core";
declare var ga: Function;


@Injectable()
export class GoogleAnalyticsEventsService {
 public emitEvent(eventCategory: string,
                  eventAction: string,
                  eventLabel: string = null,
                  eventValue: number = null) {
   ga('send', 'event', {
      eventCategory: eventCategory,
      eventLabel: eventLabel,
      eventAction: eventAction,
      eventValue: eventValue
   });
 }
}
  1. In the /src/app/app.modules.ts file, add the following code.
import {GoogleAnalyticsEventsService} from "./google-analytics-events.service";
// [...]
 providers: [
              ..., 
              GoogleAnalyticsEventsService
 ],
  1. In the ./src/app/app.component.ts file, add the following code.
import {...} from "...";
...
import {GoogleAnalyticsEventsService} from "./google-analytics-events.service";
declare var ga: Function;


export class AppComponent {
        constructor(public router: Router, public googleAnalyticsEventsService: GoogleAnalyticsEventsService, private highlightService: HighlightService, private translate: TranslateService) {
    this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {
         ga('set', 'page', event.urlAfterRedirects);
         ga('send', 'pageview');
         this.submitEvent(); 
       }
      });
 ... 
  }
...
 submitEvent() {
   this.googleAnalyticsEventsService.emitEvent("testCategory", "testAction", "testLabel", 10);
 }
... 
}

Add Google Analytics tracking code

  1. Obtain your Google Analytics tracking code. For more information about how to get the tracking code, see Set up Analytics tracking. For example, the sample code is similar to the following example.
<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-XXXXXX-ID', 'auto');
 ga('send', 'pageview');
</script>
  1. Add the tracking code to the /src/index.html file. For example,
...
...
</head>
<body>
 <app></app>
 <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-XXXXXX-ID', 'auto'); // <- add the UA-ID from your tracking code
                                      // <- remove the last line like me
 </script>
 ... 
 ... 
 </body>
</html>

📘

Note:

When you add the tracking code to index.html 5, you must remove the following line from the code.

ga('send', 'pageview');

View results in Google Analytics

After you change the code in the site source files,

  • Run the following command to build your code npm run build.
  • Run the following command to deploy your code npm run deploy.

📘

Note:

You must re-enter your Content password for you to successfully run the commands.

Push the pages in ./dist to the site URL you entered in Google Analytics. Then, you can see the result from the console of Google Analytics.
Every time your website's router changes, the code detects that change and sends the result to the console of Google Analytics. You can view your website view history for each router in Google Analytics.

Updated almost 2 years ago