メインコンテンツまでスキップ
バージョン: 4.6.1

クイックスタート

このクイックスタートガイドでNetFUNNEL 4 JavaScriptエージェントを5-10分以内に開始して実行してください。

このガイドでできること​

  • URLトリガー統合: コード変更なしで特定のURLに待合室を自動適用
  • コードベース統合: 正確なタイミングでボタン/APIレベルでトラフィック制御
方法の選択

どの統合方法を使用すべきか確信がありませんか? 統合方法概要を確認して、2つのアプローチを比較し、使用例に最も適した方法を見つけてください。

前提条件​

  • NetFUNNELコンソールアクセス
  • WebアプリケーションのHTMLファイル
  • HTML/JavaScriptの基本理解
練習プロジェクト利用可能

練習用の基本プロジェクトが必要ですか? NetFUNNEL統合の練習のために準備された**Webアプリケーション(バニラJavaScript MPA)**テンプレートを含むサンプルプロジェクトを確認してください。

ステップ1: 初期化コードの取得​

本番コードが必要

以下のコードは例に過ぎません。本番の場合はNetFUNNELコンソールの専用初期化コードを必ず使用してください。

実際の初期化コードを取得する方法:

  1. NetFUNNELコンソール → エージェント → クライアント側エージェント → JavaScriptに移動
  2. 2. インストール方法セクションから初期化コードをコピー

例の初期化コード:

<script
    src="https://agent-lib.stclab.com/agents/client/javascript/netfunnel-javascript-agent.js"
    data-nf-client-id="your-client-id"
></script>

ステップ2: 統合方法の選択​

オプションA: URLトリガー (5分)​

最適な用途: ランディングページ、プロモーション、全ページアクセスブロック

  1. スクリプト追加 HTML <head>に追加 (ステップ1から)
  2. セグメント作成 NetFUNNELコンソールで:
    • プロジェクト → セグメント → セグメント作成に移動
    • 基本コントロールを選択
    • 進入許容数を0に設定 (テスト用)
  3. トリガールール追加:
    • Validator: URL
    • Component: URL
    • Match: Equals
    • Value: 正確なページURL (例: https://example.com/)

結果: URLにアクセスするユーザーが待合室にリダイレクトされます。

オプションB: コードベース (10分)​

最適な用途: ボタンクリック、API呼び出し、精密制御

  1. スクリプト追加 HTML <head>に追加 (ステップ1から)
  2. セグメント作成 NetFUNNELコンソールで (オプションAと同じ)
  3. このコードを追加 ボタンクリックハンドラーに追加:
// ユーザーがボタンをクリックするとき
button.addEventListener('click', () => {
  if (typeof window.nfStart === 'function') {
    nfStart({
      projectKey: 'your_project_key',    // コンソールから取得
      segmentKey: 'your_segment_key'     // コンソールから取得
    }, function(response) {
      if (response.status === 'Success') {
        // ここに元のロジックを実行
        console.log('ユーザーが進行できます!');
      }
    });
  }
});
  1. 完了時にキー返却:
// 作業が完了した後
if (typeof window.nfStop === 'function') {
  nfStop({
    projectKey: 'your_project_key',
    segmentKey: 'your_segment_key'
  });
}

結果: ユーザーがボタンをクリックするとモーダル待合室が表示されます。

ステップ3: 動作確認​

  1. セグメントで進入許容数を0に設定 (待合室が表示される必要がある)
  2. 待合室が正しく表示されることを確認
  3. 進入許容数を1に設定 (即座に進入する必要がある)
  4. ネットワークタブでキー返却を確認 (ts.wseq?opcode=5004 HTTP 200)

ヘルプが必要ですか?​

  • トラブルシューティング: 一般的な問題および解決方法
  • ブラウザコンソールでNetFUNNELログを確認 (data-nf-print-log="true"を有効化)
  • プロジェクト/セグメントキーがコンソールと正確に一致することを確認