Use Vercel Analytics with no frameworks

Hey, so I'm trying to implement Vercel Analytics in my vercel project. I saw some examples, but they used ES6 method to import the inject function. I try to use import function, here is my code:

1<!-- ... -->2<script type="module"> 3     import { inject } from '@vercel/analytics';4      5     inject();6</script>7<!-- ... -->

And this is the error:

1Uncaught TypeError: Failed to resolve module specifier "@vercel/analytics". Relative references must start with either "/", "./", or "../".

I installed the package using npm install @vercel/analytics.

Vercel Alum

Hi, !

The error you're encountering may be because you're trying to use a Node.js-style import in a browser environment. Browsers don't have direct access to the node_modules folder, so they can't resolve the @vercel/analytics package.

To correctly implement Vercel Analytics in your project, you should:

First, make sure you have installed the package correctly:

1npm install @vercel/analytics

Instead of trying to import the package directly in a script tag, you should use the Vercel Analytics React component in your main layout file. This approach uses the Analytics component from @vercel/analytics/react, which is designed to work with React applications deployed on Vercel .
After adding this component to your layout, deploy your application to Vercel. The analytics will start working automatically once your site is live on Vercel.
Make sure you have enabled Web Analytics in your Vercel project settings. You can do this by going to your project dashboard on Vercel, clicking on the Analytics tab, and enabling it from there .

Let us know how you get on!

Hey ! Thanks for responding. I just wanted to tell you that I am not using React or any other framework. Here's my project structure if ur wondering:

1- .vercel/ (vercel CLI stuff)2- api/ (My APIs)3- assets/ (CSS, JS, etc)4- node_modules/ (self-explanatory)56- pages/ (my HTML files)7-- pages/login.html8-- pages/dashboard.html910- package.json, package-lock.json (again, self-explanatory)11- vercel.json

So, I'm not using any framework, please let me know if there's a way to include vercel analytics in a project with no frameworks.

This topic is closed. It no longer accepts new replies.

Hi, !

To correctly implement Vercel Analytics in your project, you should:

First, make sure you have installed the package correctly:

1npm install @vercel/analytics

Instead of trying to import the package directly in a script tag, you should use the Vercel Analytics React component in your main layout file. This approach uses the Analytics component from @vercel/analytics/react, which is designed to work with React applications deployed on Vercel .
After adding this component to your layout, deploy your application to Vercel. The analytics will start working automatically once your site is live on Vercel.
Make sure you have enabled Web Analytics in your Vercel project settings. You can do this by going to your project dashboard on Vercel, clicking on the Analytics tab, and enabling it from there .

Let us know how you get on!