사용자들이 가장 먼저 접하게 되는 메인 페이지 폭주에 대한 제어를 위해 넷퍼넬 사용 환경에 맞춰 메인페이지 제어를 위한 연동 방법을 확인하세요.
메인페이지 제어 기술 개요
외부에서 메인 페이지로의 직접적인 접근이 아닌, NetFUNNEL 대기 페이지를 기존 메인 페이지 대신 적용하여 메인 페이지에 대한 진입량을 제어할 수 있습니다.
- 외부 → NetFUNNEL 대기 페이지 (index.html) → 기존 메인 페이지 (index_real.html)의 흐름으로 동작합니다.
적용 방법
- 기존의 메인 페이지였던 index.html 을 index_real.html로 변경하고, NetFUNNEL 대기 페이지로 이용할 HTML 파일을 index.html로 적용해 주세요.
- index.html 내 tag Code Snippet을 삽입하여 Agent를 설치해 주세요.
- Load 이벤트의 콜백 함수로 Surffy_Action API를 호출해 주세요.
- API 호출을 위해 WEB 에이전트 API 연동 문서를 확인해주세요.
메인페이지 부터 시작하는 구간 제어 기능을 활용하는 경우, End point의 html에도 Code Snippet을 삽입해야 합니다.
개발 가이드
Parameter
- url(string) *필수
- 트래픽 제어 대상이 되는 URL입니다. 넷퍼넬 콘솔에서 등록한 URL과 일치하는 경우 Surffy NetFUNNEL 서버에 진입을 요청하고, 그렇지 않으면 바로 이어서 두 번째 인자로 전달한 콜백 함수를 실행합니다.
- callback(function) *필수
- 아래의 적용 예시를 참고하여 기존 메인 페이지의 URL로 이동하는 코드를 작성해 주세요.
- Sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>List</title>
<script>
(function(w,d,s,uri,fn){
w[fn] = w[fn] || function(){ var c = {}; c.tenantApiUrl = arguments[0]; c.tenantNFUrl = arguments[1]; (w[fn].l = w[fn].l || []).push(c); };
var o = d.createElement(s); var p = d.getElementsByTagName(s)[0]; o.async = 1; o.charset = 'utf-8'; o.src = uri; p.parentNode.insertBefore(o,p);
})(window,document,'script','https://agent-lib.surffy-dev.io/surffy-agent_latest.js','nfTag');
nfTag('https://surffy-demo.surffy.io/nf-setting.json', 'https://surffy-demo.surffy.io');
window.addEventListener('load',
function() {
// eslint-disable-next-line no-undef
Surffy_Action('https://surffy.io/main', function() {
location.href = 'https://surffy.io/main';
})
}
);
</script>
</head>
<body>
...
에이전트 테스트
NetFUNNEL Web Agent가 잘 적용되었는지 확인하고 싶다면, 아래의 순서를 따라 진행해 주세요.
- 기본 제어 세그먼트의 진입 허용량을 '0'으로 설정
- 적용 방식(기본 동적 트래픽 제어/API 직접 호출/메인 페이지 제어)에 따라 웹 페이지 내 진입 요청
- 대기실이 화면에 뜨는지 확인 (VWR 확인)
- Surffy NetFUNNEL 콘솔 기본 제어 내 해당 세그먼트의 수치 변동이 있는지 확인 (EUM 확인)
댓글
댓글 0개
댓글을 남기려면 로그인하세요.