본문으로 건너뛰기
버전: 4.6.1

빠른 시작

이 빠른 시작 가이드로 NetFUNNEL 4 JavaScript 에이전트를 5-10분 안에 시작하고 실행하세요.

이 가이드로 할 수 있는 것​

  • URL 트리거 통합: 코드 변경 없이 특정 URL에 대기실 자동 적용
  • 코드 기반 통합: 정확한 타이밍으로 버튼/API 수준에서 트래픽 제어
방법 선택

어떤 통합 방법을 사용해야 할지 확실하지 않나요? 통합 방법 개요를 확인하여 두 접근 방식을 비교하고 사용 사례에 가장 적합한 방법을 찾아보세요.

사전 요구 사항​

  • NetFUNNEL 콘솔 액세스
  • 웹 애플리케이션의 HTML 파일
  • HTML/JavaScript 기본 이해
연습 프로젝트 사용 가능

연습할 기본 프로젝트가 필요하신가요? NetFUNNEL 통합 연습을 위해 준비된 웹 애플리케이션(바닐라 JavaScript MPA) 템플릿을 포함한 샘플 프로젝트를 확인하세요.

1단계: 초기화 코드 가져오기​

프로덕션 코드 필요

아래 코드는 예제일 뿐입니다. 프로덕션의 경우 NetFUNNEL 콘솔의 전용 초기화 코드를 반드시 사용해야 합니다.

실제 초기화 코드를 가져오는 방법:

  1. NetFUNNEL 콘솔 → 에이전트 → 클라이언트 측 에이전트 → JavaScript로 이동
  2. 2. 설치 방법 섹션에서 초기화 코드 복사

예제 초기화 코드:

<script
    src="https://agent-lib.stclab.com/agents/client/javascript/netfunnel-javascript-agent.js"
    data-nf-client-id="your-client-id"
></script>

2단계: 통합 방법 선택​

옵션 A: URL 트리거 (5분)​

최적 용도: 랜딩 페이지, 프로모션, 전체 페이지 액세스 차단

  1. 스크립트 추가 HTML <head>에 추가 (1단계에서)
  2. 세그먼트 생성 NetFUNNEL 콘솔에서:
    • 프로젝트 → 세그먼트 → 세그먼트 생성으로 이동
    • 기본 제어 선택
    • 진입 허용 수를 0으로 설정 (테스트용)
  3. 트리거 규칙 추가:
    • Validator: URL
    • Component: URL
    • Match: Equals
    • Value: 정확한 페이지 URL (예: https://example.com/)

결과: URL에 액세스하는 사용자가 대기실로 리디렉션됩니다.

옵션 B: 코드 기반 (10분)​

최적 용도: 버튼 클릭, API 호출, 정밀 제어

  1. 스크립트 추가 HTML <head>에 추가 (1단계에서)
  2. 세그먼트 생성 NetFUNNEL 콘솔에서 (옵션 A와 동일)
  3. 이 코드 추가 버튼 클릭 핸들러에 추가:
// 사용자가 버튼을 클릭할 때
button.addEventListener('click', () => {
  if (typeof window.nfStart === 'function') {
    nfStart({
      projectKey: 'your_project_key',    // 콘솔에서 가져옴
      segmentKey: 'your_segment_key'     // 콘솔에서 가져옴
    }, function(response) {
      if (response.status === 'Success') {
        // 여기에 원래 로직 실행
        console.log('사용자가 진행할 수 있습니다!');
      }
    });
  }
});
  1. 완료 시 키 반환:
// 작업이 완료된 후
if (typeof window.nfStop === 'function') {
  nfStop({
    projectKey: 'your_project_key',
    segmentKey: 'your_segment_key'
  });
}

결과: 사용자가 버튼을 클릭하면 모달 대기실이 나타납니다.

3단계: 작동 확인​

  1. 세그먼트에서 진입 허용 수를 0으로 설정 (대기실이 나타나야 함)
  2. 대기실이 올바르게 표시되는지 확인
  3. 진입 허용 수를 1로 설정 (즉시 진입해야 함)
  4. 네트워크 탭에서 키 반환 확인 (ts.wseq?opcode=5004 HTTP 200)

도움이 필요하신가요?​

  • 문제 해결: 일반적인 문제 및 해결 방법
  • 브라우저 콘솔에서 NetFUNNEL 로그 확인 (data-nf-print-log="true" 활성화)
  • 프로젝트/세그먼트 키가 콘솔과 정확히 일치하는지 확인