How to install Attriboo on Remix / React Router

Before you start

This method covers Remix v2 and React Router framework projects with an app/root.tsx document. A React Router app using Vite’s index.html should follow the React/Vite guide instead.

Add the published domain in Attriboo. Keep one tracking installation and preserve your site’s consent choices. Your website ID is public; private API keys do not belong in the page script.

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 Remix / React Router.

   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 Attriboo to Remix / React Router

1. 1
   Open app/root.tsx and find the component that renders html, head and body.

   It may be an exported Layout component.

2. 2
   Add the JSX script from Setup inside that head.

   Keep Meta, Links, Outlet, Scripts and ScrollRestoration where the application needs them.

3. 3
   Deploy the app and check a direct page load plus client-side links.

   If the app uses a Content Security Policy nonce, have its developer include the same approved nonce on this script.

<script defer data-site-id="site_YOUR_WEBSITE_ID" src="https://www.attriboo.com/t.js"></script>

Check this platform’s behavior

Do not paste an HTML document over the existing root file. Add the script element only. Resource/API routes that return JSON do not render this document and are not browser pages to track.

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

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

Remix / React Router references

These placement instructions were reviewed against the platform’s documentation and Attriboo’s current tracker. Check the published site after deployment, theme changes or navigation changes.

• Remix root document
• React Router root route