Affiliate Tracking Guide

Learn how to track affiliate clicks and use the API to display genuinely popular products.

What do you get?

"Popular products" based on actual clicks, not admin picks
"Trending now" - products increasing in popularity
Filtering by category, brand, or partner
Confidence levels to know when you have enough data

Step 1: Configure Event Properties

Before you start tracking affiliate clicks, you need to register which properties you want to collect.

1. Go to Settings → Event Properties
2. Select your site
3. Click "Add all" to add all recommended properties

Property	Description	Required for
`product_id`	Unique product ID	Popular Products
`product_slug`	URL-friendly name for links	Optional
`category_slug`	Product category	Popular Categories
`brand_slug`	Brand	Filtering
`partner_slug`	Affiliate partner/store	Popular Partners
`price`	Price at click time	Analysis
`position`	Position in list	Analysis

Step 2: Install the tracking script

Add the tracking script to your HTML:

<script defer data-site-id="DIN-SAJT-ID" src="https://savri.io/script.js"></script>

Step 3: Send affiliate_click events

When a user clicks an affiliate link, send an event with relevant properties:

// Example: Product page with multiple offers
document.querySelectorAll('.affiliate-link').forEach(link => {
  link.addEventListener('click', () => {
    va('event', 'affiliate_click', {
      product_id: link.dataset.productId,
      product_slug: link.dataset.productSlug,
      category_slug: link.dataset.category,
      brand_slug: link.dataset.brand,
      partner_slug: link.dataset.partner,
      price: parseInt(link.dataset.price),
      position: parseInt(link.dataset.position)
    });
  });
});

<!-- Example: HTML for affiliate link -->
<a href="https://partner.com/product?ref=xxx"
   class="affiliate-link"
   data-product-id="iphone-15-skal-123"
   data-product-slug="iphone-15-skal"
   data-category="mobilskal"
   data-brand="apple"
   data-partner="teknikdelar"
   data-price="199"
   data-position="1">
  Buy now at TechParts - $19.99
</a>

Step 4: Create an API key

To fetch data via the API, you need an API key.

1. Go to Settings → API Keys
2. Click "Create API Key"
3. Select site and give the key a name (e.g., "Production")
4. Copy the key immediately - it's only shown once!

Important: Security

Never expose your API key in frontend code. Always make API calls from your server (e.g., in Next.js Server Components or API routes).

Step 5: Fetch popular products

Now you can fetch data via the API. Here's an example in Next.js:

// app/components/PopularProducts.tsx (Server Component)
async function getPopularProducts() {
  const res = await fetch(
    'https://savri.io/api/v1/popular/products?site_id=din-sajt&days=7&limit=10',
    {
      headers: {
        'Authorization': `Bearer ${process.env.BESOKSKOLLEN_API_KEY}`
      },
      next: { revalidate: 1800 } // ISR: 30 minutes
    }
  );
  return res.json();
}

export default async function PopularProducts() {
  const { data, meta } = await getPopularProducts();

  // Fallback if insufficient data
  if (meta.confidence === 'low') {
    return <FallbackProducts />;
  }

  return (
    <section>
      <h2>Popular products</h2>
      {meta.confidence === 'medium' && (
        <p className="text-sm text-gray-500">Based on limited data</p>
      )}
      <div className="grid grid-cols-3 gap-4">
        {data.map(product => (
          <ProductCard
            key={product.product_id}
            slug={product.product_slug}
            clicks={product.clicks}
          />
        ))}
      </div>
    </section>
  );
}

Bonus: Display trending products

In addition to the most popular, you can also display products that are increasing in popularity:

// Fetch products that are trending now
const trending = await fetch(
  'https://savri.io/api/v1/trending/products?site_id=din-sajt&min_growth=50',
  {
    headers: { 'Authorization': `Bearer ${process.env.BESOKSKOLLEN_API_KEY}` },
    next: { revalidate: 900 } // 15 minutes for trending
  }
);

// Response contains growth_percent
// { product_id: "airpods-pro", growth_percent: 369, clicks_recent: 15 }

Optimization: Batch requests

If you need multiple types of data simultaneously, use the batch endpoint to reduce latency:

const response = await fetch('https://savri.io/api/v1/batch', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.BESOKSKOLLEN_API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    site_id: 'din-sajt',
    requests: [
      { endpoint: 'popular/products', params: { limit: 10, days: 7 } },
      { endpoint: 'popular/categories', params: { limit: 6, days: 30 } },
      { endpoint: 'trending/products', params: { min_growth: 50 } }
    ]
  }),
  next: { revalidate: 1800 }
});

const { results } = await response.json();
// results[0] = popular/products
// results[1] = popular/categories
// results[2] = trending/products

GDPR and Privacy

Savri is designed to be GDPR-friendly:

No cookies - Cookieless tracking
No IP addresses - IP is hashed immediately
No personal data - Only aggregated product data
Whitelist system - Only registered properties are saved

docs.affiliateTracking.gdpr.suggestion

Prompt your AI

Copy the prompt below and paste it into your favorite AI (ChatGPT, Claude, etc.) to get help implementing affiliate tracking for your site.

AI prompt for affiliate tracking

docs.affiliateTracking.aiPrompt.prompt

Next steps

← Public API Event Properties →