Security News
Meet Socket at Black Hat Europe and BSides London 2025
Socket is heading to London! Stop by our booth or schedule a meeting to see what we've been working on.
By Anders Søndergaard - Nov 11, 2025
unplugin-analytics
Advanced tools
unplugin-analytics
Universal Analytics Engines Integration.
Support analytics engines:
Installation
npm i -D unplugin-analytics
Vite
// 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.
Usage
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: `...`
}
}
})
]
});
Umami
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>
Plausible
Provider key: plausible
Parameters:
src: Your plausible scriptid: Your website domain
Generated script:
<script defer data-domain="..." src="https://plausible.io/js/script.js"></script>
Cloudflare Web Analytics
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>
Microsoft Clarity
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>
License
MIT License © 2024 XLor
FAQs
Universal Analytics Engines Integration
The npm package unplugin-analytics receives a total of 41 weekly downloads. As such, unplugin-analytics popularity was classified as not popular.
We found that unplugin-analytics demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 26 Oct 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
OWASP 2025 Top 10 Adds Software Supply Chain Failures, Ranked Top Community Concern
OWASP’s 2025 Top 10 introduces Software Supply Chain Failures as a new category, reflecting rising concern over dependency and build system risks.
By Sarah Gooding - Nov 08, 2025
Research
/Security News
9 Malicious NuGet Packages Deliver Time-Delayed Destructive Payloads
Socket researchers discovered nine malicious NuGet packages that use time-delayed payloads to crash applications and corrupt industrial control systems.
By Kush Pandya - Nov 06, 2025