# ngx-clarity

> Angular module to add the tracking code for microsoft.clarity.com

Latest version **2.3.0** (published 2024-12-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-clarity
pnpm add ngx-clarity
yarn add ngx-clarity
bun add ngx-clarity
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2024-12-15 |
| First published | 2022-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 21.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 19 |
| Author | John Dengis |
| Maintainers | jadengis |
| Keywords | angular, angular 2, ngx clarity, analytics, microsoft-clarity, heatmap, session recording |

## Links

- npm: https://www.npmjs.com/package/ngx-clarity
- Repository: https://github.com/jadengis/ngx-clarity
- Homepage: https://github.com/jadengis/ngx-clarity#readme
- Issues: https://github.com/jadengis/ngx-clarity/issues
- npm.io page: https://npm.io/package/ngx-clarity

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [@clerk/clerk-expo](https://npm.io/package/@clerk/clerk-expo.md) — 133.6K weekly downloads
- [@pothos/plugin-authz](https://npm.io/package/@pothos/plugin-authz.md) — 12.4K weekly downloads
- [@bounded-sh/client](https://npm.io/package/@bounded-sh/client.md) — 3.2K weekly downloads
- [@oxyhq/services](https://npm.io/package/@oxyhq/services.md) — 2.3K weekly downloads
- [@luigi-project/plugin-auth-oauth2](https://npm.io/package/@luigi-project/plugin-auth-oauth2.md) — 2.3K weekly downloads

## Recent versions

- 2.3.0 (latest) — 2024-12-15
- 2.2.0 — 2024-06-23
- 2.1.0 — 2023-12-02
- 2.0.0 — 2023-06-24
- 1.0.0 — 2022-05-30

## README

# Ngx-Clarity

[![Build](https://github.com/jadengis/ngx-clarity/actions/workflows/test.yml/badge.svg)](https://github.com/jadengis/ngx-clarity/actions/workflows/test.yml)
[![Test](https://github.com/jadengis/ngx-clarity/actions/workflows/build.yml/badge.svg)](https://github.com/jadengis/ngx-clarity/actions/workflows/build.yml)
[![Lint](https://github.com/jadengis/ngx-clarity/actions/workflows/lint.yml/badge.svg)](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

---
_Source: https://npm.io/package/ngx-clarity · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._