Design and Implementation of a Visual Self-Service Event Tracking Platform for H5 Pages

The traditional event‑tracking approach for AutoHome H5 pages required product‑initiated requests and manual insertion of tracking code directly into the business code, leading to tight coupling and maintenance difficulties.

The platform was built to decouple tracking from business logic, offering a visual interface that allows non‑technical users to define tracking regions, rules, and parameters, and automatically generate a JavaScript SDK that can be referenced by page developers without handling tracking details.

Design Overview

The system is divided into four main modules: Project, Page, Tracking, and SDK Generation.

1. Project Module

Projects are classified by their routing method into two types: “No Front‑End Router” (each page is independent and can load its own tracking SDK directly) and “With Front‑End Router” (requires listening to route changes such as hashchange , popstate , and overridden pushState / replaceState methods to load the appropriate page SDK).

2. Page Module

The page module manages page IDs, common tracking parameters, and most importantly provides a visual selection tool. An iframe embeds the target page, and as the mouse moves over selectable areas, a red border highlights the element.

Because target pages are often cross‑origin, a custom Chrome extension is used to inject the selection script into the iframe.

// manifest.json { "name": "Inject iframe script", "version": "1.0", "description": "Visual tracking system extension", "permissions": ["activeTab", "declarativeContent", "storage"], "content_scripts": [{ "js": ["content_scripts.js"], "matches": ["*://*.autohome.com.cn/*"], "exclude_matches": ["*://dev.autohome.com.cn/*"], "all_frames": true }], "manifest_version": 2 } // content_scripts.js const script = document.createElement('script'); script.src = 'https://xxx/circle.js'; document.body.appendChild(script);

The injected circle.js adds a red frame on mouse hover, sends the selected element’s XPath back to the page module via postMessage , and listens for messages to modify the selection.

3. Tracking Module

When the page module receives the XPath, it converts it to a CSS selector, supports click and exposure events, and allows custom key‑value parameters (static values, URL‑derived values, or dynamic values supplied via a predefined window.layer object).

4. SDK Generation Module

This module reads page and tracking data from the database, assembles them into project or page SDK templates, compresses and obfuscates the code, uploads it to a static storage service, and provides a URL that can be referenced by the page or project.

The page SDK includes event bindings for all tracked elements and uses MutationObserver to monitor DOM changes and update bindings dynamically.

Conclusion

The visual self‑service tracking platform has been deployed in multiple H5 marketing activities, improving development efficiency and maintainability by decoupling tracking from business code; it also supports Excel import of tracking data. Ongoing iterations aim to enhance usability.

Author Bio

Zhang Simeng – Front‑End Developer in the User Product Center, AutoHome. Joined in 2017, focusing on front‑end development for user growth and operations.