Install with the Vite plugin

On a Vite project you install Script Monitoring as a build plugin: add @scriptmonitoring/vite and register scriptMonitoring() in vite.config.ts. Every production build then carries the tag at the very start of the <head>, so the install is enforced by your build rather than remembered by whoever edits index.html.

How do I install the plugin?#

1. In the dashboard, open Developers > Setup, go to step 3, Install, and pick Vite.

2. Install the package (1. Install package):

   npm i @scriptmonitoring/vite
   

   With yarn, yarn add @scriptmonitoring/vite. With pnpm, pnpm i @scriptmonitoring/vite.

3. Register the plugin (2. Register the plugin). This is the dashboard's snippet with your script URL filled in:

   // vite.config.ts
   import { scriptMonitoring } from '@scriptmonitoring/vite';
   import { defineConfig } from 'vite';
   
   export default defineConfig({
     plugins: [
       scriptMonitoring({ scriptUrl: 'https://<teamID>.cdn.scriptmt.com/sm.js' }), // <- Here
       // ...other plugins
     ],
   });
   

4. Build and deploy, then check Verify it's working.

Which options does scriptMonitoring() take?#

The same configuration with teamId:

// vite.config.ts
import { scriptMonitoring } from '@scriptmonitoring/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [scriptMonitoring({ teamId: '<teamID>' })],
});

Why don't I see the tag in development?#

The plugin skips the dev server unless you pass enabled: true, and logs "[Script Monitoring] Plugin is disabled (because you are in development mode)". Check the built dist/index.html instead: the first element in <head> is the Script Monitoring tag.