Email Intelligence System
How a form submission becomes a Customer Intent Report.
This system captures customer behavior before a form submission, including page path, referrer, device data, engagement metrics, session history, search behavior, and customer actions. That context is packaged into a structured Customer Intent Report email for the business.
The goal is simple: show what the customer was doing before they contacted the business.
The Problem
Traditional forms capture the message but lose the customer context.
A basic form tells the business what the customer typed. It does not explain how they arrived, what they viewed, how long they engaged, what they searched, what CTA they opened, or whether the inquiry came from a casual visitor or a qualified buyer.
Traditional Contact Form
- • Name
- • Phone
- • Message
No context about what the customer was doing before they contacted you.
Customer Intent Report
- • Name, Email, Phone, Message
- + Session Path
- + Search Queries
- + Clicked Search Results
- + Customer Actions
- + Engagement Metrics
- + Device & Browser Context
Full context: what they searched, what they clicked, how long they browsed.
The question this system answers:
"What was the customer doing before they contacted us?"
System Overview
Three-layer architecture: Collect, Aggregate, Render.
The system tracks customer behavior in the browser, aggregates that data when a form is submitted, and renders it into a structured email report sent to the business owner.
Layer 1: Session Behavior Collection
Client-side tracking captures session path, page engagement, scroll depth, time on page, referrer, device context, search behavior, and customer actions.
Tech: React hooks, sessionStorage, engagement tracking, GlobalSearch
Layer 2: Form Metadata Assembly
When a customer opens or submits a form, the application combines form fields with the behavioral session data collected before submission.
Tech: TypeScript form metadata, source labels, page and form context
Layer 3: API Route Processing
The form submission is sent to a Next.js API route, where the message, contact details, source, and metadata are structured into one typed lead payload.
Tech: Next.js API routes, validation, typed payloads
Layer 4: Resend Email Rendering
Resend renders the main submission card and the Customer Intent Report with page context, device data, engagement metrics, session path, search queries, and customer actions.
Tech: Resend, HTML email templates, renderCustomerIntentReport()
Layer 5: Follow-Up Context
The business receives more than a contact form. It receives context that helps the team understand the inquiry and respond with a more useful next step.
Tech: Lead intelligence, email workflow, operational follow-up
Data Captured
What the system tracks during each session.
Page & Form Context
Submitted timestamp, current page, form source, CTA context
Device & Browser
Device type, viewport, browser, referrer, approximate location
Engagement Metrics
Time on page, time on site, scroll depth, interaction depth
Session Path
Ordered page journey before the customer submitted the form
Search Queries
Search term, result count, clicked result, and result position
Customer Actions
Sequential actions such as opened CTA, searched, clicked, submitted
Example Search Query Data
Query: "pinarello dogma"
Results: 12
Clicked: Pinarello Dogma F Dura Ace Di2
Position: 1
Example Customer Actions Timeline
- 1. Opened global search
- 2. Searched "pinarello dogma"
- 3. Clicked "Pinarello Dogma F Dura Ace Di2" (position 1 of 12)
- 4. Viewed product page
- 5. Navigated to Road Bikes category
- 6. Navigated to Bike Fitting page
- 7. Submitted fitting inquiry form
Production Example
See the complete Customer Intent Report.
The Systems page shows a full recreation of the Customer Intent Report email with anonymized lead data, including all tracked sections: submission details, device & browser, engagement metrics, session path, search queries, and customer actions.
Customer Intent Report Structure
- Submission Details: Name, email, phone, subject, message, timestamp
- Device & Browser: Device type, viewport, browser, referrer, location
- Engagement: Time on page, time on site, scroll depth
- Session Path: Ordered list of pages visited
- Search Queries: Each query with results count, clicked result, position
- Customer Actions: Sequential behavior timeline
Technical Implementation
The production email is generated in two parts.
The first part is the normal customer submission: name, email, phone, subject, and message. The second part is the Customer Intent Report, rendered from the metadata collected before submission.
1. sessionStorage Tracking Strategy
As users navigate the site, JavaScript stores behavioral data in sessionStorage. This includes page views (session path), search queries from the GlobalSearch component, and customer actions like "Opened modal" or "Viewed product page." sessionStorage is frontend-only: no database persistence, no cookies, no external tracking.
2. GlobalSearch Integration
When a user searches the site, the GlobalSearch component captures the query, counts results, and tracks which result was clicked and at what position. This data is stored in sessionStorage as a SearchQuery object with properties: query, results, clickedResult, position.
3. Customer Actions Tracking
Throughout the session, key interactions are logged to a customerActions array in sessionStorage. Examples: "Opened global search", "Searched [query]", "Clicked [product] (position X of Y)", "Viewed product page", "Submitted form". This creates a sequential timeline of customer behavior.
4. API Route Aggregation
When the form is submitted, the API route receives both form data (name, email, message) and sessionStorage data (session path, search queries, customer actions, device metadata). It validates inputs, structures the data into a lead object, and passes it to the email rendering function.
5. resend.ts Report Rendering
The resend.ts file contains a renderCustomerIntentReport() function that takes the lead object and renders HTML email sections: submission card, device/browser, engagement, session path, search queries, and customer actions. The email is sent via Resend to the business owner.
Production Impact
The system turns form submissions into useful customer context.
Instead of receiving a generic inquiry, the business can see how the customer arrived, how long they researched, which page converted them, what product or service they focused on, and what next step is most likely to be helpful.
What the business learns:
- • Where the inquiry came from
- • Which page or CTA converted
- • How engaged the visitor was
- • What product, service, or problem they focused on
- • Whether the next step should be a consultation, service, product guidance, quote, or scheduling
What the business can do:
- • Reply with more specific context
- • Recommend the correct next step
- • Prioritize high-intent inquiries
- • Connect search behavior to customer follow-up
- • Use the report as a foundation for future dashboard and CRM workflows
Privacy & Data Handling
Frontend-only storage. No database persistence.
sessionStorage (frontend-only)
Behavioral data is stored in the browser's sessionStorage. This is client-side only. It never touches a database, never persists beyond the session, and clears when the browser tab is closed.
No database persistence
The system does not store leads in a database. Form submissions and sessionStorage data are transmitted once to the API route, packaged into an email, and sent to the business owner via Resend.
Email-only transmission
After form submission, the lead data is sent as a structured email to the business owner. The data exists in the email inbox, not in application storage.
Third-party tracking
The site uses Google Analytics for traffic analysis. No additional third-party tracking scripts are used for the Email Intelligence System. All tracking is custom-coded and stays within the application.
Related Systems
Part of the production application behind Mox Multisport.
Application Systems
View the connected systems behind the application, including analytics, SEO architecture, lead capture, customer-intent reporting, and the full Customer Intent Report example.
View Systems →
Mox Case Study
See how the Customer Intent Report fits into the broader production application: SEO, product discovery, customer intake, analytics, email workflows, dashboards, and operational follow-up.
View Case Study →
Production Output
See the Customer Intent Report as the business receives it.
The Systems page shows a recreated production email with the main customer submission and the Customer Intent Report rendered together as a business-facing lead intelligence workflow.
View production example →