Skip to main content

JavaScript 넷퍼넬 대기실 미사용

이 문서는 NetFUNNEL JavaScript 에이전트에서 넷퍼넬 대기실을 사용하지 않고, 자체 커스텀 대기실을 적용하기 위한 최소한의 예제를 제공합니다.

info

넷퍼넬 대기실 미사용 기능은 코드 기반 적용 시 사용할 수 있습니다.

1. Continue 콜백

use-netfunnel-template을 false로 설정하면 대기실이 발생하지 않고 아래 표의 값들을 반환합니다. 커스텀 대기실에서 aheadWait, behindWait, waitTime, progressRate를 활용할 수 있습니다.

parametertype설명예시
statusString

대기 상태에 대한 상태값

Continue
statusCodeNumber

대기 상태에 대한 상태 코드

201
messageString

대기 상태에 대한 메시지

Waiting Continue
aheadWaitString

내 앞 대기자 수

0
behindWaitString

내 뒤 대기자 수

0
waitTimeString

예상 대기 시간

00:00:00
progressRateString

진행률 (%)

0
warning

자체 커스텀 대기실 사용 시, 기본 대기 외 기능 사용에 제한이 있습니다. 따라서 넷퍼넬 대기실을 사용하는 use-netfunnel-template=true 설정을 권장합니다.

2. 자체 커스텀 대기실 적용

2.1 초기화 코드 설정

자체 구현한 대기실을 사용하려면, use-netfunnel-template=false로 설정합니다.

<html>
  <head>
    <script src="{AGENT_URL}" data-nf-use-netfunnel-template="false" nf-data-client-id="{CLIENT_ID}"></script>
  </head>
</html>

2.2 HTML에 커스텀 대기실 추가

HTML에 모달 구조의 커스텀 대기실을 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <script src="{AGENT_URL}" data-nf-use-netfunnel-template="false" nf-data-client-id="{CLIENT_ID}"></script>
    <style>
      #waitingModal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index: 9999;
      }

      .modal-content {
        background: white;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        max-width: 400px;
        width: 90%;
      }

      .progress-container {
        width: 100%;
        height: 20px;
        background-color: #f0f0f0;
        border-radius: 10px;
        margin: 10px 0;
        overflow: hidden;
      }

      #progress-bar {
        height: 100%;
        background-color: #4caf50;
        border-radius: 10px;
        transition: width 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <!-- Custom Waiting Room Modal -->
    <div id="waitingModal">
      <div class="modal-content">
        <h3>{t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection2.modal.title')}</h3>
        <div id="ahead-wait">{t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection2.modal.aheadWait')}</div>
        <div id="behind-wait">{t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection2.modal.behindWait')}</div>
        <div id="wait-time">{t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection2.modal.waitTime')}</div>

        <div class="progress-container">
          <div id="progress-bar" style={{ width: '0%' }}>0%</div>
        </div>

        <button onClick={hideWaitingModal}>{t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection2.modal.cancelButton')}</button>
      </div>
    </div>

    <!-- Page Content -->
    <div>
      <h1>{t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection2.page.title')}</h1>
      <button onClick={startNetFunnel}>{t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection2.page.startButton')}</button>
    </div>
  </body>
</html>

2.3 콜백 함수 및 커스텀 대기실 설정

콜백 함수를 정의하고 status에 따라서 대기실을 조작합니다.

let isShowWaitingModal = false;

function startNetFunnel() {
  nfStart(
    {
      projectKey: '{PROJECT_KEY}',
      segmentKey: '{SEGMENT_KEY}',
    },
    function (response) {
      nfCallback(response);
    }
  );
}

function nfCallback(response) {
  const { status, statusCode, message } = response;

  switch (status) {
    case 'Success':
      // Waiting completed - Return key, remove waiting room, and enter service
      hideWaitingModal();
      alert(t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection3.alert.success'));
      break;

    case 'Continue':
      // Waiting in progress - Show and update waiting room
      if (!isShowWaitingModal) showWaitingModal();
      updateWaitingModal(response);
      break;

    case 'Close':
      // Cancel waiting - Remove waiting room
      hideWaitingModal();
      break;

    case 'Error':
      // Handle error
      hideWaitingModal();
      alert(t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection3.alert.error') + message);
      break;

    case 'NetworkError':
      // Handle network error
      hideWaitingModal();
      alert(t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection3.alert.networkError') + message);
      break;
  }
}

function showWaitingModal() {
  if (isShowWaitingModal) return;

  const waitingModalEl = document.getElementById('waitingModal');
  waitingModalEl.style.display = 'flex';
  isShowWaitingModal = true;
}

function updateWaitingModal(response) {
  const { aheadWait, behindWait, waitTime, progressRate } = response;
  const aheadWaitEl = document.getElementById('ahead-wait');
  const behindWaitEl = document.getElementById('behind-wait');
  const waitTimeEl = document.getElementById('wait-time');
  const progressBarEl = document.getElementById('progress-bar');

  aheadWaitEl.textContent = t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection2.modal.aheadWait') + aheadWait;
  behindWaitEl.textContent = t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection2.modal.behindWait') + behindWait;
  waitTimeEl.textContent = t('docs.javascript.advancedFeatures.useCustomVwr.section2.subSection2.modal.waitTime') + waitTime;
  progressBarEl.style.width = progressRate + '%';
  progressBarEl.textContent = progressRate + '%';
}

function hideWaitingModal() {
  const nfStopParams = {
    projectKey: '{PROJECT_KEY}',
    segmentKey: '{SEGMENT_KEY}',
  };
  nfStop(nfStopParams);

  const waitingModalEl = document.getElementById('waitingModal');
  waitingModalEl.style.display = 'none';
  isShowWaitingModal = false;
}

3. 주요 기능 설명

3.1 대기실 표시/숨김 관리

    3.2 대기 정보 업데이트

    updateWaitingModal 함수에서 Continue 콜백으로 받은 대기 정보를 화면에 반영합니다:

    • aheadWait: 내 앞의 대기자 수

    • behindWait: 내 뒤의 대기자 수

    • waitTime: 예상 대기 시간

    • progressRate: 진행률 (%)

    warning
    자체 커스텀 대기실 사용 시 다음 기능들에 제한이 있습니다.
    • 넷퍼넬 기본 대기실의 고급 기능들
    • 사전/사후 대기실
    • 기본 제공되는 사용자 경험 최적화 기능들