Angular module to add the tracking code for microsoft.clarity.com
npm install ngx-clarity
A useful Angular library that automatically injects the script tag required to use Microsoft Clarity.
npm:
``bash`
npm install --save ngx-clarity
Yarn:
`bash`
yarn add ngx-clarity
| Version | Angular Version |
| ------- | --------------- |
| 1.x.x | >=13 <15 |2.x.x
| | >=15 <20 |
- Automatically inject scripts for Microsoft Clarity.
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. |
MIT