Plausible, analityka bez ciasteczek i banerów zgody

Czym jest Plausible?

Plausible Analytics to lekka, open source'owa platforma analityczna stworzona jako alternatywa dla Google Analytics z myślą o prywatności użytkowników. Założona w 2019 roku w Estonii przez Uku Täht i Marko Saric, Plausible wyrosło z potrzeby posiadania narzędzia analitycznego, które nie wymaga cookies, bannerów zgody GDPR i nie zbiera danych osobowych.

W przeciwieństwie do tradycyjnych narzędzi analitycznych, które śledzą użytkowników przez całą sieć za pomocą cookies third-party, Plausible używa unikalnego podejścia opartego na hashowaniu adresów IP w połączeniu z User Agent. To oznacza, że każda wizyta jest anonimowa, a Plausible nie buduje profili użytkowników ani nie sprzedaje danych reklamodawcom.

Historia i filozofia Plausible

Plausible powstało jako odpowiedź na rosnące obawy dotyczące prywatności w internecie i coraz bardziej skomplikowane regulacje jak GDPR (Europa), CCPA (Kalifornia) czy LGPD (Brazylia). Twórcy zauważyli, że większość właścicieli stron potrzebuje tylko podstawowych metryk - ilu ludzi odwiedza stronę, skąd przychodzą i które strony są popularne.

Google Analytics oferuje tysiące metryk i wymiarów, ale większość z nich nie jest potrzebna zwykłym twórcom treści czy małym firmom. Za to wymaga akceptacji skomplikowanej polityki prywatności, instalacji bannerów cookie i potencjalnie naraża na kary za naruszenie GDPR sięgające 4% rocznego obrotu.

Plausible to filozofia "less is more" - prosty dashboard z najważniejszymi informacjami, bez zbędnego szumu i bez kompromisów w kwestii prywatności.

Dlaczego Plausible?

1. Brak cookies = Brak GDPR bannerów

Plausible nie używa cookies ani żadnej formy persistent storage. Nie musisz wyświetlać irytujących banerów z pytaniem o zgodę na cookies. Twoja strona ładuje się szybciej i wygląda profesjonalniej bez tych pop-upów.

2. Ekstremalnie lekki skrypt

Skrypt Plausible waży mniej niż 1KB (gzipped), podczas gdy Google Analytics to ponad 45KB. To oznacza:

Szybsze ładowanie strony
Lepszy Core Web Vitals score
Niższe zużycie transferu dla odwiedzających
Mniejszy ślad węglowy strony

3. Pełna zgodność z przepisami

Plausible jest w pełni zgodny z:

GDPR (Europa)
CCPA (Kalifornia)
PECR (UK)
LGPD (Brazylia)
PIPEDA (Kanada)

Dane są przechowywane na serwerach w Unii Europejskiej, co jest wymogiem wielu europejskich firm i instytucji.

4. Otwarty kod i wdrożenie własne

Plausible jest w pełni open source (licencja AGPL). Możesz:

Zobaczyć dokładnie, jak działa kod
Uruchomić własną instancję na swoich serwerach
Mieć 100% kontrolę nad danymi
Nigdy nie martwić się o vendor lock-in

5. Prosty, czytelny dashboard

Zamiast setek raportów i wymiarów, dostajesz jeden elegancki dashboard z najważniejszymi informacjami:

Liczba odwiedzających (unique visitors)
Odsłony (pageviews)
Współczynnik odrzuceń (bounce rate)
Czas na stronie
Źródła ruchu
Popularne strony
Lokalizacje geograficzne
Urządzenia i przeglądarki

6. Etyczne podejście do biznesu

Plausible to bootstrapped firma bez zewnętrznych inwestorów. To oznacza:

Brak presji na monetyzację danych użytkowników
Transparentny model biznesowy (płacisz za usługę, nie jesteś produktem)
Długoterminowa stabilność bez ryzyka przejęcia przez korporację

Plausible vs Google Analytics

Cecha	Plausible	Google Analytics 4
Cookies	Nie	Tak (first-party)
GDPR banner	Nie wymaga	Wymaga
Rozmiar skryptu	<1KB	45KB+
Dane osobowe	Nie zbiera	Zbiera
Profiling użytkowników	Nie	Tak
Udostępnianie Google	Nie	Tak (domyślnie)
Open source	Tak (AGPL)	Nie
Self-hosting	Tak	Nie
Cena	Od $9/mo	"Darmowy"*
Kompleksowość	Prosty	Bardzo złożony
Retencja danych	Nieokreślona	2-14 miesięcy
Real-time	Tak	Ograniczony
Lokalizacja danych	EU (Niemcy)	USA (Google Cloud)

*Google Analytics jest "darmowy", ale płacisz danymi swoich użytkowników, które Google wykorzystuje do reklam.

Plausible vs inne alternatywy

Cecha	Plausible	Fathom	Simple Analytics	Matomo
Open source	Tak	Nie	Nie	Tak
Self-host	Tak	Nie	Nie	Tak
Cena (start)	$9/mo	$14/mo	$9/mo	Free
Cookies	Nie	Nie	Nie	Opcjonalne
Rozmiar JS	<1KB	2KB	3KB	22KB+
EU hosting	Tak	Tak	Tak	Opcjonalne
Real-time	Tak	Tak	Tak	Tak
Custom events	Tak	Tak	Tak	Tak
Funnels	Tak	Tak	Tak	Tak
API	Tak	Tak	Tak	Tak

Instalacja Plausible

Podstawowa instalacja (HTML)

Dodaj skrypt do sekcji <head> swojej strony:

Code

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moja strona</title>

    <!-- Plausible Analytics -->
    <script
        defer
        data-domain="twojadomena.pl"
        src="https://plausible.io/js/script.js">
    </script>
</head>
<body>
    <!-- Zawartość strony -->
</body>
</html>

Next.js App Router

TSapp/layout.tsx

TypeScript

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="pl">
      <head>
        <Script
          defer
          data-domain="twojadomena.pl"
          src="https://plausible.io/js/script.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Next.js Pages Router

TSpages/_app.tsx

TypeScript

// pages/_app.tsx
import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        defer
        data-domain="twojadomena.pl"
        src="https://plausible.io/js/script.js"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

Remix

W Remiksie znacznik trafia do pliku app/root.tsx, bo to on renderuje cały dokument razem z sekcją head. Jedno zastrzeżenie dotyczy nazwy: rozwój tej linii przeniósł się do React Routera w wersji siódmej, więc poniższy przykład opisuje wersję drugą, a w nowym projekcie ten sam wpis robisz w głównym pliku React Routera.

TSapp/root.tsx

TypeScript

// app/root.tsx
import { Links, Meta, Outlet, Scripts } from '@remix-run/react'

export default function App() {
  return (
    <html lang="pl">
      <head>
        <Meta />
        <Links />
        <script
          defer
          data-domain="twojadomena.pl"
          src="https://plausible.io/js/script.js"
        />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  )
}

Astro

Code

ASTRO

---
// src/layouts/Layout.astro
---
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>{title}</title>
    <script
        defer
        data-domain="twojadomena.pl"
        src="https://plausible.io/js/script.js">
    </script>
</head>
<body>
    <slot />
</body>
</html>

Gatsby

JSgatsby-ssr.js

JavaScript

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="plausible"
      defer
      data-domain="twojadomena.pl"
      src="https://plausible.io/js/script.js"
    />
  ])
}

Nuxt.js 3

TSnuxt.config.ts

TypeScript

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          defer: true,
          'data-domain': 'twojadomena.pl',
          src: 'https://plausible.io/js/script.js'
        }
      ]
    }
  }
})

SvelteKit

src/app.html

HTML

<!-- src/app.html -->
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    %sveltekit.head%
    <script
        defer
        data-domain="twojadomena.pl"
        src="https://plausible.io/js/script.js">
    </script>
</head>
<body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
</body>
</html>

Zdarzenia własne

Śledzenie zdarzeń z JavaScript

Code

TypeScript

// Deklaracja typów dla TypeScript
declare global {
  interface Window {
    plausible: (
      event: string,
      options?: {
        props?: Record<string, string | number | boolean>
        callback?: () => void
        revenue?: { currency: string; amount: number }
      }
    ) => void
  }
}

// Podstawowe zdarzenie
function trackSignup() {
  window.plausible('Signup')
}

// Zdarzenie z właściwościami
function trackPurchase(plan: string, price: number) {
  window.plausible('Purchase', {
    props: {
      plan,
      price: price.toString()
    }
  })
}

// Zdarzenie z revenue tracking
function trackSale(amount: number, currency: string = 'PLN') {
  window.plausible('Sale', {
    revenue: { currency, amount }
  })
}

// Zdarzenie z callback
function trackDownload(fileName: string) {
  window.plausible('Download', {
    props: { file: fileName },
    callback: () => {
      console.log('Event tracked successfully')
    }
  })
}

Hook do React

TShooks/usePlausible.ts

TypeScript

// hooks/usePlausible.ts
import { useCallback } from 'react'

type PlausibleEvent = {
  name: string
  props?: Record<string, string | number | boolean>
  revenue?: { currency: string; amount: number }
}

export function usePlausible() {
  const trackEvent = useCallback(({ name, props, revenue }: PlausibleEvent) => {
    if (typeof window !== 'undefined' && window.plausible) {
      window.plausible(name, { props, revenue })
    }
  }, [])

  const trackPageview = useCallback((url?: string) => {
    if (typeof window !== 'undefined' && window.plausible) {
      window.plausible('pageview', {
        props: url ? { url } : undefined
      })
    }
  }, [])

  return { trackEvent, trackPageview }
}

// Użycie w komponencie
function PricingCard({ plan, price }: { plan: string; price: number }) {
  const { trackEvent } = usePlausible()

  const handlePurchase = () => {
    trackEvent({
      name: 'Purchase',
      props: { plan },
      revenue: { currency: 'PLN', amount: price }
    })
  }

  return (
    <button onClick={handlePurchase}>
      Kup plan {plan} za {price} PLN
    </button>
  )
}

Automatyczne śledzenie kliknięć

Code

HTML

<!-- Dodaj klasę plausible-event-name=NAZWA do elementu -->
<a
  href="/pricing"
  class="plausible-event-name=CTA+Click"
>
  Zobacz cennik
</a>

<!-- Z właściwościami -->
<button
  class="plausible-event-name=Button+Click plausible-event-variant=primary"
>
  Zapisz się
</button>

<!-- Dla formularzy -->
<form
  action="/submit"
  class="plausible-event-name=Form+Submit"
>
  <input type="email" name="email" required />
  <button type="submit">Wyślij</button>
</form>

Rozszerzone opcje skryptu

Code

HTML

<!-- Automatyczne śledzenie outbound links -->
<script
  defer
  data-domain="twojadomena.pl"
  src="https://plausible.io/js/script.outbound-links.js">
</script>

<!-- Śledzenie pobrań plików -->
<script
  defer
  data-domain="twojadomena.pl"
  src="https://plausible.io/js/script.file-downloads.js">
</script>

<!-- Wszystkie rozszerzenia -->
<script
  defer
  data-domain="twojadomena.pl"
  src="https://plausible.io/js/script.tagged-events.outbound-links.file-downloads.js">
</script>

<!-- Hash-based routing (SPA) -->
<script
  defer
  data-domain="twojadomena.pl"
  src="https://plausible.io/js/script.hash.js">
</script>

<!-- Manual pageview tracking dla SPA -->
<script
  defer
  data-domain="twojadomena.pl"
  src="https://plausible.io/js/script.manual.js">
</script>

Goals & Conversions

Definiowanie celów w dashboardzie

W panelu Plausible możesz zdefiniować różne typy celów:

1. Odwiedziny strony (Pageview goals)

/pricing - odwiedziny strony cennika
/thank-you - strona podziękowania po zakupie
/signup/complete - zakończenie rejestracji

2. Custom events

Signup - rejestracja użytkownika
Purchase - zakup
Download - pobranie pliku
Newsletter - zapis do newslettera

3. Funnels (lejki konwersji)

Code

TEXT

Funnel: Proces zakupowy
1. /products →
2. /cart →
3. /checkout →
4. /thank-you

Konwersja: 2.3%

Revenue tracking

Code

TypeScript

// Śledzenie przychodu
function trackPurchase(orderId: string, amount: number) {
  window.plausible('Purchase', {
    revenue: {
      currency: 'PLN',
      amount
    },
    props: {
      order_id: orderId
    }
  })
}

// Przykład: e-commerce checkout
async function completeCheckout(cart: CartItem[]) {
  const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0)

  const response = await fetch('/api/checkout', {
    method: 'POST',
    body: JSON.stringify(cart)
  })

  if (response.ok) {
    const { orderId } = await response.json()

    // Track w Plausible
    window.plausible('Purchase', {
      revenue: { currency: 'PLN', amount: total },
      props: {
        order_id: orderId,
        items_count: cart.length.toString()
      }
    })
  }
}

Filtrowanie i segmentacja

Dostępne filtry w dashboardzie

Plausible pozwala filtrować dane według:

Źródła ruchu:

Source (Google, Facebook, Twitter, itp.)
Referrer (konkretna strona odsyłająca)
UTM parameters (campaign, source, medium, term, content)

Technologia:

Browser (Chrome, Firefox, Safari, Edge)
OS (Windows, macOS, iOS, Android, Linux)
Device type (Desktop, Mobile, Tablet)
Country / Region / City

Strony:

Entry page (strona wejścia)
Exit page (strona wyjścia)
Page (odwiedzona strona)

UTM tracking

Code

HTML

<!-- Link z UTM parameters -->
<a href="https://twojadomena.pl?utm_source=newsletter&utm_medium=email&utm_campaign=summer_sale">
  Sprawdź promocję
</a>

Code

TypeScript

// Generowanie linków z UTM w JavaScript
function createUtmLink(
  baseUrl: string,
  params: {
    source: string
    medium: string
    campaign: string
    term?: string
    content?: string
  }
) {
  const url = new URL(baseUrl)
  url.searchParams.set('utm_source', params.source)
  url.searchParams.set('utm_medium', params.medium)
  url.searchParams.set('utm_campaign', params.campaign)
  if (params.term) url.searchParams.set('utm_term', params.term)
  if (params.content) url.searchParams.set('utm_content', params.content)
  return url.toString()
}

// Użycie
const newsletterLink = createUtmLink('https://mojsklep.pl/promocja', {
  source: 'newsletter',
  medium: 'email',
  campaign: 'black_friday_2024'
})

Plausible API

Dostęp do API statystyk jest wpięty w plan Business i wyżej, a nie dostępny na każdym poziomie. Obowiązuje przy tym limit sześciuset zapytań na godzinę, co przy panelu odpytującym API przy każdym odświeżeniu strony wyczerpuje się szybciej, niż wygląda. Rozsądny układ to buforowanie odpowiedzi po swojej stronie i odpytywanie w ustalonych odstępach, a nie na żądanie użytkownika.

Stats API

Code

TypeScript

// Pobieranie statystyk z Plausible API
const PLAUSIBLE_API_KEY = process.env.PLAUSIBLE_API_KEY
const SITE_ID = 'twojadomena.pl'

interface PlausibleStats {
  results: {
    visitors: { value: number }
    pageviews: { value: number }
    bounce_rate: { value: number }
    visit_duration: { value: number }
  }
}

async function getStats(period: string = '30d'): Promise<PlausibleStats> {
  const response = await fetch(
    `https://plausible.io/api/v1/stats/aggregate?` +
    `site_id=${SITE_ID}&period=${period}&` +
    `metrics=visitors,pageviews,bounce_rate,visit_duration`,
    {
      headers: {
        Authorization: `Bearer ${PLAUSIBLE_API_KEY}`
      }
    }
  )

  return response.json()
}

// Pobieranie top stron
interface TopPages {
  results: Array<{
    page: string
    visitors: number
  }>
}

async function getTopPages(limit: number = 10): Promise<TopPages> {
  const response = await fetch(
    `https://plausible.io/api/v1/stats/breakdown?` +
    `site_id=${SITE_ID}&period=30d&property=event:page&limit=${limit}`,
    {
      headers: {
        Authorization: `Bearer ${PLAUSIBLE_API_KEY}`
      }
    }
  )

  return response.json()
}

Real-time API

Code

TypeScript

// Pobieranie aktywnych użytkowników
async function getCurrentVisitors(): Promise<number> {
  const response = await fetch(
    `https://plausible.io/api/v1/stats/realtime/visitors?site_id=${SITE_ID}`,
    {
      headers: {
        Authorization: `Bearer ${PLAUSIBLE_API_KEY}`
      }
    }
  )

  return response.json()
}

// Komponent pokazujący aktywnych użytkowników
function LiveVisitors() {
  const [visitors, setVisitors] = useState<number>(0)

  useEffect(() => {
    const fetchVisitors = async () => {
      const count = await getCurrentVisitors()
      setVisitors(count)
    }

    fetchVisitors()
    const interval = setInterval(fetchVisitors, 30000) // co 30 sekund

    return () => clearInterval(interval)
  }, [])

  return (
    <div className="flex items-center gap-2">
      <span className="relative flex h-3 w-3">
        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
        <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500" />
      </span>
      <span>{visitors} aktywnych użytkowników</span>
    </div>
  )
}

Events API

Code

TypeScript

// Wysyłanie zdarzeń bezpośrednio przez API (server-side)
async function trackServerEvent(
  eventName: string,
  props?: Record<string, string>,
  userAgent?: string,
  ip?: string
) {
  await fetch('https://plausible.io/api/event', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'User-Agent': userAgent || 'Node.js',
      'X-Forwarded-For': ip || ''
    },
    body: JSON.stringify({
      name: eventName,
      url: `https://${SITE_ID}`,
      domain: SITE_ID,
      props
    })
  })
}

// Użycie w API route (Next.js)
export async function POST(request: Request) {
  const { action, data } = await request.json()

  // Logika biznesowa...

  // Track w Plausible
  await trackServerEvent(
    'API Action',
    { action, status: 'success' },
    request.headers.get('user-agent') || undefined,
    request.headers.get('x-forwarded-for') || undefined
  )

  return Response.json({ success: true })
}

Self-hosting Plausible

Docker Compose setup

docker-compose.yml

YAML

# docker-compose.yml
version: "3.8"

services:
  plausible:
    image: plausible/analytics:v2.0
    restart: always
    command: sh -c "sleep 10 && /entrypoint.sh db createdb && /entrypoint.sh db migrate && /entrypoint.sh run"
    depends_on:
      - plausible_db
      - plausible_events_db
    ports:
      - 8000:8000
    env_file:
      - plausible-conf.env

  plausible_db:
    image: postgres:14-alpine
    restart: always
    volumes:
      - db-data:/var/lib/postgresql/data
    environment:
      - POSTGRES_PASSWORD=postgres

  plausible_events_db:
    image: clickhouse/clickhouse-server:23.3.7.5-alpine
    restart: always
    volumes:
      - event-data:/var/lib/clickhouse
      - ./clickhouse/clickhouse-config.xml:/etc/clickhouse-server/config.d/logging.xml:ro
      - ./clickhouse/clickhouse-user-config.xml:/etc/clickhouse-server/users.d/logging.xml:ro
    ulimits:
      nofile:
        soft: 262144
        hard: 262144

volumes:
  db-data:
  event-data:

Konfiguracja environment

plausible-conf.env

ENV

# plausible-conf.env

# Required settings
BASE_URL=https://analytics.twojadomena.pl
SECRET_KEY_BASE=losowy-64-znakowy-string-wygeneruj-przez-openssl

# Database
DATABASE_URL=postgres://postgres:postgres@plausible_db:5432/plausible_db
CLICKHOUSE_DATABASE_URL=http://plausible_events_db:8123/plausible_events_db

# Email (opcjonalnie, dla powiadomień)
MAILER_EMAIL=plausible@twojadomena.pl
SMTP_HOST_ADDR=smtp.twojadomena.pl
SMTP_HOST_PORT=587
SMTP_USER_NAME=plausible@twojadomena.pl
SMTP_USER_PWD=haslo-smtp
SMTP_HOST_SSL_ENABLED=false
SMTP_RETRIES=2

# Opcjonalne
DISABLE_REGISTRATION=true
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

Uruchomienie

Code

Bash

# Pobierz pliki konfiguracyjne
git clone https://github.com/plausible/community-edition.git plausible
cd plausible

# Wygeneruj secret key
openssl rand -base64 64 | tr -d '\n'

# Edytuj plausible-conf.env z wygenerowanym kluczem

# Uruchom
docker compose up -d

# Sprawdź logi
docker compose logs -f plausible

# Plausible będzie dostępny na http://localhost:8000

Nginx reverse proxy

Code

NGINX

# /etc/nginx/sites-available/plausible
server {
    listen 80;
    server_name analytics.twojadomena.pl;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name analytics.twojadomena.pl;

    ssl_certificate /etc/letsencrypt/live/analytics.twojadomena.pl/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/analytics.twojadomena.pl/privkey.pem;

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Cache dla skryptu JS
    location = /js/script.js {
        proxy_pass http://127.0.0.1:8000/js/script.js;
        proxy_set_header Host $host;
        proxy_cache_valid 200 1h;
        add_header Cache-Control "public, max-age=3600";
    }
}

Proxy skryptu przez własny serwer

Aby uniknąć blokowania przez ad-blockery:

TSapp/api/script.js/route.ts

TypeScript

// app/api/script.js/route.ts (Next.js)
export async function GET() {
  const response = await fetch('https://plausible.io/js/script.js')
  const script = await response.text()

  // Zamień endpoint na własny
  const modifiedScript = script.replace(
    'https://plausible.io/api/event',
    'https://twojadomena.pl/api/event'
  )

  return new Response(modifiedScript, {
    headers: {
      'Content-Type': 'application/javascript',
      'Cache-Control': 'public, max-age=3600'
    }
  })
}

// app/api/event/route.ts
export async function POST(request: Request) {
  const body = await request.text()

  await fetch('https://plausible.io/api/event', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'User-Agent': request.headers.get('user-agent') || '',
      'X-Forwarded-For': request.headers.get('x-forwarded-for') || ''
    },
    body
  })

  return new Response('ok')
}

Integracja z frameworkami

next-plausible

Code

Bash

npm install next-plausible

TSapp/layout.tsx

TypeScript

// app/layout.tsx
import PlausibleProvider from 'next-plausible'

export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="pl">
      <head>
        <PlausibleProvider
          domain="twojadomena.pl"
          trackOutboundLinks
          trackFileDownloads
          taggedEvents
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

// Użycie hooka
'use client'

import { usePlausible } from 'next-plausible'

function MyComponent() {
  const plausible = usePlausible()

  const handleClick = () => {
    plausible('Button Click', {
      props: { location: 'header', variant: 'primary' }
    })
  }

  return <button onClick={handleClick}>Kliknij</button>
}

@plausible/tracker

Code

Bash

npm install @plausible/tracker

TSlib/plausible.ts

TypeScript

// lib/plausible.ts
import Plausible from '@plausible/tracker'

export const plausible = Plausible({
  domain: 'twojadomena.pl',
  trackLocalhost: true, // dla developmentu
  apiHost: 'https://plausible.io' // lub self-hosted URL
})

// Użycie
import { plausible } from '@/lib/plausible'

plausible.trackEvent('Signup', {
  props: { plan: 'pro' }
})

// Z auto-tracking
plausible.enableAutoPageviews()
plausible.enableAutoOutboundTracking()

Vue.js plugin

TSplugins/plausible.ts

TypeScript

// plugins/plausible.ts
import { createPlausible } from 'vue-plausible'

export default defineNuxtPlugin((nuxtApp) => {
  const plausible = createPlausible({
    domain: 'twojadomena.pl',
    trackLocalhost: false
  })

  nuxtApp.vueApp.use(plausible)
})

// Użycie w komponencie
<script setup>
import { usePlausible } from 'vue-plausible'

const { trackEvent } = usePlausible()

function handleClick() {
  trackEvent('Button Click')
}
</script>

Cennik

Rozliczenie idzie za liczbę odsłon miesięcznie, a plany różnią się zakresem funkcji przy tym samym progu ruchu. To rozróżnienie bywa mylone, bo w wielu zestawieniach podaje się jedną cenę, jakby istniał tylko jeden plan.

Plan	Cena od	Co dokłada
Starter	9 USD miesięcznie	podstawowe raporty, do 10 tys. odsłon
Growth	14 USD miesięcznie	więcej osób w zespole, udostępnianie widoków
Business	19 USD miesięcznie	lejki, dane o przychodach, dostęp do API
Enterprise	wycena indywidualna	powyżej 10 mln odsłon miesięcznie

Cena rośnie wraz z progiem odsłon, a płatność roczna daje dwa miesiące gratis. Okres próbny trwa trzydzieści dni i nie wymaga karty płatniczej.

Warto zwrócić uwagę na jedną rzecz przy porównywaniu z konkurencją. Rozliczenie za odsłony, a nie za sesje czy użytkowników, oznacza, że koszt rośnie wraz z ruchem botów, jeśli te nie zostaną odfiltrowane. Przy stronie z dużą liczbą odwiedzin z automatów warto sprawdzić, jak wygląda faktyczne zużycie, zanim wybierzesz próg.

Wersja na własnym serwerze

Wydanie społecznościowe jest darmowe i wydawane na licencji AGPL 3.0, bez limitu odsłon. Płacisz wyłącznie za serwer.

Tu jednak leży najczęstsze nieporozumienie na temat tego produktu, więc trzeba je nazwać wprost: wersja darmowa nie jest równoważna chmurze. Lejki, import danych z Google Analytics i logowanie jednokrotne dla zespołu są dostępne wyłącznie w usłudze płatnej. Jeśli któraś z tych rzeczy jest dla Ciebie istotna, instalacja na własnym serwerze jej nie zastąpi.

Wymagania sprzętowe są skromne: dwa gigabajty pamięci i dwadzieścia gigabajtów dysku wystarczą na start, a rozmiar rośnie wraz z historią zdarzeń. Do uruchomienia potrzebujesz Dockera i domeny z certyfikatem.

Rachunek warto policzyć uczciwie. Serwer za kilka dolarów miesięcznie plus czas na aktualizacje i kopie zapasowe rzadko wychodzi taniej niż dziewięć dolarów za plan podstawowy. Własna instalacja opłaca się przy dużym ruchu albo przy wymogu, żeby dane fizycznie nie opuszczały Twojej infrastruktury.

FAQ - Najczęściej zadawane pytania

Czy Plausible naprawdę nie używa cookies?

Tak, Plausible nie używa żadnych cookies ani localStorage. Identyfikacja unikalnych wizyt opiera się na hashowaniu: IP + User Agent + domena + data. Hash jest tworzony na nowo każdego dnia, więc nie ma możliwości śledzenia użytkownika między dniami.

Czy muszę wyświetlać banner GDPR?

Nie, jeśli używasz tylko Plausible. Ponieważ Plausible nie zbiera danych osobowych i nie używa cookies, nie wymaga zgody użytkownika zgodnie z GDPR. Jednak jeśli używasz innych narzędzi wymagających zgody, banner i tak będzie potrzebny.

Jak Plausible radzi sobie z ad-blockerami?

Domyślny skrypt Plausible jest blokowany przez niektóre ad-blockery. Rozwiązania:

Proxy skryptu przez własny serwer
Użycie własnej subdomeny (analytics.twojadomena.pl)
Self-hosting całej instancji

Czy mogę używać Plausible na wielu domenach?

Tak, każda domena to osobna "strona" w dashboardzie. Możesz też agregować dane z wielu subdomen na jednym dashboardzie.

Jak długo Plausible przechowuje dane?

Plausible Cloud przechowuje dane bezterminowo - nie ma limitu retencji. W wersji self-hosted możesz skonfigurować własne zasady retencji.

Czy Plausible śledzi subdomeny?

Możesz skonfigurować Plausible do śledzenia:

Tylko głównej domeny
Wszystkich subdomen razem
Każdej subdomeny osobno

Code

HTML

<!-- Wszystkie subdomeny razem -->
<script data-domain="twojadomena.pl" src="..."></script>

<!-- Konkretna subdomena -->
<script data-domain="blog.twojadomena.pl" src="..."></script>

Jak zmigrować z Google Analytics?

Dodaj skrypt Plausible obok GA
Porównuj dane przez 2-4 tygodnie
Zdefiniuj cele odpowiadające eventom z GA
Usuń skrypt GA po weryfikacji

Plausible oferuje też import danych historycznych z Google Analytics.

Czy mogę używać Plausible do śledzenia aplikacji mobilnych?

To narzędzie jest przeznaczone głównie do stron. Do aplikacji mobilnych sensowniejsze będą rozwiązania nastawione na zdarzenia produktowe, na przykład PostHog. Zdarzenia z aplikacji można wysyłać przez API, ale sam interfejs jest pomyślany pod ruch na stronie.

Czym różni się wersja darmowa od chmury?

Wydanie społecznościowe nie jest równoważne usłudze płatnej. Brakuje w nim lejków, importu danych z Google Analytics i logowania jednokrotnego dla zespołu. To najczęstsze nieporozumienie na temat tego produktu.

Czego ta analityka Ci nie powie

Ta sekcja jest ważniejsza niż lista funkcji, bo decyduje o tym, czy narzędzie w ogóle pasuje do Twoich pytań.

Nie dowiesz się, co robił konkretny użytkownik. Brak identyfikatora trwałego oznacza brak ścieżki jednej osoby przez wiele dni. Jeśli Twoje pytanie brzmi „dlaczego ten klient porzucił koszyk", potrzebujesz narzędzia analizującego zachowanie produktowe, nie tej kategorii. Do diagnozowania błędów, które taki użytkownik napotkał, i tak sięgniesz po osobne narzędzie w rodzaju Sentry.

Nie zobaczysz też retencji ani kohort w rozumieniu, jakie ma analityka produktowa. Możesz sprawdzić, ilu odwiedzających wróciło, ale nie prześledzisz, jak zachowuje się grupa, która zarejestrowała się w danym tygodniu.

Trzecia rzecz to dokładność liczby odwiedzających. Rozpoznawanie oparte o skrót adresu i przeglądarki, odświeżany codziennie, oznacza, że ta sama osoba wchodząca w poniedziałek i we wtorek policzy się dwa razy. Przy porównywaniu z Google Analytics ta różnica bywa mylnie brana za błąd, a wynika wprost z rezygnacji z trwałego oznaczania.

Czwarta to blokowanie. Choć skrypt jest lekki i nieinwazyjny, część blokad reklam i tak go zatrzymuje, więc liczby będą zaniżone. Skala zależy od tego, kto Cię odwiedza: przy stronie technicznej straty bywają dwucyfrowe, przy stronie dla zwykłych użytkowników zwykle marginalne. Rozwiązaniem jest przekierowanie skryptu przez własną domenę, co jednak wymaga konfiguracji po stronie Next.js albo warstwy sieciowej.

Piąta, o której warto wiedzieć przy decyzji: nie ma tu analizy nagrywanych sesji ani map kliknięć. To świadomy wybór wynikający z podejścia do prywatności, a nie brak do nadrobienia w kolejnej wersji.

Kod źródłowy i wydania znajdziesz w repozytorium projektu, a aktualne plany na stronie cennika.