{% extends 'base.html' %}


{% block extra_head %}
{% include "includes/social.html" %}
{% endblock %}


{% block extra_css %}
<link href="{{ vite_asset('static_src/pages/index.js', 'css') }}" rel="stylesheet">
{% endblock %}


{% block breadcrumbs %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb mb-0">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
  </ol>
</nav>
{% endblock %}


{% block main %}
<div class="container my-5">
  <div class="row">
    <div class="col-lg-8 offset-lg-2">
      <div class="section-label mb-2">collector · recipes</div>
      <h1 class="fw-bolder text-white" style="letter-spacing: -0.01em;">{{ page.title }}</h1>
      <p class="docs-lead">
        All events are sent as JSON to a single <code>POST /collect/</code>
        endpoint. The site tag pushes page_view, click, scroll, and page_leave
        automatically — everything else is a one-liner on
        <code>collectorQueue</code>, or a raw HTTP call from any language.
      </p>
    </div>
  </div>

  <div class="row mt-4">
    <div class="col-lg-8 offset-lg-2">
      <div class="accordion docs-accordion" id="docsAccordion">

        <div class="accordion-item">
          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collect custom clicks
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#docsAccordion">
            <div class="accordion-body">
              <p>Attach a handler to any interactive element. The event name is
                whatever you want to measure later.</p>
              <textarea class="codebox" rows="3" readonly>onclick="collectorQueue.push({event: 'signup_cta_click'})"</textarea>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collect custom page views
            </button>
          </h2>
          <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#docsAccordion">
            <div class="accordion-body">
              <p>Use this for SPA route changes, funnel checkpoints
                ("invoice paid"), or any meaningful page-level moment. Push
                once per visit:</p>
              <textarea class="codebox" rows="3" readonly><script>collectorQueue.push({event: 'checkout_success'});</script></textarea>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Attach custom data to any event
            </button>
          </h2>
          <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#docsAccordion">
            <div class="accordion-body">
              <p>Every event is stored as JSON in an <code>extra</code>
                column. Add whatever keys you need, no migration required,
                query with SQLite JSON1
                <code>json_extract(extra, '$.user_segment')</code> later.</p>
              <textarea class="codebox" rows="3" readonly><script>collectorQueue.push({event: 'admin_page_view', data: {user_segment: 'admins'}});</script></textarea>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="headingFour">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
              Send events over raw HTTP
            </button>
          </h2>
          <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#docsAccordion">
            <div class="accordion-body">
              <p>The collector endpoint is plain JSON — any HTTP client
                will do. Include a valid <code>collector_id</code>,
                <code>event</code>, and optional <code>data</code>.</p>
              <textarea class="codebox" rows="4" readonly>curl -X POST -H 'Content-Type: application/json' \
  -d '{"collector_id": "PROPERTY_COLLECTOR_ID", "event": "custom_app_event", "data": {"app_id": 4}}' \
  YOUR_COLLECTOR_SERVER/collect/</textarea>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="headingFive">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
              Server-side events (Python)
            </button>
          </h2>
          <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#docsAccordion">
            <div class="accordion-body">
              <p>Any backend, any library, any runtime. Here's a Python
                example using <code>requests</code>:</p>
              <textarea class="codebox" rows="5" readonly>import requests

requests.post(
    'YOUR_COLLECTOR_SERVER/collect/',
    json={'collector_id': 'PROPERTY_COLLECTOR_ID',
          'event': 'subscription_renewed',
          'data': {'plan': 'pro', 'mrr': 49}}
)</textarea>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
{% endblock %}