Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yjl9903/unplugin-analytics
Universal Analytics Engines Integration
https://github.com/yjl9903/unplugin-analytics
analytics astro astro-integration google-analytics plausible umami unplugin vite vite-plugin webpack
Last synced: about 1 month ago
JSON representation
Universal Analytics Engines Integration
- Host: GitHub
- URL: https://github.com/yjl9903/unplugin-analytics
- Owner: yjl9903
- License: mit
- Created: 2024-02-27T06:53:57.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-04-12T13:35:08.000Z (7 months ago)
- Last Synced: 2024-04-12T23:34:21.092Z (7 months ago)
- Topics: analytics, astro, astro-integration, google-analytics, plausible, umami, unplugin, vite, vite-plugin, webpack
- Language: TypeScript
- Homepage: https://unplugin-analytics.pages.dev/
- Size: 487 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-analytics
[](https://www.npmjs.com/package/unplugin-analytics)
[](https://github.com/yjl9903/unplugin-analytics/blob/main/LICENSE)
[](https://github.com/yjl9903/unplugin-analytics/actions/workflows/ci.yml)
> 👷♂️ Still work in progress.
>
> 🤩 PR Welcome! Hope more bundler / framework / analytics engines to be supported.
Universal Analytics Engines Integration.
Support analytics engines:
- [Umami](https://umami.is/)
- [Plausible](https://plausible.io/)
- [Cloudflare Web Analytics](https://www.cloudflare.com/web-analytics/)
- [Microsoft Clarity](https://clarity.microsoft.com/)
## Installation
```bash
npm i -D unplugin-analytics
```
Vite
```ts
// vite.config.ts
import Analytics from 'unplugin-analytics/vite';
export default defineConfig({
plugins: [
Analytics({
analytics: {
cloudflare: {
beacon: '...'
},
// Your unplugin-analytics options ...
}
})
]
});
```
Full example is located at [examples/vite](https://github.com/yjl9903/unplugin-analytics/blob/main/examples/vite).
VitePress
```ts
// .vitepress/config.ts
import { defineConfig } from 'vitepress';
import { injectScriptTags } from 'unplugin-analytics/vitepress';
export default defineConfig({
async transformHead(context) {
// Add the following code
injectScriptTags({
cloudflare: {
beacon: '...'
},
// Your unplugin-analytics options ...
})(context);
},
});
```
Astro
```ts
// astro.config.mjs
import Analytics from 'unplugin-analytics/astro';
export default defineConfig({
integrations: [
Analytics({
analytics: {
cloudflare: {
beacon: '...'
},
// Your unplugin-analytics options ...
}
})
],
});
```
Then add the astro component made of injected scripts to your layouts.
```astro
---
// src/layouts/Layout.astro
import Analytics from '~analytics/scripts.astro'
// ...
---
```
To make the TypeScript work, you can add `unplugin-analytics/client` to your corresponding `tsconfig.json`.
```json5
{
"compilerOptions": {
// ...
"types": [
"unplugin-analytics/client"
],
},
// ...
}
```
Or you can add TypeScript [triple-slash directives](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) to your `.d.ts` (i.e. for projects initialized by Vite, it may be `src/env.d.ts`).
```ts
// Your .d.ts file
///
```
Full example is located at [examples/astro](https://github.com/yjl9903/unplugin-analytics/blob/main/examples/astro).
Nuxt
```ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['unplugin-analytics/nuxt'],
analytics: {
cloudflare: {
beacon: '...'
},
// Your unplugin-analytics options ...
}
});
```
Full example is located at [examples/nuxt](https://github.com/yjl9903/unplugin-analytics/blob/main/examples/nuxt).
## Usage
Taking Vite as an example, you can config the analytics engines.
```ts
// vite.config.ts
import Analytics from 'unplugin-analytics/vite';
export default defineConfig({
plugins: [
Analytics({
analytics: {
umami: {
src: `...`,
id: `...`
},
plausible: {
domain: `...`
},
cloudflare: {
beacon: `...`
},
clarity: {
id: `...`
}
}
})
]
});
```
### Umami
**Provider key**: `umami`
**Parameters**:
- `src`: Your umami script url or the host
- `id`: Your umami website id
Generated script:
```html
```
You can use umami tracker function like:
```ts
import { umami } from '~analytics/umami';
document.querySelector('.umami')?.addEventListener('click', () => {
// Track events
umami?.track('click umami button');
});
```
### Plausible
**Provider key**: `plausible`
**Parameters**:
- `src`: Your plausible script url or the host
- `id`: Your website domain
Generated script:
```html
```
### Cloudflare Web Analytics
**Provider key**: `cloudflare`
**Parameters**:
- `beacon`: Your cloudflare web analytics beacon
Generated script:
```html
```
### Microsoft Clarity
**Provider key**: `clarity`
**Parameters**:
- `id`: Your clarity project id
Generated script:
```html
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "...");
```
## License
MIT License © 2024 [XLor](https://github.com/yjl9903)