Lovable

Add DataSaaS analytics to a project built with Lovable. Since Lovable uses AI to generate and modify code, you can add tracking by providing a prompt.

1

Get your website ID and domain

Log in to your DataSaaS dashboard and go to your website settings. Copy your Website ID (starts with ds_) and your domain.

2

Send the installation prompt

Open your project in Lovable and paste the following prompt into the chat. Replace the placeholder values with your actual website ID and domain:

I need to add DataSaaS analytics tracking to this project.

Add this script tag to the <head> of the root HTML file or main layout:

<script
  defer
  data-website-id="ds_YOUR_WEBSITE_ID"
  data-domain="yourdomain.com"
  src="https://datasaas.co/js/script.min.js"
></script>

Replace ds_YOUR_WEBSITE_ID with my actual website ID and yourdomain.com with my domain.

If using React/Next.js, use the Script component or add it to index.html. If using Vite, add to index.html in the <head>.
The script should load on every page and tracks SPA navigation automatically.
3

Publish and verify

After Lovable applies the changes, publish your project. Then visit your live site and check your DataSaaS dashboard to confirm events are being received.

Troubleshooting

If events aren't showing up in your dashboard, send this follow-up prompt in Lovable:

Can you verify the DataSaaS analytics setup?
1. What framework is this project using?
2. Where did you place the tracking script?
3. Will it load on all pages including future ones?
4. Show me the implementation.

Common issues

  • Script placed in the wrong file— The script must be in a file that loads on every page (e.g., index.html, root layout, or _app.tsx). If Lovable placed it in a single page component, ask it to move the script to the root.
  • Wrong domain — Make sure the data-domainattribute matches your published site's domain exactly, including subdomains.
  • Script not loading — Verify the src URL is https://datasaas.co/js/script.min.js. Some AI tools may modify the URL.
  • Duplicate scripts— If you asked Lovable multiple times, check that the script wasn't added more than once.
Tip

The DataSaaS script automatically tracks SPA navigation via the History API. You don't need any additional configuration for client-side routing in React, Vue, or Svelte projects.