How to install Attriboo on Next.js

Before you start

You need access to the application source and deployment. Add your production domain in Attriboo. These instructions apply to a Next.js project, including one generated with v0; check the framework before following them.

If your project uses src/app or src/pages, use that directory in the paths below. Keep your existing layout and page contents.

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 Next.js.

   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.

App Router: add Script in the root layout

1. 1
   Open the root layout shared by your public routes.

   Import Script from next/script. Add the Script component supplied by Setup inside the existing body element.

2. 2
   Keep strategy="afterInteractive" and data-site-id.

   Use the script URL and website ID from Setup. You do not need to make the whole layout a client component just to use this Script component.

3. 3
   Build and deploy the application.

   Check the production domain, rather than relying only on a local development session.

import Script from "next/script";

// Inside the existing <body> in app/layout.tsx:
<Script
  src="https://www.attriboo.com/t.js"
  data-site-id="site_YOUR_WEBSITE_ID"
  strategy="afterInteractive"
/>

Pages Router: use the shared application

In pages/_app.tsx, import Script from next/script and render the same component alongside your existing page component. Do not add another body element there. Do not put a copy in every route.

Next.js manages the script across navigation. Keep the website ID on the Script component and do not replace it with a secret API key.

• Next.js: application-wide scripts with Pages Router

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

Do I need usePathname or router events

Not for normal supported navigation with the current Attriboo tracker. It watches History API changes and Back/Forward. Do not add a useEffect that sends another pageview after each route change.

Query-only changes, such as changing a filter on the same pathname, are not counted as a new page. Custom navigation that does not change the browser address needs a separate review.

• Ask about a custom router

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

Next.js reference

• Next.js: Script component and loading strategies