웹 SDK로 GA 없이 퍼널 추적하기 — JavaScript 한 줄로 전환 분석 시작

GA로는 볼 수 없는 것들

Google Analytics는 훌륭합니다. 하지만 단축 URL 캠페인과 앱 딥링크를 함께 운영한다면, GA만으로는 아래 질문에 답하기 어렵습니다.

• 인스타그램 광고에서 내 단축 URL을 클릭한 사람 중 실제로 구매한 사람은 몇 %?
• 웹에서 클릭 → 앱 설치 → 앱 내 구매까지, 전체 전환율은?
• 퍼널의 어느 단계에서 몇 명이 이탈했나?
• 단축 URL 별로 전환 금액이 얼마나 발생했나?

FINGERPUSH.LINK 웹 SDK는 단축 URL 클릭 이후의 사용자 행동을 퍼널 형태로 추적합니다. GA와 병행 사용하거나, 단독으로도 전환 분석이 가능합니다.

설치 방법 — 스크립트 2줄

<!-- </body> 바로 앞에 삽입 -->
<script src="https://fplink.net/sdk/v1/fplink-tracker.js"></script>
<script>
  var tracker = new FPLinkTracker({
    baseUrl: 'https://fplink.net',
    appId: YOUR_APP_ID,      // 콘솔 → 앱 관리에서 확인
    apiKey: 'YOUR_API_KEY',  // 콘솔 → 앱 관리 → API 키에서 확인
    autoInit: true
  });
</script>

YOUR_APP_ID와 YOUR_API_KEY는 FINGERPUSH.LINK 콘솔 → 앱 관리 → API 키 버튼에서 확인할 수 있습니다.

이것만으로 자동 수집되는 것들

스크립트를 삽입하는 순간부터 추가 코드 없이 자동으로 수집됩니다.

전환 이벤트 수동 추가 — 3줄이면 충분

자동 수집 외에, 중요한 행동(회원가입 완료, 장바구니 추가, 구매 완료)은 직접 이벤트를 보내야 합니다.

HTML 속성만으로 추가하기 (JS 코드 불필요)

버튼이나 링크에 data-fplink-event 속성만 추가하면 클릭 시 자동으로 이벤트가 전송됩니다.

data-fplink-event 값은 이벤트를 구별할 수 있는 고유한 이름으로 설정하세요.

<!-- ❌ 피해야 할 방식 — 여러 버튼이 같은 이름이면 구별 불가 -->
<button data-fplink-event="click">장바구니 담기</button>
<button data-fplink-event="click">구매하기</button>

<!-- ✅ 권장: 액션별 고유한 이름 사용 -->
<button data-fplink-event="add_to_cart">장바구니 담기</button>
<button data-fplink-event="proceed_to_checkout">구매하기</button>

같은 이름을 여러 곳에 써야 한다면 data-fplink-id로 각 요소를 구별할 수 있습니다.
SDK가 elementId, elementText를 자동으로 이벤트 데이터에 포함하여 대시보드에서 어느 버튼인지 확인 가능합니다.

<!-- 여러 상품에 동일한 이벤트명 → data-fplink-id로 구별 -->
<button data-fplink-event="add_to_cart"
        data-fplink-id="sneakers-2025">
  장바구니 담기
</button>
<button data-fplink-event="add_to_cart"
        data-fplink-id="boots-2025">
  장바구니 담기
</button>

<!-- 추가 데이터를 함께 보내려면 data-fplink-props 사용 -->
<button
  data-fplink-event="add_to_cart"
  data-fplink-id="sneakers-2025"
  data-fplink-props='{"productId":"SNEAKERS-2025","price":89000}'>
  장바구니 담기
</button>

JS를 직접 수정할 수 없는 환경(퍼블리셔가 HTML만 수정 가능한 경우 등)에서 특히 유용합니다.

JavaScript로 직접 추가하기

JS 코드에서 직접 호출하는 방식도 동일하게 동작합니다.

회원가입 완료 시

// 회원가입 완료 콜백에 추가
tracker.trackSignup();

// 또는 userId를 CRM 연동에 활용하는 경우
await tracker.linkUser(user.id);  // 세션에 사용자 ID 연결
tracker.trackSignup();

장바구니 담기

tracker.trackEvent('add_to_cart', {
  productId: 'SNEAKERS-2025',
  price: 89000
});

구매 완료 (가장 중요)

// 결제 완료 페이지에 추가
tracker.trackPurchase(89000, 'KRW', {
  transactionId: order.id  // 중복 구매 방지용
});

// 또는 trackGoal로 직접 호출
tracker.trackGoal('purchase', 89000, 'KRW', {
  transactionId: order.id
});

React·Vue SPA에서도 되나요?

됩니다. SPA는 페이지를 새로 로드하지 않기 때문에, 페이지 전환 시 수동으로 trackEvent를 호출해야 합니다.

React Router 예시

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    // 라우터 이동 시 페이지뷰 이벤트 수동 전송
    if (window.tracker) {
      window.tracker.trackEvent('page_view', {
        url: window.location.href,
        title: document.title
      });
    }
  }, [location]);

  return <Router />;
}

SDK 초기화 시 autoInit: true로 설정하면 최초 페이지 진입 시 자동으로 page_view 이벤트가 전송됩니다. 이후 SPA 라우터 이동 시에는 위와 같이 수동 호출이 필요합니다.

대시보드에서 이렇게 보입니다

▲ 채널별 전환율을 한눈에 비교

이메일 채널이 인스타그램보다 전환율이 높다는 것을 즉시 확인할 수 있습니다. 다음 캠페인 예산을 어디에 집중할지 데이터가 말해줍니다.

GA와 함께 쓰는 것도 가능합니다

FINGERPUSH.LINK 웹 SDK는 GA를 대체하는 것이 아닙니다. 단축 URL 클릭 ↔ 사이트 전환을 연결하는 브릿지 역할입니다.

GA는 계속 쓰되, 단축 URL 캠페인의 실제 매출 기여도는 FINGERPUSH.LINK에서 확인하는 방식으로 병행 운영이 가능합니다.

요약 — 웹 SDK 도입 체크리스트

•  콘솔에서 웹 앱 생성 → App ID · API Key 복사
•  </body> 앞에 SDK 스크립트 및 초기화 코드 삽입
•  구매 완료 페이지에 tracker.trackPurchase() 추가
•  회원가입·장바구니 등 주요 이벤트에 tracker.trackEvent() 추가
•  (SPA의 경우) 라우터 이동 시 tracker.trackEvent('page_view', ...) 수동 호출 추가
•  대시보드에서 채널별 전환율 확인