A useful Angular library that automatically injects the script tag required to use Microsoft Clarity.
npm:
npm install --save ngx-clarityYarn:
yarn add ngx-clarity| Version | Angular Version |
|---|---|
1.x.x |
>=13 <15 |
2.x.x |
>=15 <18 |
- 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.
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