Skip to content

Latest commit

 

History

History
285 lines (209 loc) · 5.72 KB

README.md

File metadata and controls

285 lines (209 loc) · 5.72 KB
Raw

unplugin-analytics

version GitHub License CI

👷‍♂️ Still work in progress.

🤩 PR Welcome! Hope more bundler / framework / analytics engines to be supported.

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>

You can use umami tracker function like:

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:

<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

MIT License © 2024 XLor