如何通过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 thequerySelectorvalue 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
localStorageor send it to a server (just make sure you comply with privacy regulations like GDPR if tracking user data). - Dynamic forms: The fallback
MutationObserverhandles 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




