Background
⌘K

Astro Integration

Learn how to integrate Affonso affiliate tracking into your Astro application.

Silvestro
Written by Silvestro
Updated more than a month ago

Astro's component-based architecture and island-first approach make it ideal for adding tracking scripts through layout components that work efficiently with static generation and partial hydration.

Add tracking script to your Astro app

Astro's recommended approach is to create a layout component that includes your tracking script, which can then be reused across all your pages for consistent tracking.

  1. Create or open your main layout at src/layouts/Layout.astro
  2. Add the tracking script in the <head> section
  3. Use this layout across your pages:
---
export interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>{title}</title>

    <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>
    <slot />
  </body>
</html>

Find your Program ID →

Alternative: Use Astro's environment variables with the PUBLIC_ prefix to manage your Program ID dynamically.

Testing

  1. Start your Astro dev server: npm run dev
  2. Visit localhost:4321?atp=test (or your configured port)
  3. Check browser DevTools → Console → type window.affonso_referral
  4. Build and deploy: npm run build
  5. Verify tracking in your Affonso dashboard

Note: Astro's island architecture means client scripts run after page load, which works well with Affonso's deferred loading.

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.