ユーザーが最初に接するメインページの暴走をコントロールするために、NetFUNNELの使用環境に合わせてメインページコントロールのための連動方法を確認してください。
トップページ コントロール技術概要
外部からメインページへの直接アクセスではなく、NetFUNNEL待機ページを既存のメインページの代わりに適用して、メインページへのアクセス量をコントロールすることができます。
基本的コントロールも区間コントロールも、同じように先行工事が必要だ。
- 外部 → NetFUNNEL待機ページ(index.html) → 既存のメインページ(index_real.html)の流れで動作します。
適用方法
- 既存のメインページだった index.html を index_real.html に変更し、NetFUNNELの待機ページとして利用する HTML ファイルを index.html に適用してください。
- index.html 内の tag Code Snippetを挿入してエージェントをインストールしてください。
- Loadイベントのコールバック関数でNFStartを呼び出してください。
- ウェブエージェントAPI統合によるトラフィックを制御参照してください。
- (オプション)実ページのURLがlocalStorage、sessionStorage、またはクッキーを使って公開されている場合に、悪意のある直接アクセスを防ぐために、待機ページ(index.html)から入った後にのみ実ページ(index_real.html)を利用できるようにする方法を追加することができます。
Sample code
<!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 waiting page</title>
<script>
// NetFUNNEL script settings
(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', '{Agent library request address}', 'nfTag');
nfTag('{tenant information request URL}', '{NetFUNNEL server request URL}');
// Start waiting while page loads
window.addEventListener('load', function() {
NFStart({
projectKey: 'service_1',
segmentKey: 'segKey_1'
}, function(response) {
localStorage.setItem('passedThroughWaiting', 'true'); // Mark as passed the waiting page
location.href = 'index_real.html'; // Navigate to the real main page
});
});
</script>
</head>
<body>
<h1>Waiting page</h1>
<!-- Contents -->
</body>
</html>
- 既存のメインページ : index_real.html
このコードにより、実際のメインページ(index_real.html)には、待機ページ(index.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>Actual main page</title>
<script>
// Check if the page loaded through a waiting page
window.addEventListener('load', function() {
var passedThroughWaiting = localStorage.getItem('passedThroughWaiting');
if (!passedThroughWaiting) {
location.href = 'index.html'; // Redirect to the waiting page if you didn't go through the waiting page
} else {
localStorage.removeItem('passedThroughWaiting'); // Delete the flag
}
});
</script>
</head>
<body>
<h1>Actual main page</h1>
<!-- Contents -->
</body>
</html>
コメント
0件のコメント
記事コメントは受け付けていません。