nextjs에서 netfunnel 구간제어 방법

netfunnel 트래픽 제어 공식문서

https://stclabsupport.zendesk.com/hc/ko/articles/27156400795801-WEB-%EC%97%90%EC%9D%B4%EC%A0%84%ED%8A%B8-API-%EC%97%B0%EB%8F%99%EC%9D%84-%ED%86%B5%ED%95%9C-%ED%8A%B8%EB%9E%98%ED%94%BD-%EC%A0%9C%EC%96%B4

 

설명전)

구간 제어는 주로 결제구간에다가 적용하는데 이유는 페이앱 결제하는 부분은 한구간이기 때문에 그 구간을 스크립트 영역 사이에 외부 침입을 막는다고 보시면 됩니다. 

 

기초 지식)

지금 제가 설명하는 부분은 netfunnel을 적용하는 방법이므로 최소한 nextjs component 및 page 적용은 하실 줄 아셔야합니다. 

 

세그먼트 생성전)

구간제어 세그먼트 생성할 때 시작은 NFStartSection를 적용하는 url을 넣으시면 되고 종료는 NFStopSection 적용한 url을 넣으시면 됩니다.  

 

1.  netfunnel>프로젝트>구간제어 들어가셔서 세그먼트를 생성합니다. 그리고 project key, 세그먼트 key를 확인합니다.

https://stclabsupport.zendesk.com/hc/ko/articles/20017065749273-%ED%99%94%EB%A9%B4-%EA%B5%AC%EC%84%B1

 

설명)

상단 이미지는 예시이고 project key는 좌측 상단 project name 밑에 있는 service_.. 이부분 project key이고 

세그먼트 key는 우측 하단에 세그먼트 키에 적혀있습니다. 

 

2. 결제 처음 시작되는 버튼을 클릭시 확보한 project key, segmentKey를 넣고 NFStartSection을 적용합니다. 그리고 진입에 허용된 유저일 경우 결제페이지 이동할 수 있는 창이 나올 수 있게 설정합니다. 

 

결제 시작 component

      NFStartSection(
        {
          projectKey: "(projectKey)",
          segmentKey: "(segmentKey)",
        },
        function (response) {
              const popup = window.open(
                ``,
                "티켓예매",
                "popup=yes"
              );
        }
      );

 

설명)

구간제어는 시작과 종료지점이 다른 url이여야하고 그 이벤트는 클릭 이벤트로 시작된다는 것을 주의하셔야합니다.

 

3. 결제가 종료되는 시점에 NFStopSection을 적용합니다. 

결제 종료 component

      NFStopSection(
        {
          projectKey: "(projectKey)",
          segmentKey: "(segmentKey)",
        },
        function (response) {
			// 성공적으로 NetFunnel 세션을 종료한 후 창을 닫음
        	top.window.close();
        }
      );

 

php 참고)

<script src="https://agent-lib.stclab.com/netfunnel-agent_latest.js"></script>

저는 결제 페이지는 php로 하다보니 결제 시작은 script로 진행할 수 있으나 결제 종료되는 부분은 php내부에 있었습니다. 이때는 php 스크립트 부분에 상단에 script설정하시고 그대로 NFStopSection을 적용하면 정상적으로 작동되는 것을 확인하실 수 있습니다.

 

정상 연결 확인)

정상적으로 연결이 되었으면 본인이 설정한 동시 접속자가 넘어갔을 경우에 허용된 사람 외에 다른 유저가 접속할려고 하면 하단에 이미지처럼 나올 것입니다. 그리고 결제 시작이 되었을 때 세그먼트가 변동이 되면 정상적으로 연결이 된 것입니다. 

기본제어 진입량 체크 원리)

NFStartSection을 할 때 진입 허용수 내에 해당되는 유저는 key를 받게 되고 진입량에 체크가 됩니다. 

NFStopSection을 거치게 되면 다시 key를 반납함으로써 key 갯수는 곧 진입 허용 수에 해당되고 반납을 해야지만 대기자수가 차감되어 그 다음 차례에 있는 유저가 접속이 가능합니다.