You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何通过Tampermonkey脚本实现页面加载自动启动的表单填写时长追踪

Absolutely! This is totally doable with a Tampermonkey script—perfect for tracking how long users spend filling out forms before hitting submit. Here's a straightforward, reliable implementation:

Tampermonkey Script for Form Submission Time Tracking
// ==UserScript==
// @name         Form Submission Duration Tracker
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Tracks time from page load to form submit button click
// @author       Your Name
// @match        https://your-form-page-url.com/*  // Replace with your actual form URL
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Record the exact time the page finishes loading
    let startTime;
    window.addEventListener('DOMContentLoaded', () => {
        startTime = Date.now();
        console.log('Timer started at:', new Date(startTime).toLocaleString());
    });

    // Target the submit button (adjust the selector to match your form's button)
    const submitButton = document.querySelector('input[type="submit"], button[type="submit"]');
    
    if (submitButton) {
        submitButton.addEventListener('click', () => {
            if (startTime) {
                // Calculate duration in milliseconds, then convert to seconds/minutes
                const durationMs = Date.now() - startTime;
                const durationSec = Math.round(durationMs / 1000);
                const durationMin = Math.round(durationSec / 60);

                console.log(`Time spent on form: ${durationSec} seconds (${durationMin} minutes)`);
                
                // Optional: Do something with the data (e.g., save to localStorage, send to a server)
                // localStorage.setItem('formDuration', durationSec);
                // fetch('https://your-server-endpoint.com/track', { method: 'POST', body: JSON.stringify({ duration: durationSec }) });
            }
        });
    } else {
        // Fallback if button isn't found immediately (common for dynamically loaded forms)
        console.warn('Submit button not found on initial load. Using MutationObserver to watch for it...');
        const observer = new MutationObserver((mutations) => {
            const button = document.querySelector('input[type="submit"], button[type="submit"]');
            if (button) {
                button.addEventListener('click', () => {
                    const durationMs = Date.now() - startTime;
                    const durationSec = Math.round(durationMs / 1000);
                    console.log(`Time spent on form: ${durationSec} seconds`);
                });
                observer.disconnect(); // Stop observing once button is found
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    }
})();

Key Notes & Customizations:

  • Update the @match URL: Replace https://your-form-page-url.com/* with the actual URL of your form page (supports wildcards like * for subpages).
  • Adjust the button selector: If your submit button uses a unique ID (e.g., #submit-form), replace the querySelector value to match—this ensures you target the correct button.
  • Data handling: The script currently logs the duration to the browser console. Uncomment the optional lines to save the data to localStorage or send it to a server (just make sure you comply with privacy regulations like GDPR if tracking user data).
  • Dynamic forms: The fallback MutationObserver handles cases where the submit button loads after the initial page render (common in single-page apps or forms loaded via AJAX).

If you need to tweak any part—like tracking multiple buttons, formatting the duration differently, or integrating with a specific analytics tool—just adjust the relevant sections of the script!

内容的提问来源于stack exchange,提问作者Hyderabadi

火山引擎 最新活动