Versatailor logoVersaTailorDocs
Dashboard
Docs/INSTALLATION GUIDES/Next.js Installation

Next.js Installation

Installing VersaTailor on your Next.js website is straightforward and takes just a few minutes. The tracking script should be placed in your root layout to ensure it loads on every page.

Step 1: Get Your Tracking Script

  1. Log in to your VersaTailor dashboard
  2. Click on the website dropdown in the top navigation
  3. Select "Site Settings" from the dropdown menu
  4. In the General tab, copy your unique tracking script

Your tracking script will look like this:

<script
  defer
  src="https://versatailor.com/script.js"
  data-website-id="your-website-id-here"
  data-domain="yourdomain.com"
></script>

Step 2: Add Script to Root Layout

Navigate to your root layout file, typically located at app/layout.tsx (App Router) or pages/_app.tsx (Pages Router).

For App Router (app/layout.tsx):

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Your App',
  description: 'Your app description',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <script
          defer
          src="https://versatailor.com/script.js"
          data-website-id="your-website-id-here"
          data-domain="yourdomain.com"
        />
      </head>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  )
}

For Pages Router (pages/_app.tsx):

import type { AppProps } from 'next/app'
import Head from 'next/head'
import './globals.css'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <script
          defer
          src="https://versatailor.com/script.js"
          data-website-id="your-website-id-here"
          data-domain="yourdomain.com"
        />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

Alternative: Using next/script

You can also use Next.js's next/script component for more control over script loading:

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Script
          src="https://versatailor.com/script.js"
          data-website-id="your-website-id-here"
          data-domain="yourdomain.com"
          strategy="afterInteractive"
        />
        {children}
      </body>
    </html>
  )
}

Step 3: Verify Installation

  1. Save your changes and restart your Next.js development server
  2. Visit your website in a browser
  3. Return to your VersaTailor dashboard
  4. Use the "Verify Installation" button in Site Settings
  5. Confirm that page views are being tracked in your dashboard

Custom Event Tracking

Once the base script is installed, you can track custom events like purchases or conversions:

// Track a payment event
useEffect(() => {
  // Example: Track when a purchase is completed
  const handlePurchase = () => {
    window?.versatailor("payment", {
      email: "customer@example.com",
      amnt: 2999, // $29.99 in cents
    });
  };
  
  // Call handlePurchase when purchase is completed
}, []);

// Track custom events
const trackCustomEvent = () => {
  window?.versatailor("signup", {
    email: "user@example.com"
  });
};

Environment Variables

Create a .env.local file with your VersaTailor configuration:

NEXT_PUBLIC_VERSATAILOR_WEBSITE_ID=your_website_id
NEXT_PUBLIC_VERSATAILOR_DOMAIN=your_domain.com

TypeScript Support

Add type definitions for better TypeScript support:

// types/versatailor.d.ts
declare global {
  interface Window {
    versatailor: (action: string, ...args: any[]) => void
  }
}

export {}

Testing

Test your installation by:

  1. Opening your website in a browser
  2. Checking the Network tab for requests to versatailor.com
  3. Verifying data appears in your VersaTailor dashboard

Troubleshooting

Common issues and solutions:

  • Script not loading: Check your website ID and domain configuration
  • No data appearing: Ensure the script is loaded before page navigation
  • TypeScript errors: Add the type definitions above

Important Notes

Important: Make sure to replace your-website-id-here and yourdomain.com with your actual website ID and domain from the VersaTailor dashboard.

Next Steps

Now that you have VersaTailor installed on your Next.js website:

Need help? Contact us for assistance.

Suggest features? We'd love your feedback