A useful Angular library that automatically injects the script tag required to use Microsoft Clarity.
npm:
npm install --save ngx-clarity
Yarn:
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