Nuxt.js Integration
Nuxt.js provides multiple ways to add tracking scripts that work seamlessly with server-side rendering, static generation, and client-side hydration.
Add tracking script to your Nuxt app
The recommended approach is to create an app.html file in your root directory, which gives you full control over the HTML template that wraps your Nuxt application.
- Create an
app.htmlfile in your project root directory - Copy the default Nuxt HTML template
- Add your Affonso tracking script in the
<head>section:
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
<script
async
defer
src="https://affonso.io/js/pixel.min.js"
data-affonso="YOUR_PUBLIC_PROGRAM_ID"
data-cookie_duration="YOUR_COOKIE_DURATION"
></script>
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>Alternative: Configure the script via nuxt.config.ts in the app.head.script array or create a client-side plugin.
Testing
- Start your development server:
npm run dev - Visit
localhost:3000?atp=test - Check browser DevTools → Console → type
window.affonso_referral - Deploy and verify tracking in your Affonso dashboard
Next Steps
Once installed, you can access affiliate referral data and pass it to your payment provider. Connect your payment provider →
