npm package: @statcounter/angular
Description: Official StatCounter wrapper for Angular applications
Author: StatCounter
Latest version: 0.1.3

# @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:

```bash
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 : 

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

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

Bottom : 

```typescript
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

```typescript
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.

```typescript
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