This is a demonstration site meant to help become familiar with Segment's tracking capabilities, including page tracking, identity tracking, and event tracking.
- User Identity Switching → Switch between different user profiles and track identity resolution.
- Page Tracking → Automatically tracks page views across the site.
- Support Ticket Form → Tracks support submissions with event tracking.
- Pricing Page → Tracks plan selections and routes users to a sales contact form.
- Documentation Section → Provides example links and structured content.
/src
├── components # Reusable UI components
├── containers # Page-level components
│ ├── Docs # Documentation section
│ ├── Main # Main splash page
│ ├── Pricing # Pricing page with tracking
│ ├── Support # Support ticket submission
│ ├── ContactForm # Sales contact form
├── state-management # Global state management (React Context)
├── utilities # Helper functions & mock data
├── App.jsx # Main app component with routing
├── index.jsx # Entry point
├── README.md # Project documentation
git clone [email protected]:bobbyatsegment/segment_testing_site.git
cd segment_testing_site
npm install
- Create a web source in your Segment workspace - when you create (or change) a source in the Segment app, Segment generates a new write key for that source. You use the write key in your website code to tell Segment servers where the data is coming from.
- Grab the latest version of the Segment snippet in the Overview tab of the source you just created.
- Paste the snippet into the
<head>tag withinindex.html
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Segment Demo Site</title>
<!-- Insert Segment Snippet here -->
<!-- End Segment Snippet -->
</head>
npm run dev
Now, the site should be accessible at http://localhost:5173.
- The
UserSwitchercomponent allows users to switch between identities. - It resets previous analytics data and triggers a new
identifycall. - The
Tracking Debuggercan display payloads as invoked by the client or as JSON.
analytics.identify("user_123", {
name: "John Doe",
email: "[email protected]",
plan: "Pro"
});
- The
PaegTrackingcomponent automatically tracks route changes. - Uses
analytics.page()to log each page view.
analytics.page("/pricing", {
title: "Pricing Page",
path: "/pricing",
});
- Users can select a plan, triggering a
Plan Selectedevent. - Redirects users to a sales contact form.
analytics.track("Plan Selected", {
plan_name: "Pro",
price: 19.99,
selected_by: "user_123",
timestamp: new Date().toISOString(),
});
- When users submit their email, a
Sales Contact Requestedevent is fired. - Displays a thank-you message and allows users to return to the homepage.
analytics.track("Sales Contact Requested", {
email: "[email protected]",
plan: "Pro",
timestamp: new Date().toISOString(),
});
- Users can submit a support ticket via the form.
- Triggers a
Support Ticket Submittedevent.
analytics.track("Support Ticket Submitted", {
ticketId: "TICK12345",
subject: "Billing Issue",
priority: "High",
submittedAt: new Date().toISOString(),
});
- Provides structured navigation to different docs pages.
- Each documentation page is tracked when visited.
analytics.page("/docs/phone", {
title: "Phone Setup Docs",
path: "/docs/phone",
});
If you need to customize Segment settings, update the tracking initialization inside index.html:
analytics.load('YOUR_SEGMENT_WRITE_KEY');
analytics.page();