Svelte and SvelteKit offer flexible ways to add tracking scripts, with SvelteKit providing an HTML template approach and regular Svelte using component lifecycle hooks.
Add tracking script to your Svelte app
For SvelteKit, the recommended approach is to modify your app.html template to include the tracking script globally across all routes.
- Open
src/app.htmlin your project - Add the tracking script in the
<head>section - Make sure it's before the
%sveltekit.head%placeholder:
<!DOCTYPE html>
<html lang="en" %sveltekit.theme%>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script
async
defer
src="https://affonso.io/js/pixel.min.js"
data-affonso="YOUR_PUBLIC_PROGRAM_ID"
data-cookie_duration="YOUR_COOKIE_DURATION"
></script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>For regular Svelte: Use the onMount lifecycle function in your main App.svelte component to add the script dynamically.
Testing
- Start your development server:
npm run dev - Visit
localhost:5173?atp=test(or your dev server URL) - 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 →
