Ngx-Clarity

A useful Angular library that automatically injects the script tag required to use Microsoft Clarity.

Installation

npm:

npm install --save ngx-clarity

Yarn:

yarn add ngx-clarity

Compatibility

| Version | Angular Version | | ------- | --------------- | | 1.x.x | >=13 <15 | | 2.x.x | >=15 <18 |

Features

• Automatically inject scripts for Microsoft Clarity.

Usage

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

License

MIT