사용자들이 가장 먼저 접하게 되는 메인 페이지 폭주에 대한 제어를 위해 넷퍼넬 사용 환경에 맞춰 메인페이지 제어를 위한 연동 방법을 확인하세요.
메인페이지 제어 기술 개요
외부에서 메인 페이지로의 직접적인 접근이 아닌, NetFUNNEL 대기 페이지를 기존 메인 페이지 대신 적용하여 메인 페이지에 대한 진입량을 제어할 수 있습니다.
기본 / 구간 제어 모두 동일한 내용의 사전 작업이 필요합니다.
- 동작 흐름 : 외부 → NetFUNNEL 대기 페이지 (index.html) → 기존 메인 페이지 (index_real.html)
적용 방법
-
기존의 메인 페이지였던 index.html 을 index_real.html로 변경하고, NetFUNNEL 대기 페이지로 이용할 HTML 파일을 index.html로 적용해주세요.
-
index.html 내 tag Code Snippet을 삽입하여 Agent를 설치해주세요.
-
load 이벤트의 콜백 함수로 NFStart API를 호출해주세요.
-
callback(function) - 필수
- localStorage 또는 sessionStorage 또는 Cookie를 사용하여 실제 페이지의 URL이 노출 되었을 때 악의적으로 직접 접근하는 행위를 막기 위해 대기 페이지(index.html)을 거쳐서 진입했을 때만 실제 페이지(index_real.html)을 사용할 수 있도록 추가하는 방식을 사용할 수 있습니다.
Sample code
- 대기 페이지 : index.html
<!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>NetFUNNEL 대기 페이지</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', '{에이전트 라이브러리 요청 주소}', 'nfTag');
nfTag('{테넌트 정보 요청 URL}', '{넷퍼넬 서버 요청 URL}');
// 페이지 로드 시 대기 시작
window.addEventListener('load', function() {
NFStart({
projectKey: 'service_1',
segmentKey: 'segKey_1'
}, function(response) {
localStorage.setItem('passedThroughWaiting', 'true'); // 대기 페이지를 거친 것으로 표시
location.href = 'index_real.html'; // 실제 메인 페이지로 이동
});
});
</script>
</head>
<body>
<h1>대기 페이지</h1>
<!-- 대기 페이지 내용 -->
</body>
</html>
- 실제 페이지 : index_real.html
이 코드는 대기 페이지(index.html)를 통해서만 실제 메인 페이지(index_real.html)에 접근할 수 있도록 강제합니다. 사용자가 대기 페이지를 거치지 않고 직접 index_real.html에 접근하려 할 경우, 자동으로 대기 페이지로 리디렉션됩니다.
<!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>실제 메인 페이지</title>
<script>
// 페이지 로드 시 대기 페이지를 거쳐왔는지 체크
window.addEventListener('load', function() {
var passedThroughWaiting = localStorage.getItem('passedThroughWaiting');
if (!passedThroughWaiting) {
location.href = 'index.html'; // 대기 페이지를 거치지 않았다면 대기 페이지로 리디렉션
} else {
localStorage.removeItem('passedThroughWaiting'); // 플래그 삭제
}
});
</script>
</head>
<body>
<h1>실제 메인 페이지</h1>
<!-- 실제 메인 페이지 내용 -->
</body>
</html>
댓글
댓글 0개
이 문서에는 댓글을 달 수 없습니다.