Web App Affiliate

npm install @affiliateo/web

import { AffiliateoProvider } from '@affiliateo/web';

export default function RootLayout({ children }) {
  return (
    <AffiliateoProvider campaignId="YOUR_CAMPAIGN_ID">
      {children}
    </AffiliateoProvider>
  );
}

'use client'
import { getAttribution } from '@affiliateo/web';

async function handleCheckout() {
  const attribution = getAttribution();
  const res = await fetch('/api/checkout', {
    method: 'POST',
    body: JSON.stringify({ attribution }),
  });
  const { url } = await res.json();
  window.location.href = url;
}

export async function POST(req) {
  const { attribution } = await req.json();

  const session = await stripe.checkout.sessions.create({
    line_items: [...],
    mode: 'payment',
    metadata: attribution,
  });

  return Response.json({ url: session.url });
}

'use client'
import { useEffect } from 'react'
import { useAffiliateRef } from '@affiliateo/web'

export default function SignupSuccess() {
  const { track } = useAffiliateRef()
  useEffect(() => {
    track('signup_completed', { plan: 'free' })
  }, [])
  return <div>Welcome!</div>
}

'use client'
import { useEffect } from 'react'
import { useAffiliateRef } from '@affiliateo/web'

export default function PricingModal({ open }: { open: boolean }) {
  const { trackPageview } = useAffiliateRef()
  useEffect(() => {
    // Fire a pageview for the modal so it shows up in your funnel
    // even though no real route change happened.
    if (open) trackPageview('/pricing-modal')
  }, [open])
  return null
}

'use client'
import { useEffect } from 'react'
import { useAffiliateRef } from '@affiliateo/web'
import { useUser } from './your-auth'

export default function AuthBoundary({ children }) {
  const { identify } = useAffiliateRef()
  const user = useUser()
  useEffect(() => {
    if (user) identify(user.id)
  }, [user])
  return <>{children}</>
}

import { AffiliateoProvider } from '@affiliateo/web';

export default function RootLayout({ children }) {
  return (
    <AffiliateoProvider
      campaignId="YOUR_CAMPAIGN_ID"
      allowedHostnames={['app.merchant.com', 'docs.merchant.com']}
    >
      {children}
    </AffiliateoProvider>
  );
}

import { AffiliateoProvider } from '@affiliateo/web';

export default function RootLayout({ children }) {
  return (
    <AffiliateoProvider
      campaignId="YOUR_CAMPAIGN_ID"
      // Turn on for end-to-end tests against localhost.
      // Leave false (the default) in production.
      allowLocalhost={process.env.NODE_ENV !== 'production'}
      // Print decision logs to the browser console. Useful when
      // investigating "why aren't my events showing up?".
      debug={process.env.NODE_ENV !== 'production'}
      // Set to true if your site is legitimately embedded inside
      // an iframe (e.g. an embed widget shipped to partners).
      // allowIframe
    >
      {children}
    </AffiliateoProvider>
  );
}

'use client'
import { useAffiliateRef } from '@affiliateo/web'

export default function CheckoutButton() {
  const { track, flush } = useAffiliateRef()
  return (
    <button onClick={async () => {
      track('initiate_checkout', { plan: 'pro' })
      // Force events out NOW before the redirect kills the page.
      // Default flush timer is every 5s, too slow for a redirect.
      await flush()
      window.location.href = '/api/checkout'
    }}>
      Subscribe
    </button>
  )
}

<script defer
  data-campaign="YOUR_CAMPAIGN_ID"
  src="https://affiliateo.com/shopify-affiliate.js"
></script>