Analytics API

const response = await client.analytics.track({
  slug: 'getting-started',
  sessionId: generateSessionId(), // Your session ID logic
  pageUrl: 'https://myblog.com/blog/getting-started',
  pageTitle: 'Getting Started',
  referrer: document.referrer,
  screenWidth: window.innerWidth,
  screenHeight: window.innerHeight,
  timeOnPage: 0,
  scrollDepth: 0,
  fetchGeo: true
})

// Store the ID for later updates
const { pageViewId, visitorId, sessionId } = response

// Update every 30 seconds
setInterval(async () => {
  await client.analytics.update(pageViewId, {
    timeOnPage: getTimeOnPage(),
    scrollDepth: getScrollDepth(),
    events: getCustomEvents()
  })
}, 30000)

// Final update on page unload
window.addEventListener('beforeunload', async () => {
  await client.analytics.update(pageViewId, {
    timeOnPage: getTimeOnPage(),
    scrollDepth: getScrollDepth(),
    exitPosition: getScrollDepth(),
    bounced: getTimeOnPage() < 5
  })
})

const { data: stats } = await client.analytics.getStats({ days: 7 })

console.log(`Period: ${stats.period.days} days`)
console.log(`Total views: ${stats.summary.totalViews}`)
console.log(`Unique visitors: ${stats.summary.uniqueVisitors}`)
console.log(`Avg views per visitor: ${stats.summary.avgViewsPerVisitor.toFixed(2)}`)

console.log('\nTop 5 Articles:')

stats.topArticles.slice(0, 5).forEach((article, i) => {
  console.log(`${i + 1}. ${article.title} (${article.views} views)`)
})

console.log('\nTop Countries:')

stats.topCountries.forEach(country => {
  console.log(`- ${country.country}: ${country.views} views`)
})

const events: PageEvent[] = [
  {
    type: 'button_click',
    element: 'cta-button',
    position: 45,
    timeOffset: 15000,
    data: { buttonText: 'Get Started' }
  },
  {
    type: 'video_play',
    element: 'intro-video',
    position: 30,
    timeOffset: 8000,
    data: { videoId: 'intro-123', duration: 120 }
  },
  {
    type: 'link_click',
    element: 'external-link',
    data: { href: 'https://example.com', text: 'Learn more' }
  }
]

await client.analytics.track({
  slug: 'my-article',
  events
})

"use client"

import { SimplistClient } from "@simplist.blog/sdk"
import { useEffect, useState } from "react"
import { v4 as uuid } from "uuid"

export function AnalyticsTracker({ slug }: { slug: string }) {
  const [pageViewId, setPageViewId] = useState<string | null>(null)
  const [startTime] = useState(Date.now())

  useEffect(() => {
    // Uses SIMPLIST_API_KEY from environment variables
    const client = new SimplistClient()

    // Get or create session ID
    const getSessionId = () => {
      let sessionId = sessionStorage.getItem('simplist_session')
      if (!sessionId) {
        sessionId = uuid()
        sessionStorage.setItem('simplist_session', sessionId)
      }
      
      return sessionId
    }

    // Initial tracking
    const initTracking = async () => {
      const response = await client.analytics.track({
        slug,
        sessionId: getSessionId(),
        pageUrl: window.location.href,
        pageTitle: document.title,
        referrer: document.referrer,
        screenWidth: window.innerWidth,
        screenHeight: window.innerHeight,
        timeOnPage: 0,
        scrollDepth: 0,
        fetchGeo: true
      })
      
      setPageViewId(response.id)
    }

    initTracking()

    // Update metrics every 30 seconds
    const updateInterval = setInterval(async () => {
      if (!pageViewId) return

      const timeOnPage = Math.floor((Date.now() - startTime) / 1000)
      const scrollDepth = Math.round(
        (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100
      )

      await client.analytics.update(pageViewId, {
        timeOnPage,
        scrollDepth
      })
    }, 30000)

    // Final update on unmount
    return () => {
      clearInterval(updateInterval)

      if (pageViewId) {
        const timeOnPage = Math.floor((Date.now() - startTime) / 1000)
        const scrollDepth = Math.round(
          (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100
        )

        client.analytics.update(pageViewId, {
          timeOnPage,
          scrollDepth,
          exitPosition: scrollDepth,
          bounced: timeOnPage < 5
        })
      }
    }
  }, [slug, pageViewId, startTime])

  return null
}