Skip to content
Easy implementation Google Analytics tracking code for Angular 5. It is with Global Site Tag (gtag.js)!
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
src
.angular-cli.json
.editorconfig
.gitignore
LICENSE
README.md
karma.conf.js
package-lock.json
package.json
protractor.conf.js
tsconfig.json
tslint.json

README.md

angular-google-analytics

Easy implementation Google Analytics tracking code for Angular 5. It is with Global Site Tag (gtag.js)!

Don't forget to change GA_TRACKING_ID with your Google Analytics tracking ID.

Create Project

ng new angular-google-analytics

Create script.js file

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

export function googleAnalyticsHeadScripts(){
  const head = document.getElementsByTagName('head')[0];

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

  const googleAnalyticsSecondScript = document.createElement('script');
  googleAnalyticsSecondScript.innerHTML = '    window.dataLayer = window.dataLayer || [];\n' +
    '    function gtag(){dataLayer.push(arguments);}\n' +
    '    gtag(\'js\', new Date());\n' +
    '\n' +
    '    gtag(\'config\', \'' + environment.google_analytics_code + '\');';

  head.insertBefore(googleAnalyticsSecondScript, head.firstChild);
  head.insertBefore(googleAnalyticsFirstScript, head.firstChild);
}

export function googleAnalytics(url) {
  gtag('config', environment.google_analytics_code, {'page_path': url});
}

Create script.d.ts file

export declare function googleAnalyticsHeadScripts();
export declare function googleAnalytics(url);

Update your environment.ts (environment.prod.ts for production) file and insert google_analytics_code variable

google_analytics_code: 'GA_TRACKING_ID'

Update main.ts file

import {googleAnalyticsHeadScripts} from './assets/script';
...
if (environment.production) {
  enableProdMode();
}
...
googleAnalyticsHeadScripts();

platformBrowserDynamic...

Update AppComponent

import {NavigationStart, Router} from '@angular/router';
import {googleAnalytics} from '../assets/script';
import 'rxjs/add/operator/filter';

...

  constructor(private router: Router) {
    this.router.events.filter(event => event instanceof NavigationStart).subscribe(event => {
      const url = event['url'];
      if (url !== null && url !== undefined && url !== '' && url.indexOf('null') < 0) {
        googleAnalytics(url);
      }
    });
  }

Create TestPageComponent (Optional)

ng generate component test-page

Update AppModule

import {RouterModule, Routes} from '@angular/router';
import {TestPageComponent} from './test-page/test-page.component';

...

  const appRoutes: Routes = [
    {path: 'test-page', component: TestPageComponent}
  ];
  
...

  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes
    )
  ],

Now you can test it!

You can’t perform that action at this time.