Surprisingly, no one has brought up the use of Google's Tag Manager yet when discussing scripts like the one generated by Google Analytics console in recent years whenever a new identity is added.

Today, I have devised a solution that builds upon existing methods mentioned in other responses, specifically tailored to work with Google's Tag Manager script. This solution may prove beneficial for individuals transitioning from using ga() to gtag(), a migration process that is strongly recommended.

analytics.service.ts

declare var gtag: Function;

@Injectable({
  providedIn: 'root'
})
export class AnalyticsService {

  constructor(private router: Router) {

  }

  public event(eventName: string, params: {}) {
    gtag('event', eventName, params);
  }

  public init() {
    this.listenForRouteChanges();

    try {

      const script1 = document.createElement('script');
      script1.async = true;
      script1.src = 'https://www.googletagmanager.com/gtag/js?id=' + environment.googleAnalyticsKey;
      document.head.appendChild(script1);

      const script2 = document.createElement('script');
      script2.innerHTML = `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '` + environment.googleAnalyticsKey + `', {'send_page_view': false});
      `;
      document.head.appendChild(script2);
    } catch (ex) {
      console.error('Error appending google analytics');
      console.error(ex);
    }
  }

  private listenForRouteChanges() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        gtag('config', environment.googleAnalyticsKey, {
          'page_path': event.urlAfterRedirects,
        });
        console.log('Sending Google Analytics hit for route', event.urlAfterRedirects);
        console.log('Property ID', environment.googleAnalyticsKey);
      }
    });
  }
}

Prerequisites:

• Include the service in the imports[] section of your app.module.ts.
• In your app.component.ts (or any higher level component containing the <router-outlet> tag in its template), inject the AnalyticsService and call this.analytics.init() at the earliest opportunity (such as in ngOnInit).
• In the environment.ts file (e.g., environment.prod.ts), add the Analytics ID as

  googleAnalyticsKey: 'UA-XXXXXXX-XXXX'

  .

Implementing Google Analytics with Environment Variables in Angular 5 asynchronously

(Compatible with Angular 5)

(Adapted from @Laiso's solution)

google-analytics.service.ts

import {Injectable} from '@angular/core';
import {NavigationEnd, Router} from '@angular/router';
declare var ga: Function;

@Injectable()
export class GoogleAnalyticsService {

  constructor(public router: Router) {
    this.router.events.subscribe(event => {
      try {
        if (typeof ga === 'function') {
          if (event instanceof NavigationEnd) {
            ga('set', 'page', event.urlAfterRedirects);
            ga('send', 'pageview');
            console.log('%%% Google Analytics page view event %%%');
          }
        }
      } catch (e) {
        console.log(e);
      }
    });

  }


  /**
   * Emit google analytics event
   * Fire event example:
   * this.emitEvent("testCategory", "testAction", "testLabel", 10);
   * @param {string} eventCategory
   * @param {string} eventAction
   * @param {string} eventLabel
   * @param {number} eventValue
   */
  public emitEvent(eventCategory: string,
   eventAction: string,
   eventLabel: string = null,
   eventValue: number = null) {
    if (typeof ga === 'function') {
      ga('send', 'event', {
        eventCategory: eventCategory,
        eventLabel: eventLabel,
        eventAction: eventAction,
        eventValue: eventValue
      });
    }
  }


}

Inside app.component or any other component:

 // ... import statements

 import { environment } from '../../../environments/environment';

 // ... other declarations

 constructor(private googleAnalyticsService: GoogleAnalyticsService){
    this.appendGaTrackingCode();
 }

 private appendGaTrackingCode() {
    try {
      const script = document.createElement('script');
      script.innerHTML = `
        (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', '` + environment.googleAnalyticsKey + `', 'auto');
      `;
      document.head.appendChild(script);
    } catch (ex) {
     console.error('Error appending google analytics');
     console.error(ex);
    }
  }

// In another part of the code, we can trigger a new Google Analytics event
this.googleAnalyticsService.emitEvent("testCategory", "testAction", "testLabel", 10);

GoogleTrackingService

A custom service can be created to handle router events and then injected into the app.module.ts file, eliminating the need to inject it into every component individually.

@Injectable()
export class GoogleTrackingService {

  constructor(router: Router) {
    if (!environment.production) return; // <-- To activate GA only in production
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        ga('set', 'page', event.url);
        ga('send', 'pageview');
      }
    })
  }

Check out this tutorial on my blog for more information..

To skip the necessity for any type checking, you can use this method when ga is declared globally at the window level:

 window["ga"]('send', {
    hitType: 'event',
    eventCategory: 'eventCategory',
    eventAction: 'eventAction'
    });

I trust this information proves useful.

From my personal experience, I have found a simple way to implement Google Analytics:

• Inserting the GA tracking code after the <app-root> in index.html (as demonstrated above)
• Integrating Angulartics for Google Analytics into my application (See GA Example here)

In my app.component.ts, I made the following addition:

import {Component, OnInit} from '@angular/core';
import {NavigationEnd, Router} from '@angular/router';
import {Angulartics2GoogleAnalytics} from 'angulartics2/ga';
import {filter} from 'rxjs/operators';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    constructor(private ga: Angulartics2GoogleAnalytics,
                 private router: Router) {
    }

    ngOnInit() {
        this.router.events
            .pipe(filter(event => event instanceof NavigationEnd))
            .subscribe((event: NavigationEnd) =>
                this.ga.pageTrack(event.urlAfterRedirects));
    }
}

This approach may seem similar to the above, but it significantly facilitates testing.

If you're looking to incorporate the Segment script into your index.html file and add the analytics library to the window object, here's a suggestion:

declare global {
  interface Window { analytics: any; }
}

Next, include tracking calls in 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');
  }
}

As the maintainer of https://github.com/segmentio/analytics-angular, I encourage you to explore this solution for managing customer data using a single API that can seamlessly integrate with various analytics tools (supporting over 250+ destinations) without the need for extra code. 🙂

This method appears to be the most straightforward:

Once you've added the types by running this command:

npm install --save-dev @types/google.analytics

Don't forget to update tsconfig.json to include them:

// tsconfig.json
{
  types: ["google.analytics"]
}

You could receive assistance

app.component.ts

let gtag: Function;

this.router.events.subscribe(event => {

    if(event instanceof NavigationEnd) {
        gtag('config', '*****', {'page_path': event.urlAfterRedirects});
    }

});

website.html file

<head>
.........

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

......
</head>

MainComponent

import { Component, OnInit } from '@angular/core';
import {NavigationEnd, Router} from '@angular/router';
import {environment} from '../environments/environment';
// tslint:disable-next-line:ban-types
declare let gtag: Function;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class MainComponent implements OnInit {
  title = 'angular-app';

  constructor(public router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        gtag('config', Tracking-ID-123, {'page_path': event.urlAfterRedirects});
      }
    });
  }

}