Spaces:

seawolf2357
/

ev-cook-siteurl

Running

App Files Files Community

seawolf2357 commited on Jun 29

Commit

f0f6fd0

verified ·

1 Parent(s): 7a25048

Update index.html

Browse files

Files changed (1) hide show

index.html +257 -677

index.html CHANGED Viewed

@@ -1,696 +1,276 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>EV Cook Site - 방문자 추적 활성화</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
-            min-height: 100vh;
-            color: #333;
-        }
-        .header {
-            background: rgba(255, 255, 255, 0.95);
-            padding: 20px 0;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        }
-        .header-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .logo {
-            font-size: 28px;
-            font-weight: bold;
-            color: #1e3c72;
-        }
-        .nav {
-            display: flex;
-            gap: 30px;
-        }
-        .nav a {
-            color: #333;
-            text-decoration: none;
-            font-weight: 500;
-            transition: color 0.3s;
-        }
-        .nav a:hover {
-            color: #1e3c72;
-        }
-        .main-container {
-            max-width: 1200px;
-            margin: 50px auto;
-            padding: 0 20px;
-        }
-        .hero-section {
-            background: white;
-            border-radius: 20px;
-            padding: 60px;
-            text-align: center;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
-            margin-bottom: 40px;
-        }
-        .hero-section h1 {
-            font-size: 48px;
-            color: #1e3c72;
-            margin-bottom: 20px;
-        }
-        .hero-section p {
-            font-size: 20px;
-            color: #666;
-            margin-bottom: 30px;
-        }
-        .tracking-status {
-            background: #e8f5e9;
-            border: 2px solid #4caf50;
-            border-radius: 10px;
-            padding: 20px;
-            margin: 20px 0;
-        }
-        .tracking-status h3 {
-            color: #2e7d32;
-            margin-bottom: 10px;
-        }
-        .info-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 20px;
-            margin-top: 40px;
-        }
-        .info-card {
-            background: white;
-            padding: 30px;
-            border-radius: 15px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-            transition: transform 0.3s;
-        }
-        .info-card:hover {
-            transform: translateY(-5px);
-        }
-        .info-card h3 {
-            color: #1e3c72;
-            margin-bottom: 15px;
-            font-size: 24px;
-        }
-        .info-card p {
-            color: #666;
-            line-height: 1.6;
-        }
-        .status-indicator {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            background: #f5f5f5;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-size: 14px;
-        }
-        .status-indicator.active {
-            background: #e8f5e9;
-            color: #2e7d32;
-        }
-        .status-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: #4caf50;
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse {
-            0% {
-                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
-            }
-            70% {
-                box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
-            }
-            100% {
-                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
             }
-        }
-        .tracking-details {
-            background: #f8f9fa;
-            padding: 20px;
-            border-radius: 10px;
-            margin-top: 20px;
-            font-family: monospace;
-            font-size: 14px;
-        }
-        .tracking-details .row {
-            display: flex;
-            justify-content: space-between;
-            padding: 8px 0;
-            border-bottom: 1px solid #e0e0e0;
-        }
-        .tracking-details .row:last-child {
-            border-bottom: none;
-        }
-        .tracking-details .label {
-            font-weight: bold;
-            color: #555;
-        }
-        .tracking-details .value {
-            color: #1e3c72;
-        }
-        .buttons {
-            display: flex;
-            gap: 15px;
-            margin-top: 30px;
-            justify-content: center;
-            flex-wrap: wrap;
-        }
-        button {
-            padding: 12px 30px;
-            background: #1e3c72;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-size: 16px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-        button:hover {
-            background: #2a5298;
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-        }
-        button.secondary {
-            background: #757575;
-        }
-        button.secondary:hover {
-            background: #616161;
-        }
-        .footer {
-            text-align: center;
-            padding: 40px 20px;
-            color: white;
-            margin-top: 60px;
-        }
-        .console-hint {
-            background: #fff3cd;
-            border: 1px solid #ffeaa7;
-            padding: 15px;
-            border-radius: 8px;
-            margin: 20px 0;
-            text-align: center;
-        }
-        .console-hint code {
-            background: #f8f9fa;
-            padding: 2px 6px;
-            border-radius: 3px;
-            font-family: monospace;
-        }
-    </style>
-</head>
-<body>
-    <header class="header">
-        <div class="header-content">
-            <div class="logo">⚡ EV Cook</div>
-            <nav class="nav">
-                <a href="#home">홈</a>
-                <a href="#about">소개</a>
-                <a href="#tracking">추적정보</a>
-                <a href="#contact">문의</a>
-            </nav>
-        </div>
-    </header>
-    <div class="main-container">
-        <section class="hero-section">
-            <h1>EV Cook 추적 데모 사이트</h1>
-            <p>이 사이트는 방문자 추적 시스템이 활성화되어 있습니다</p>
-            <div class="tracking-status">
-                <h3>🔍 추적 상태</h3>
-                <div class="status-indicator active">
-                    <span class="status-dot"></span>
-                    <span>추적 활성화됨</span>
-                </div>
-                <div class="tracking-details">
-                    <div class="row">
-                        <span class="label">Device ID:</span>
-                        <span class="value" id="deviceId">로딩 중...</span>
-                    </div>
-                    <div class="row">
-                        <span class="label">추적 서버:</span>
-                        <span class="value">seawolf2357-evcook.hf.space</span>
-                    </div>
-                    <div class="row">
-                        <span class="label">사이트 ID:</span>
-                        <span class="value">38e0a883</span>
-                    </div>
-                    <div class="row">
-                        <span class="label">추적 시작:</span>
-                        <span class="value" id="trackingStart">-</span>
-                    </div>
-                </div>
-            </div>
-            <div class="buttons">
-                <button onclick="testTracking()">📊 추적 테스트</button>
-                <button onclick="sendCustomEvent()">🎯 커스텀 이벤트</button>
-                <button onclick="viewDetails()" class="secondary">📋 상세 정보</button>
-                <button onclick="checkServer()" class="secondary">🔍 서버 확인</button>
-            </div>
-        </section>
-        <div class="info-grid">
-            <div class="info-card">
-                <h3>🚀 실시간 추적</h3>
-                <p>페이지 방문, 클릭, 스크롤 등 모든 사용자 활동이 실시간으로 추적됩니다. 개발자 도구 콘솔에서 추적 로그를 확인할 수 있습니다.</p>
-            </div>
-            <div class="info-card">
-                <h3>🔒 개인정보 보호</h3>
-                <p>디바이스 ID는 브라우저 정보를 기반으로 생성되며, 개인을 식별할 수 있는 정보는 수집하지 않습니다.</p>
-            </div>
-            <div class="info-card">
-                <h3>📈 분석 대시보드</h3>
-                <p>수집된 데이터는 추적 서버의 대시보드에서 실시간으로 확인할 수 있습니다.</p>
-            </div>
-        </div>
-        <div class="console-hint">
-            💡 <strong>개발자 도구 활용:</strong> <code>F12</code>를 눌러 Console 탭에서 추적 이벤트를 실시간으로 확인하세요!
-        </div>
-        <div id="detailsSection" style="display: none;">
-            <section class="hero-section" style="margin-top: 40px;">
-                <h2>📊 브라우저 상세 정보</h2>
-                <pre id="browserDetails" style="text-align: left; background: #f5f5f5; padding: 20px; border-radius: 8px; overflow-x: auto;"></pre>
-            </section>
-        </div>
-    </div>
-    <footer class="footer">
-        <p>&copy; 2025 EV Cook. 모든 권리 보유.</p>
-        <p>추적 서버: <a href="https://seawolf2357-evcook.hf.space" target="_blank" style="color: white;">seawolf2357-evcook.hf.space</a></p>
-    </footer>
-    <!-- Fixed Visitor Tracking Script -->
-    <script>
-    (function() {
-        // 추적 서버 설정
-        const TRACKING_SERVER = 'https://seawolf2357-evcook.hf.space';
-        const SITE_ID = '38e0a883';  // 서버에서 생성한 사이트 ID 사용
-        // 디바이스 ID 생성/조회
-        function getDeviceId() {
-            let deviceId = localStorage.getItem('_tracker_device_id');
-            if (!deviceId) {
-                // 하드웨어 기반 ID 생성
-                const components = [
-                    screen.width + 'x' + screen.height,
-                    navigator.hardwareConcurrency || 0,
-                    navigator.deviceMemory || 0,
-                    navigator.platform,
-                    navigator.language,
-                    new Date().getTimezoneOffset()
-                ];
-                // 간단한 해시 함수
-                let hash = 0;
-                const str = components.join('|');
-                for (let i = 0; i < str.length; i++) {
-                    const char = str.charCodeAt(i);
-                    hash = ((hash << 5) - hash) + char;
-                    hash = hash & hash;
-                }
-                deviceId = 'DEV_' + Math.abs(hash).toString(36);
-                localStorage.setItem('_tracker_device_id', deviceId);
             }
-            return deviceId;
-        }
-        // WebGL 정보 수집
-        function getWebGLInfo() {
-            try {
-                const canvas = document.createElement('canvas');
-                const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
-                if (!gl) return 'Not supported';
-                const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
-                if (debugInfo) {
-                    return gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
-                }
-                return 'Unknown';
-            } catch(e) {
-                return 'Error';
-            }
-        }
-        // 추적 데이터 전송 (수정된 버전)
-        async function collectAndSend(eventType = 'pageview', eventData = {}) {
-            const data = {
-                siteId: SITE_ID,
-                deviceId: getDeviceId(),
-                eventType: eventType,
-                eventData: eventData,
-                pageUrl: window.location.href,
-                pageTitle: document.title,
-                referrer: document.referrer,
-                userAgent: navigator.userAgent,
-                screenResolution: screen.width + 'x' + screen.height,
-                platform: navigator.platform,
-                language: navigator.language,
-                timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-                cpuCores: navigator.hardwareConcurrency || 0,
-                deviceMemory: navigator.deviceMemory || 0,
-                gpuInfo: getWebGLInfo(),
-                timestamp: new Date().toISOString()
-            };
-            console.log('[Tracker] Sending:', eventType);
-            // 여러 fn_index 시도 (TabbedInterface 때문에 인덱스가 다를 수 있음)
-            const fnIndexes = [0, 1, 2];  // 가능한 인덱스들
-            let success = false;
-            for (const fnIndex of fnIndexes) {
-                if (success) break;
-                try {
-                    // 방법 1: /run/predict 엔드포인트
-                    const response = await fetch(TRACKING_SERVER + '/run/predict', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({
-                            data: [JSON.stringify(data)],
-                            fn_index: fnIndex
-                        })
-                    });
-                    if (response.ok) {
-                        const result = await response.json();
-                        console.log(`[Tracker] ✅ Success with fn_index=${fnIndex}:`, result);
-                        success = true;
-                        // 성공한 fn_index 저장
-                        window._trackerFnIndex = fnIndex;
-                        break;
-                    } else if (response.status === 422) {
-                        console.log(`[Tracker] fn_index=${fnIndex} not valid, trying next...`);
-                    } else {
-                        console.log(`[Tracker] fn_index=${fnIndex} error: ${response.status}`);
-                    }
-                } catch (e) {
-                    console.log(`[Tracker] fn_index=${fnIndex} failed:`, e.message);
-                }
-            }
-            // 방법 2: API 엔드포인트 직접 호출 (폴백)
-            if (!success) {
-                try {
-                    const apiResponse = await fetch(TRACKING_SERVER + '/api/predict/', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({
-                            data: [JSON.stringify(data)],
-                            fn_index: window._trackerFnIndex || 1  // 이전에 성공한 인덱스 사용
-                        })
-                    });
-                    if (apiResponse.ok) {
-                        console.log('[Tracker] ✅ API method success');
-                        success = true;
-                    }
-                } catch (e) {
-                    console.error('[Tracker] API method failed:', e);
-                }
-            }
-            // 방법 3: Queue/Join 방식 (Gradio 4.x)
-            if (!success) {
-                try {
-                    const session_hash = Math.random().toString(36).substring(2, 15);
-                    const queueResponse = await fetch(TRACKING_SERVER + '/queue/join', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({
-                            data: [JSON.stringify(data)],
-                            fn_index: window._trackerFnIndex || 1,
-                            session_hash: session_hash
-                        })
-                    });
-                    if (queueResponse.ok) {
-                        console.log('[Tracker] ✅ Queue method success');
-                        success = true;
-                    }
-                } catch (e) {
-                    console.error('[Tracker] Queue method failed:', e);
                 }
             }
-            if (!success) {
-                console.error('[Tracker] ❌ All methods failed for event:', eventType);
             }
-        }
-        // 전역 추적 객체
-        window._tracker = {
-            trackEvent: function(eventName, eventData) {
-                collectAndSend('custom', { name: eventName, data: eventData });
-            },
-            // 디버깅 도구
-            debug: {
-                getDeviceId: getDeviceId,
-                // 서버 구조 확인
-                checkConfig: async function() {
-                    try {
-                        const response = await fetch(TRACKING_SERVER + '/config');
-                        const config = await response.json();
-                        console.log('Server config:', config);
-                        if (config.dependencies) {
-                            console.log('Available functions:');
-                            config.dependencies.forEach((dep, i) => {
-                                console.log(`[${i}] ${dep.api_name || 'unnamed'}`);
-                            });
-                        }
-                    } catch (e) {
-                        console.error('Config check failed:', e);
-                    }
-                },
-                // 테스트 전송
-                test: function() {
-                    collectAndSend('debug_test', {
-                        test: true,
-                        timestamp: new Date().toISOString(),
-                        random: Math.random()
-                    });
-                }
             }
         };
-        // 페이지 로드시 추적
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => {
-                console.log('[Tracker] DOM loaded, sending pageview...');
-                collectAndSend();
             });
-        } else {
-            console.log('[Tracker] Page already loaded, sending pageview...');
-            collectAndSend();
         }
-        // SPA 지원 - URL 변경 감지
-        let lastUrl = location.href;
-        new MutationObserver(() => {
-            const url = location.href;
-            if (url !== lastUrl) {
-                lastUrl = url;
-                collectAndSend('navigation', { from: lastUrl, to: url });
-            }
-        }).observe(document, {subtree: true, childList: true});
-        // 스크롤 추적
-        let scrollTracked = false;
-        window.addEventListener('scroll', () => {
-            if (!scrollTracked && window.scrollY > 100) {
-                scrollTracked = true;
-                window._tracker.trackEvent('scroll', { depth: window.scrollY });
-            }
-        });
-        // 초기화 메시지
-        console.log('%c🔍 EV Cook Tracker v4.0 (Fixed)', 'color: #4CAF50; font-size: 16px; font-weight: bold;');
-        console.log('Server:', TRACKING_SERVER);
-        console.log('Site ID:', SITE_ID);
-        console.log('Device ID:', getDeviceId());
-        console.log('\n사용 가능한 명령어:');
-        console.log('- window._tracker.trackEvent(name, data)');
-        console.log('- window._tracker.debug.checkConfig()');
-        console.log('- window._tracker.debug.test()');
-    })();
-    </script>
-    <!-- End Visitor Tracking Script -->
-    <!-- 페이지 기능 스크립트 -->
-    <script>
-        // 페이지 로드시 실행
-        window.addEventListener('DOMContentLoaded', () => {
-            // Device ID 표시
-            setTimeout(() => {
-                const deviceId = localStorage.getItem('_tracker_device_id');
-                if (deviceId) {
-                    document.getElementById('deviceId').textContent = deviceId;
-                }
-                document.getElementById('trackingStart').textContent = new Date().toLocaleString('ko-KR');
-            }, 500);
-        });
-        // 추적 테스트
-        function testTracking() {
-            if (window._tracker) {
-                window._tracker.trackEvent('test_button_click', {
-                    button: 'tracking_test',
-                    timestamp: Date.now(),
-                    location: 'hero_section'
-                });
-                alert('✅ 추적 이벤트가 전송되었습니다!\n\n개발자 도구(F12) Console 탭에서 확인하세요.');
-            } else {
-                alert('❌ 추적 스크립트가 로드되지 않았습니다.');
-            }
-        }
-        // 커스텀 이벤트 전송
-        function sendCustomEvent() {
-            const eventName = prompt('이벤트 이름을 입력하세요:', 'custom_action');
-            if (eventName && window._tracker) {
-                const eventData = {
-                    custom_name: eventName,
-                    user_input: true,
-                    timestamp: Date.now()
-                };
-                window._tracker.trackEvent(eventName, eventData);
-                alert(`✅ '${eventName}' 이벤트가 전송되었습니다!`);
-                console.log('[Custom Event]', eventName, eventData);
-            }
         }
-        // 상세 정보 보기
-        function viewDetails() {
-            const details = {
-                tracking: {
-                    deviceId: localStorage.getItem('_tracker_device_id'),
-                    siteId: '38e0a883',
-                    serverUrl: 'https://seawolf2357-evcook.hf.space'
-                },
-                browser: {
-                    userAgent: navigator.userAgent,
-                    platform: navigator.platform,
-                    vendor: navigator.vendor,
-                    language: navigator.language,
-                    languages: navigator.languages,
-                    cookieEnabled: navigator.cookieEnabled,
-                    doNotTrack: navigator.doNotTrack,
-                    onLine: navigator.onLine
-                },
-                screen: {
-                    resolution: screen.width + 'x' + screen.height,
-                    colorDepth: screen.colorDepth,
-                    pixelRatio: window.devicePixelRatio
-                },
-                viewport: {
-                    width: window.innerWidth,
-                    height: window.innerHeight
-                },
-                hardware: {
-                    cpuCores: navigator.hardwareConcurrency || 'Unknown',
-                    deviceMemory: navigator.deviceMemory ? navigator.deviceMemory + 'GB' : 'Unknown'
-                },
-                location: {
-                    href: window.location.href,
-                    hostname: window.location.hostname,
-                    protocol: window.location.protocol,
-                    pathname: window.location.pathname
-                },
-                time: {
-                    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-                    offset: new Date().getTimezoneOffset(),
-                    locale: new Date().toLocaleString()
-                }
             };
-            document.getElementById('browserDetails').textContent = JSON.stringify(details, null, 2);
-            document.getElementById('detailsSection').style.display = 'block';
-            // 상세 정보 보기도 추적
-            window._tracker.trackEvent('view_details', { action: 'show_browser_info' });
-        }
-        // 서버 확인
-        function checkServer() {
-            console.log('🔍 서버 구조 확인 중...');
-            window._tracker.debug.checkConfig();
-            alert('서버 구조를 확인합니다.\n개발자 도구(F12) Console 탭을 확인하세요.');
         }
-        // 콘솔에 추적 정보 출력
-        console.log('%c🔍 EV Cook 추적 시스템 활성화됨', 'color: #4CAF50; font-size: 16px; font-weight: bold;');
-        console.log('%c추적 서버:', 'font-weight: bold;', 'https://seawolf2357-evcook.hf.space');
-        console.log('%c사이트 ID:', 'font-weight: bold;', '38e0a883');
-        console.log('%cDevice ID:', 'font-weight: bold;', localStorage.getItem('_tracker_device_id') || '생성 중...');
-        console.log('\n%c💡 Tip: window._tracker.trackEvent(name, data)로 커스텀 이벤트를 전송할 수 있습니다.', 'color: #666;');
-    </script>
-</body>
-</html>

+<!-- EV Cook Visitor Tracking Script v6.0 -->
+<!-- 이 스크립트를 추적하려는 웹사이트의 </body> 태그 바로 앞에 삽입하세요 -->
+<script>
+(function() {
+    // ========== 설정 ==========
+    const TRACKING_SERVER = 'https://seawolf2357-evcook.hf.space';
+    const SITE_ID = '38e0a883';  // 서버에서 생성한 사이트 ID로 변경하세요
+    const PROCESS_TRACKING_FN_INDEX = 10;
+    const DEBUG_MODE = false;  // true로 설정하면 콘솔에 상세 로그 출력
+    // ========== 유틸리티 함수 ==========
+    function log(level, message, data) {
+        if (DEBUG_MODE || level === 'error') {
+            const prefix = `[EV Cook Tracker ${new Date().toLocaleTimeString()}]`;
+            console[level === 'error' ? 'error' : 'log'](`${prefix} ${message}`, data || '');
+        }
+    }
+    // 디바이스 ID 생성/조회
+    function getDeviceId() {
+        let deviceId = localStorage.getItem('_evcook_device_id');
+        if (!deviceId) {
+            const components = [
+                screen.width + 'x' + screen.height,
+                navigator.hardwareConcurrency || 0,
+                navigator.deviceMemory || 0,
+                navigator.platform,
+                navigator.language,
+                new Date().getTimezoneOffset(),
+                navigator.vendor || '',
+                screen.colorDepth,
+                window.devicePixelRatio || 1
+            ];
+            let hash = 0;
+            const str = components.join('|');
+            for (let i = 0; i < str.length; i++) {
+                const char = str.charCodeAt(i);
+                hash = ((hash << 5) - hash) + char;
+                hash = hash & hash;
             }
+            deviceId = 'DEV_' + Math.abs(hash).toString(36).toUpperCase();
+            localStorage.setItem('_evcook_device_id', deviceId);
+            log('info', 'New device ID generated:', deviceId);
+        }
+        return deviceId;
+    }
+    // WebGL 정보 수집
+    function getWebGLInfo() {
+        try {
+            const canvas = document.createElement('canvas');
+            const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+            if (!gl) return 'Not supported';
+            const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+            if (debugInfo) {
+                return gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
             }
+            return 'Unknown';
+        } catch(e) {
+            return 'Error';
+        }
+    }
+    // ========== 추적 데이터 전송 ==========
+    async function sendTrackingData(eventType, eventData = {}) {
+        const data = {
+            siteId: SITE_ID,
+            deviceId: getDeviceId(),
+            eventType: eventType,
+            eventData: eventData,
+            pageUrl: window.location.href,
+            pageTitle: document.title,
+            referrer: document.referrer,
+            userAgent: navigator.userAgent,
+            screenResolution: screen.width + 'x' + screen.height,
+            platform: navigator.platform,
+            language: navigator.language,
+            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            cpuCores: navigator.hardwareConcurrency || 0,
+            deviceMemory: navigator.deviceMemory || 0,
+            gpuInfo: getWebGLInfo(),
+            timestamp: new Date().toISOString()
+        };
+        log('info', `Sending ${eventType} event`);
+        // 방법 1: Gradio Client API
+        try {
+            const response = await fetch(TRACKING_SERVER + '/call/process_tracking', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ data: [JSON.stringify(data)] })
+            });
+            if (response.ok) {
+                const result = await response.json();
+                if (result.event_id) {
+                    log('info', 'Event sent successfully via Client API');
+                    return true;
                 }
             }
+        } catch (e) {
+            log('debug', 'Client API failed:', e.message);
+        }
+        // 방법 2: Direct API with fn_index
+        try {
+            const response = await fetch(TRACKING_SERVER + '/api/predict', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    data: [JSON.stringify(data)],
+                    fn_index: PROCESS_TRACKING_FN_INDEX
+                })
+            });
+            if (response.ok) {
+                log('info', 'Event sent successfully via Direct API');
+                return true;
             }
+        } catch (e) {
+            log('debug', 'Direct API failed:', e.message);
+        }
+        // 방법 3: Queue API (폴백)
+        try {
+            const session_hash = Math.random().toString(36).substring(2, 15);
+            const response = await fetch(TRACKING_SERVER + '/queue/join', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    data: [JSON.stringify(data)],
+                    fn_index: PROCESS_TRACKING_FN_INDEX,
+                    session_hash: session_hash
+                })
+            });
+            if (response.ok) {
+                log('info', 'Event sent successfully via Queue API');
+                return true;
             }
+        } catch (e) {
+            log('debug', 'Queue API failed:', e.message);
+        }
+        log('error', 'All tracking methods failed');
+        return false;
+    }
+    // ========== 전역 추적 객체 ==========
+    window._evCookTracker = {
+        trackEvent: function(eventName, eventData) {
+            return sendTrackingData('custom', { name: eventName, data: eventData });
+        },
+        trackPageView: function(pageData) {
+            return sendTrackingData('pageview', pageData || {});
+        },
+        getDeviceId: getDeviceId,
+        // 설정 변경
+        setDebugMode: function(enabled) {
+            DEBUG_MODE = enabled;
+            log('info', 'Debug mode ' + (enabled ? 'enabled' : 'disabled'));
+        }
+    };
+    // ========== 자동 추적 ==========
+    // 페��지 로드 추적
+    function trackPageLoad() {
+        const loadData = {
+            loadTime: window.performance && window.performance.timing ?
+                window.performance.timing.loadEventEnd - window.performance.timing.navigationStart : 0,
+            source: document.referrer || 'direct'
         };
+        sendTrackingData('pageview', loadData);
+    }
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', trackPageLoad);
+    } else {
+        trackPageLoad();
+    }
+    // URL 변경 감지 (SPA 지원)
+    let lastUrl = location.href;
+    new MutationObserver(() => {
+        const url = location.href;
+        if (url !== lastUrl) {
+            lastUrl = url;
+            sendTrackingData('navigation', {
+                from: lastUrl.substring(0, 200),
+                to: url.substring(0, 200)
             });
         }
+    }).observe(document, { subtree: true, childList: true });
+    // 스크롤 추적 (최초 100px 스크롤 시)
+    let scrollTracked = false;
+    window.addEventListener('scroll', () => {
+        if (!scrollTracked && window.scrollY > 100) {
+            scrollTracked = true;
+            sendTrackingData('scroll', {
+                depth: window.scrollY,
+                pageHeight: document.documentElement.scrollHeight
+            });
         }
+    });
+    // 페이지 이탈 시간 추적
+    const sessionStartTime = Date.now();
+    window.addEventListener('beforeunload', () => {
+        const timeOnPage = Math.floor((Date.now() - sessionStartTime) / 1000);
+        // 동기 요청 (비콘 API 사용)
+        if (navigator.sendBeacon) {
+            const data = {
+                siteId: SITE_ID,
+                deviceId: getDeviceId(),
+                eventType: 'page_exit',
+                eventData: { timeOnPage: timeOnPage, scrollDepth: window.scrollY },
+                timestamp: new Date().toISOString()
             };
+            navigator.sendBeacon(
+                TRACKING_SERVER + '/api/predict',
+                JSON.stringify({
+                    data: [JSON.stringify(data)],
+                    fn_index: PROCESS_TRACKING_FN_INDEX
+                })
+            );
+        }
+    });
+    // 오류 추적 (선택사항)
+    window.addEventListener('error', function(e) {
+        if (Math.random() < 0.1) {  // 10% 샘플링
+            sendTrackingData('error', {
+                message: e.message,
+                source: e.filename,
+                line: e.lineno,
+                column: e.colno,
+                stack: e.error ? e.error.stack : ''
+            });
         }
+    });
+    // 초기화 완료
+    log('info', 'EV Cook Tracker initialized', {
+        server: TRACKING_SERVER,
+        siteId: SITE_ID,
+        deviceId: getDeviceId()
+    });
+})();
+</script>
+<!-- End EV Cook Tracking Script -->
+<!--
+사용법:
+1. 위 스크립트를 복사하여 추적하려는 웹사이트의 </body> 태그 바로 앞에 붙여넣으세요.
+2. SITE_ID를 서버에서 생성한 실제 사이트 ID로 변경하세요.
+3. 필요시 DEBUG_MODE를 true로 설정하여 콘솔에서 상세 로그를 확인할 수 있습니다.
+커스텀 이벤트 전송:
+window._evCookTracker.trackEvent('button_click', { buttonId: 'submit-btn' });
+수동 페이지뷰 전송:
+window._evCookTracker.trackPageView({ customData: 'value' });
+디버그 모드 켜기:
+window._evCookTracker.setDebugMode(true);
+-->