Skip to Content
Документация для разработчиковОтслеживание конверсийSalesПрямое отслеживание продаж

В этом руководстве мы сосредоточимся на отслеживании событий конверсий продаж без предварительного события лида. Это полезно, когда вы хотите атрибутировать продажу непосредственно клику, минуя этап отслеживания лида.

Когда использовать прямое отслеживание продаж

Прямое отслеживание продаж идеально подходит для сценариев, когда:

  • Вам не нужно отслеживать лиды отдельно (например, разовые покупки)
  • Вы хотите атрибутировать продажи непосредственно кликам без промежуточных шагов
  • Вы отслеживаете продажи для пользователей, которые не зарегистрировались и не создали аккаунт
📝

If you’re tracking both leads and sales in your conversion funnel, refer to our server-side tracking or client-side tracking guides instead.

⚠️

Lead commission rewards will not be created when using direct sale tracking.

Предварительные требования

Отслеживание прямых конверсий продаж

Для отслеживания прямой продажи необходимо передать параметр clickId вместе с информацией о клиенте при отслеживании события продажи. clickId можно прочитать из cookie dub_id, который автоматически устанавливается, когда пользователь переходит по вашей ссылке Revroute.

Отслеживание прямых продаж из URL query-параметров

Если вы перенаправляете пользователей на страницу подтверждения после успешной покупки, вы можете отслеживать прямые продажи, считывая query-параметры из URL и cookie dub_id.

import { useAnalytics } from "@dub/analytics/react";
import { useEffect } from "react";
 
// Helper function to read cookie
function getCookie(name: string) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop()?.split(";").shift();
}
 
export function OrderConfirmationPage() {
  const { trackSale } = useAnalytics();
 
  useEffect(() => {
    // Get query parameters from URL
    const params = new URLSearchParams(window.location.search);
    const customerId = params.get("customer_id");
    const amount = params.get("amount");
    const invoiceId = params.get("invoice_id");
 
    // Get click ID from cookie
    const clickId = getCookie("dub_id");
 
    if (customerId && amount && clickId) {
      // Track the direct sale event
      trackSale({
        eventName: "Purchase",
        customerExternalId: customerId,
        amount: parseInt(amount), // Amount in cents
        invoiceId: invoiceId || undefined,
 
        // Required for direct sale tracking:
        clickId: clickId,
        customerName: "John Doe", // Optional: customer name
        customerEmail: "john@example.com", // Optional: customer email
        customerAvatar: "https://example.com/avatar.jpg", // Optional: avatar URL
      });
    }
  }, [trackSale]);
 
  return <div>Thank you for your purchase!</div>;
}

Отслеживание прямых продаж из отправок форм

Вы также можете отслеживать прямые продажи, когда пользователи заполняют форму оплаты на вашем сайте.

import { useAnalytics } from "@dub/analytics/react";
import { useState } from "react";
 
// Helper function to read cookie
function getCookie(name: string) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop()?.split(";").shift();
}
 
export function CheckoutForm() {
  const { trackSale } = useAnalytics();
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
 
    // Get click ID from cookie
    const clickId = getCookie("dub_id");
 
    if (clickId) {
      // Track the direct sale event
      trackSale({
        eventName: "Purchase",
        customerExternalId: "cus_RBfbD57H",
        amount: 5000, // $50.00
        invoiceId: "in_1MtHbELkdIwH",
 
        // Required for direct sale tracking:
        clickId: clickId,
        customerName: "John Doe",
        customerEmail: "john@example.com",
        customerAvatar: "https://example.com/avatar.jpg",
      });
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      ...
      <button type="submit">Complete Purchase</button>
    </form>
  );
}

Серверное прямое отслеживание продаж

Вы также можете отслеживать прямые продажи с вашего бэкенда, передавая параметр clickId при вызове API отслеживания продаж:

import { Revroute } from "dub";
 
const dub = new Revroute();
 
await dub.track.sale({
  customerExternalId: "cus_RBfbD57HDzPKpduI8elr5qHA",
  amount: 5000,
  paymentProcessor: "stripe",
  eventName: "Purchase",
  invoiceId: "in_1MtHbELkdIwH",
  currency: "usd",
 
  // Required for direct sale tracking:
  clickId: "cm3w...", // Pass the click ID from your frontend
  customerName: "John Doe",
  customerEmail: "john@example.com",
  customerAvatar: "https://example.com/avatar.jpg",
});
📝

Когда отслеживать продажу: Отслеживайте события продаж только после того, как пользователь успешно завершит покупку или действие, связанное с оплатой. Убедитесь, что событие срабатывает только после подтверждения бэкендом успешности платежа.

Просмотр конверсий

Вот и всё — всё готово! Теперь вы можете расслабиться и наблюдать за ростом дохода от конверсий. Мы предоставляем 3 различных представления для анализа конверсий:

Last updated on
SupabaseОтслеживание возвратов