@statcounter/angular

The official Angular wrapper for StatCounter. This library provides a seamless integration of the StatCounter tracking code into Angular applications, automatically tracking page views as the user navigates through your Single Page Application (SPA).

Features

• Automatic Page Tracking: Automatically triggers a page view on every NavigationEnd event from the Angular Router.
• Invisible Tracking: Optimized for modern web design standards.
• SSR Compatible: Safely checks for browser environments to prevent errors during Server-Side Rendering (Angular Universal).

Installation

Run the following command to install the package:

npm install @statcounter/angular

Setup for Angular 15+

Use this method if you are using Angular 15+ with app.config.ts.

In your app.config.ts make these 3 changes.

Top :

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

import { StatCounterModule } from '@statcounter/angular';

Bottom :

importProvidersFrom(
      StatCounterModule.forRoot({
        project_id: 12345678,     // Your Project ID
        security_code: 'abcabc' // Your Security Code
      })
    )

Important : You must add a comma , to the element above the StatCounter importProvidersFrom block. See example code below.

Example app.config.ts file

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

// ADD THESE TWO LINES
import { importProvidersFrom } from '@angular/core';
import { StatCounterModule } from '@statcounter/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),		// <--- Don't forget the comma here
    
    // ADD StatCounter block
    importProvidersFrom(
      StatCounterModule.forRoot({
        project_id: 123123123,     // Your Project ID
        security_code: 'abcabc' // Your Security Code
      })
    )
    // StatCounter block ends here
  ]
};

Setup (Legacy / NgModules)

If your application uses the traditional app.module.ts, add StatCounterModule.forRoot() to your imports.

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

import { AppComponent } from './app.component';
import { StatCounterModule } from '@statcounter/angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot([]), // Router is required
    
    // Initialize StatCounter
    StatCounterModule.forRoot({
      project_id: 123123123,
      security_code: 'abcabc'
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Configuration Options

| Option | Type | Required | Description | | :--- | :--- | :--- | :--- | | project_id | number | Yes | The Project ID found in your StatCounter dashboard. | | security_code | string | Yes | The Security Code found in your StatCounter dashboard. |

Note: The StatCounter is invisible by default and you don't need to configure sc_invisible

How to Verify

1. Serve your application (ng serve).
2. Open your browser's Developer Tools (F12).
3. Go to the Network tab.
4. Filter by statcounter.
5. Open your site and navigate between pages in your Angular app.
6. You should see a request to counter.js and a new request to t.php for every navigation event.

License

MIT