Works with everything you use

<!-- Add before closing </head> tag -->
<script
  src="https://cdn.yalitrack.com/v1/yt.min.js"
  data-project="YOUR_PROJECT_ID"
  defer
></script>

npm install @yalitrack/react

// app/layout.tsx (or _app.tsx)
import { YaliTrackProvider } from '@yalitrack/react';

export default function Layout({ children }) {
  return (
    <YaliTrackProvider projectId="YOUR_PROJECT_ID">
      {children}
    </YaliTrackProvider>
  );
}

// Any component
import { useYaliTrack } from '@yalitrack/react';

function CheckoutButton() {
  const { track } = useYaliTrack();
  return (
    <button onClick={() => track('checkout_started', {
      plan: 'pro', value: 39
    })}>
      Upgrade
    </button>
  );
}

npm install @yalitrack/vue

// main.ts
import { createApp } from 'vue';
import { YaliTrackPlugin } from '@yalitrack/vue';

const app = createApp(App);
app.use(YaliTrackPlugin, {
  projectId: 'YOUR_PROJECT_ID',
});
app.mount('#app');

// Any component
<script setup>
import { useYaliTrack } from '@yalitrack/vue';
const { track } = useYaliTrack();

function onPurchase() {
  track('purchase', { amount: 49.99 });
}
</script>

npm install @yalitrack/angular

// app.module.ts
import { YaliTrackModule } from '@yalitrack/angular';

@NgModule({
  imports: [
    YaliTrackModule.forRoot({
      projectId: 'YOUR_PROJECT_ID',
    }),
  ],
})
export class AppModule {}

// Any component
import { YaliTrackService } from '@yalitrack/angular';

@Component({ ... })
export class DashboardComponent {
  constructor(private yt: YaliTrackService) {}

  onAction() {
    this.yt.track('dashboard_action', {
      section: 'overview'
    });
  }
}

<script src="https://cdn.yalitrack.com/v1/yt.min.js"></script>
<script>
  yalitrack.init('YOUR_PROJECT_ID');

  // Auto-captures pageviews, clicks, scroll
  // Add custom events:
  yalitrack.track('signup_completed', {
    method: 'google',
    plan: 'free',
  });

  // Identify users:
  yalitrack.identify('user_123', {
    email: 'user@example.com',
    plan: 'pro',
  });
</script>

# Track an event
curl -X POST https://api.yalitrack.com/v1/events \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "event": "subscription_renewed",
    "user_id": "user_123",
    "properties": {
      "plan": "pro",
      "mrr": 39.00,
      "period": "monthly"
    },
    "timestamp": "2026-03-18T12:00:00Z"
  }'

# Python example
import requests

requests.post("https://api.yalitrack.com/v1/events", json={
    "event": "invoice_paid",
    "user_id": "user_123",
    "properties": {"amount": 99.00}
}, headers={"Authorization": "Bearer YOUR_API_KEY"})

<!-- Add to Appearance > Theme Editor > header.php -->
<!-- Or use a "Header Scripts" plugin -->

<script
  src="https://cdn.yalitrack.com/v1/yt.min.js"
  data-project="YOUR_PROJECT_ID"
  defer
></script>

<!-- WooCommerce purchase tracking (optional) -->
<?php if (is_order_received_page()): ?>
<script>
  yalitrack.track('purchase', {
    order_id: '<?php echo $order->get_id(); ?>',
    total: <?php echo $order->get_total(); ?>
  });
</script>
<?php endif; ?>

<!-- Add to Online Store > Themes > Edit code > theme.liquid -->
<!-- Paste before closing </head> tag -->

<script
  src="https://cdn.yalitrack.com/v1/yt.min.js"
  data-project="YOUR_PROJECT_ID"
  defer
></script>

<!-- Auto-tracks: pageviews, product views, add to cart -->

<!-- Optional: Track purchases on thank-you page -->
<!-- Add to Settings > Checkout > Additional scripts: -->
<script>
  yalitrack.track('purchase', {
    order_id: '{{ order.order_number }}',
    total: {{ total_price | money_without_currency }},
    items: {{ order.line_items.size }}
  });
</script>