Quick Start Guide

This guide will walk you through a minimal setup to track your first page view and custom event using Angulartics2 with Google Analytics.

Prerequisites

  • You have completed the Installation steps.
  • You have a Google Analytics account and a Tracking ID (e.g., UA-XXXXXXXX-X).

Step 1: Add Google Analytics Snippet

First, add the Google Analytics analytics.js tracking snippet to your index.html file inside the <head> tag. Replace UA-XXXXXXXX-X with your own Tracking ID.

Important: Remove the ga('send', 'pageview'); line from the default snippet, as Angulartics2 will handle page view tracking.

<!-- index.html -->
<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');
  // DO NOT include ga('send', 'pageview'); Angulartics2 handles this
</script>

Step 2: Configure Your Application

Ensure your app.module.ts and app.component.ts are set up to use Angulartics2 and the Google Analytics provider.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { Angulartics2Module } from 'angulartics2';

import { AppComponent } from './app.component';
// Create a simple component for routing
import { HomeComponent } from './home.component'; 

const routes: Routes = [{ path: '', component: HomeComponent }];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    Angulartics2Module.forRoot(),
  ],
  declarations: [AppComponent, HomeComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

app.component.ts

This is where you activate the automatic page tracking.

import { Component } from '@angular/core';
import { Angulartics2GoogleAnalytics } from 'angulartics2';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent {
  constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {
    angulartics2GoogleAnalytics.startTracking();
  }
}

Step 3: Track a Custom Event

Now, let's add a button to your home.component.html to track a click event.

home.component.ts (for context)

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {}

home.component.html

Use the angulartics2On directive to declaratively track the click event.

<h1>Welcome to the Quick Start!</h1>

<button 
  angulartics2On="click" 
  angularticsAction="QuickStartClick"
  angularticsCategory="Tutorial"
  angularticsLabel="First Button">
  Track This Click
</button>

Step 4: Verify in Google Analytics

  1. Run your Angular application.
  2. Open your Google Analytics dashboard and navigate to Real-Time > Events.
  3. When you first load the application, a pageview event should be recorded by Angulartics2.
  4. Click the "Track This Click" button.
  5. You should see a new event appear in your Real-Time dashboard with:
    • Event Category: Tutorial
    • Event Action: QuickStartClick
    • Event Label: First Button

Congratulations! You have successfully integrated Angulartics2 and tracked both a page view and a custom event.