https://github.com/jadengis/ngx-clarity

Angular module to add the tracking code for microsoft.clarity.com
https://github.com/jadengis/ngx-clarity

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/jadengis/ngx-clarity
• Owner: jadengis
• Created: 2022-05-30T07:39:38.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-23T01:17:04.000Z (7 months ago)
• Last Synced: 2024-10-28T17:38:51.542Z (3 months ago)
• Language: TypeScript
• Size: 699 KB
• Stars: 17
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular - ngx-clarity - A useful Angular library that automatically injects the script tag required to use [Microsoft Clarity](https://clarity.microsoft.com/). (Table of contents / Angular)
• fucking-awesome-angular - ngx-clarity - A useful Angular library that automatically injects the script tag required to use 🌎 [Microsoft Clarity](clarity.microsoft.com/). (Table of contents / Angular)

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 <18`      |

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