추적 스크립트

Blitz Rocket 추적 스크립트는 추천 방문, 가입, 구매를 자동으로 추적하기 위해 웹사이트에 추가하는 가벼운 JavaScript 코드입니다.

설치

다음 스크립트를 웹사이트에 추가하세요. YOUR_CAMPAIGN_ID를 Blitz Rocket 대시보드에서 실제 캠페인/콘테스트 ID로 교체하세요:

html

<script
  src="https://blitzrocket.com/referral-tracker.js?campaignId=YOUR_CAMPAIGN_ID&autoInject=stripe"
  async
></script>

autoInject=stripe 매개변수는 Stripe 결제 완료를 자동으로 캡처합니다. Stripe를 사용하지 않거나 구매 추적을 수동으로 하려면 이 부분을 제거하세요.

가입 추적

사용자가 사이트에서 회원가입을 완료할 때 RocketTracker.trackSignup()을 호출하세요:

javascript

// 사용자가 성공적으로 가입한 후
if (window.RocketTracker) {
  window.RocketTracker.trackSignup("newuser@example.com");
}

jsx

function SignupForm() {
  const handleSubmit = async (formData) => {
    const result = await registerUser(formData);

    if (result.success && window.RocketTracker) {
      window.RocketTracker.trackSignup(formData.email);
    }
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

vue

<script setup>
async function handleSignup(formData) {
  const result = await registerUser(formData);

  if (result.success && window.RocketTracker) {
    window.RocketTracker.trackSignup(formData.email);
  }
}
</script>

구매 추적

사용자가 구매를 완료할 때 RocketTracker.trackPurchase()를 호출하세요:

javascript

// 구매가 확인된 후
if (window.RocketTracker) {
  window.RocketTracker.trackPurchase(
    "order-12345",  // 주문 ID
    49.99,          // 금액
    "USD",          // 통화
    "buyer@example.com" // 이메일 (선택 사항)
  );
}

추천 및 제휴 코드 감지

추적 스크립트는 URL 매개변수에서 코드를 자동으로 감지하며, 어떤 매개변수가 사용되었는지에 따라 추천 프로그램과 제휴 프로그램을 구분합니다:

추천 프로그램: ?code=ABC123 또는 ?ref=ABC123
제휴 프로그램: ?aff=XYZ789 또는 ?fpr=XYZ789 (FirstPromoter 스타일)

각 프로그램은 별도의 쿠키 네임스페이스에 저장되어 한 사이트에서 추천 프로그램 및 제휴 프로그램을 동시에 운영할 수 있습니다:

추천 코드 → blitzrocket_referral_code 쿠키
제휴 코드 → blitzrocket_affiliate_code 쿠키

코드는 캠페인 내에서만 고유하기 때문에, 방문자가 처음 도착할 때 서버를 통해 코드가 속한 캠페인을 확인합니다. 감지된 코드는 이후 추적 호출에 포함됩니다.

한 도메인에서는 최대 하나의 활성 추천 프로그램과 하나의 활성 제휴 프로그램만 운영할 수 있습니다. 프로그램을 전환하려면 기존 프로그램을 먼저 비활성화하세요.

특정 프로그램 지정

서버 측 추적 시에는 해당 쿠키를 읽으세요. 두 프로그램을 모두 운영하는 사이트에서 JS 헬퍼를 사용할 때는 프로그램 유형을 명시적으로 전달하세요:

javascript

// 제휴 가입을 명확히 추적
window.RocketTracker.trackSignup("newuser@example.com", { type: "affiliate" });

// 제휴 구매를 명확히 추적
window.RocketTracker.trackPurchase("order-12345", 49.99, "USD", "buyer@example.com", { type: "affiliate" });

프레임워크 통합

Nuxt 3

Blitz Rocket은 내장 Nuxt 플러그인을 제공합니다. NUXT_PUBLIC_BLITZROCKET_CAMPAIGN_ID 환경 변수를 설정하면 스크립트가 자동으로 로드됩니다.

또한 제공되는 $blitzrocket 헬퍼를 사용할 수 있습니다:

vue

<script setup>
const { $blitzrocket } = useNuxtApp();

async function handleSignup(email) {
  await $blitzrocket.trackSignup(email);
}

async function handlePurchase(order) {
  await $blitzrocket.trackPurchase(
    order.id,
    order.total,
    order.currency,
    order.email
  );
}

const referralCode = $blitzrocket.getReferralCode();
</script>

Next.js

jsx

// app/layout.js
import Script from "next/script";

export default function RootLayout({ children }) {
  const campaignId = process.env.NEXT_PUBLIC_BLITZROCKET_CAMPAIGN_ID;

  return (
    <html>
      <head>
        <Script
          id="blitzrocket-tracker"
          src={`https://blitzrocket.com/referral-tracker.js?campaignId=${campaignId}&autoInject=stripe`}
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

일반 HTML

html

<!DOCTYPE html>
<html>
  <head>
    <script
      src="https://blitzrocket.com/referral-tracker.js?campaignId=YOUR_CAMPAIGN_ID&autoInject=stripe"
      async
    ></script>
  </head>
  <body>
    <!-- 페이지 내용 -->
  </body>
</html>

Google 태그 관리자

GTM → 태그 → 새 태그로 이동
사용자 정의 HTML 선택
다음을 붙여넣기:

html

<script
  src="https://blitzrocket.com/referral-tracker.js?campaignId=YOUR_CAMPAIGN_ID&autoInject=stripe"
  async
></script>

트리거를 모든 페이지로 설정
변경 사항을 게시하기