New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

unplugin-analytics

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

unplugin-analytics

Universal Analytics Engines Integration

0.0.12
latest
Source
npm

Version published: 5 months ago

Weekly downloads: 111; increased by24.72%

Maintainers: 0

Weekly downloads

Created: 12 months ago

Source

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 host
id: 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 script
id: 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="{&quot;token&quot;: &quot;...&quot;}" 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

Keywords

FAQs

What is unplugin-analytics?

Is unplugin-analytics popular?

Is unplugin-analytics well maintained?

Package last updated on 03 Oct 2024

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.

Install