👷♂️ Still work in progress.
🤩 PR Welcome! Hope more bundler / framework / analytics engines to be supported.
Universal Analytics Engines Integration.
Support analytics engines:
npm i -D unplugin-analyticsVite
// 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.
VitePress
// .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
// 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.
---
// src/layouts/Layout.astro
import Analytics from '~analytics/scripts.astro'
// ...
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Inject the scripts begin -->
<Analytics />
<!-- Inject the scripts end -->
<meta name="generator" content={Astro.generator} />
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>To make the TypeScript work, you can add unplugin-analytics/client to your corresponding tsconfig.json.
{
"compilerOptions": {
// ...
"types": [
"unplugin-analytics/client"
],
},
// ...
}Or you can add TypeScript triple-slash directives to your .d.ts (i.e. for projects initialized by Vite, it may be src/env.d.ts).
// Your .d.ts file
/// <reference types="unplugin-analytics/client" />Full example is located at examples/astro.
Nuxt
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['unplugin-analytics/nuxt'],
analytics: {
cloudflare: {
beacon: '...'
},
// Your unplugin-analytics options ...
}
});Full example is located at examples/nuxt.
Taking Vite as an example, you can config the analytics engines.
// vite.config.ts
import Analytics from 'unplugin-analytics/vite';
export default defineConfig({
plugins: [
Analytics({
analytics: {
umami: {
src: `...`,
id: `...`
},
plausible: {
domain: `...`
},
cloudflare: {
beacon: `...`
},
clarity: {
id: `...`
}
}
})
]
});Provider key: umami
Parameters:
src: Your umami script url or the hostid: Your umami website id
Generated script:
<script defer data-website-id="..." src="https://umami.is/script.js"></script>You can use umami tracker function like:
import { umami } from '~analytics/umami';
document.querySelector('.umami')?.addEventListener('click', () => {
// Track events
umami?.track('click umami button');
});Provider key: plausible
Parameters:
src: Your plausible script url or the hostid: Your website domain
Generated script:
<script defer data-domain="..." src="https://plausible.io/js/script.js"></script>Provider key: cloudflare
Parameters:
beacon: Your cloudflare web analytics beacon
Generated script:
<script defer data-cf-beacon="{"token": "..."}" src="https://static.cloudflareinsights.com/beacon.min.js"></script>Provider key: clarity
Parameters:
id: Your clarity project id
Generated script:
<script>(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", "...");</script>MIT License © 2024 XLor