How to install Attriboo on React or Vite

Check which framework your builder generated

Lovable, Bolt and Replit are ways to build and host a project; they do not all guarantee the same framework. Use this guide if your project has Vite’s root index.html. If it uses Next.js, follow the Next.js guide instead.

• Next.js installation

Copy the script for this website

1. 1
   Choose your website in Attriboo.

   Check the address in the website selector. Add the website first if it is not listed.

2. 2
   Open Setup and choose React or Vite.

   Under Add the tracking script to your website, find Where is your site built? Choose this platform, then use Copy beside Your code. This gives you the right code format with your website ID filled in.

Add the script to index.html

1. 1
   Open index.html in the project root.

   Paste the full script from Setup before </head>. Keep your existing app entry script and root element.

2. 2
   If an AI builder is editing the project, give it the exact code.

   Ask it to add that script unchanged to the head of the root index.html, once. Do not ask it to invent another analytics package or use a private API key.

3. 3
   Build and publish the project.

   Open the production address you added in Attriboo, then run the checks below.

Check that page visits reach Attriboo

1. 1
   Open the published website in another tab.

   Use the address your customers visit. Make your normal tracking choice if a consent banner appears.

2. 2
   Return to the same website in Attriboo → Setup.

   Select Test Connection. Look for a successful result such as Verified Live or activity on the correct address.

3. 3
   Follow an internal link, then use your browser’s Back button.

   Check those paths in the Pages view for the current reporting dates. Allow the reports to refresh. An active connection alone does not confirm every page change.

• Check your first visit
• Troubleshoot missing visits

React Router and hash routes

Normal pathname changes through the History API are tracked automatically. Hash routes beginning #/ or #! are also recognized. An ordinary section anchor such as #features is not another pageview.

A query-string change without a new pathname is not a new page. If you use a different hash-routing convention, ask support to review it before changing tracker attributes.

What if the first page works but later pages do not

• Check that the published app loads the current tracker rather than an old self-hosted copy.
• Check whether the route actually changes the pathname or a recognized hash route.
• Check for another analytics wrapper or old manual Attriboo pageview call.
• Share the public page path and routing library through support if the transition still does not appear.

Connect visits to recorded revenue

Installing the script records website activity. To bring sales into Attriboo, connect the service you use to collect payments in Setup as well. Then compare the recorded sources and customer journeys behind your sales.

A payment imported from before tracking was installed may have no matching visit. Installing today does not recreate old website activity.

• Connect your payment provider
• See supported integrations

Framework reference

• Vite: index.html and project root
• React Router: locations