https://github.com/jadengis/ngx-clarity
Angular module to add the tracking code for microsoft.clarity.com
https://github.com/jadengis/ngx-clarity
Last synced: 9 days ago
JSON representation
Angular module to add the tracking code for microsoft.clarity.com
- Host: GitHub
- URL: https://github.com/jadengis/ngx-clarity
- Owner: jadengis
- Created: 2022-05-30T07:39:38.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-15T07:40:02.000Z (4 months ago)
- Last Synced: 2025-03-16T19:12:14.235Z (about 1 month ago)
- Language: TypeScript
- Size: 703 KB
- Stars: 20
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-clarity - A useful Angular library that automatically injects the script tag required to use [Microsoft Clarity](https://clarity.microsoft.com/). (Table of contents / Angular)
- fucking-awesome-angular - ngx-clarity - A useful Angular library that automatically injects the script tag required to use 🌎 [Microsoft Clarity](clarity.microsoft.com/). (Table of contents / Angular)
README
# Ngx-Clarity
[](https://github.com/jadengis/ngx-clarity/actions/workflows/test.yml)
[](https://github.com/jadengis/ngx-clarity/actions/workflows/build.yml)
[](https://github.com/jadengis/ngx-clarity/actions/workflows/lint.yml)
A useful Angular library that automatically injects the script tag required to use [Microsoft Clarity](https://clarity.microsoft.com/).
## Installation
npm:
```bash
npm install --save ngx-clarity
```
Yarn:
```bash
yarn add ngx-clarity
```
## Compatibility
| Version | Angular Version |
| ------- | --------------- |
| `1.x.x` | `>=13 <15` |
| `2.x.x` | `>=15 <20` |
## Features
- Automatically inject scripts for [Microsoft Clarity](https://clarity.microsoft.com/).
## Usage
Import `provideClarity` from `ngx-clarity` and pass the required configuration when using it as a provider during application bootstrap.
```typescript
import { provideClarity } from 'ngx-clarity';
@NgModule({
providers: [
provideClarity({
enabled: true,
projectId: 'my-project-id',
}),
],
})
export class AppModule {}
// Or if you are using standalone bootstrap
bootstrapApplication(AppComponent, {
providers: [
provideClarity({
enabled: true,
projectId: 'my-project-id',
}),
],
});
```
The supported configuration parameters are:
| Property | Requirement | Description |
| --------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
| enabled | Required | Whether or not this module is enabled. Useful for disabling the analytics script in development environments. |
| projectId | Required | Your Microsoft Clarity project Id. This is found in the Microsoft Clarity console. |
## License
MIT