Background
⌘K

v0.dev Integration

Learn how to integrate Affonso affiliate tracking into applications generated by v0.dev.

Silvestro
Written by Silvestro
Updated more than a month ago

v0.dev by Vercel generates React/Next.js components and applications from text prompts. To add Affonso tracking to your existing v0 project, use the optimized prompt below.

Promopt

Copy and paste this prompt into v0.dev to add Affonso tracking to your existing project:

Add Affonso.io affiliate tracking to this Next.js/React project with the following specification:

TRACKING IMPLEMENTATION:
Import Script from 'next/script' and add this tracking script:

<Script
  src="https://affonso.io/js/pixel.min.js"
  data-affonso="YOUR_PUBLIC_PROGRAM_ID"
  data-cookie_duration="30"
  strategy="afterInteractive"
/>

INTEGRATION REQUIREMENTS:
1. Add the Script component to the root layout or _app.js file
2. Use next/script import: import Script from 'next/script'
3. Set strategy to "afterInteractive" for optimal performance
4. Place in the <head> section or at the top of the layout
5. Ensure it loads on all pages and routes
6. Must work with Next.js App Router and Pages Router

TECHNICAL SPECIFICATIONS:
- Compatible with Next.js 13+ and App Router
- Should not block page rendering or hydration
- Must persist across client-side navigation
- No conflicts with existing Next.js optimizations
- Properly handles server-side rendering

CODE STRUCTURE:
- For App Router: Add to app/layout.tsx
- For Pages Router: Add to pages/_app.tsx
- Ensure TypeScript compatibility if used
- Follow Next.js best practices for script loading

Please implement this tracking script following Next.js conventions.

Replace YOUR_PUBLIC_PROGRAM_ID with your actual Program ID.

Next.js Specific Troubleshooting

App Router issues:

The tracking script isn't working with Next.js App Router. Please:
1. Ensure the Script component is in app/layout.tsx
2. Place it inside the <html> or <head> section
3. Verify strategy="afterInteractive" is set
4. Check that it's not wrapped in client-side only components

Pages Router issues:

The tracking script needs to work with Pages Router. Please:
1. Add the Script component to pages/_app.tsx
2. Import Script from 'next/script'
3. Place it at the top level of the component return
4. Ensure it loads before page components

TypeScript errors:

Fix TypeScript errors for the tracking script:
1. Ensure proper import: import Script from 'next/script'
2. Add type annotations if needed
3. Verify all props are correctly typed
4. Check that data attributes are properly formatted

Testing Your Implementation

  1. Run your application with npm run dev
  2. Visit your app with ?atp=test parameter
  3. Open browser DevTools → Console
  4. Type window.affonso_referral - should return a tracking ID
  5. Test navigation between pages to ensure persistence

Next Steps

Once installed, you can access affiliate referral data and pass it to your payment provider. Connect your payment provider →

Was this article helpful?

If you still need help, our support team is here for you.

Contact Support
bg

Ready to Scale Your SaaS?

Affonso is the easiest way to launch your own affiliate program. We take care of the technical stuff, so you can focus on growing your business.