Skip to content

Commit 7674c93

Browse files
petevbpetevb
authored
Add url-changed.html page to test webTelemetry (#302)
Asana: https://app.asana.com/1/137249556945/task/1210926201650368?focus=true
1 parent f5ca4be commit 7674c93

File tree

1 file changed

+150
-0
lines changed

1 file changed

+150
-0
lines changed

‎features/web-telemetry/url-changed.html‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Note: You MUST serve this file via HTTP (e.g. using a local web server) instead of opening directly via file:// protocol,
4+
due to the way events are handled in JS, i.e. HTML5 pushState/replaceState.
5+
-->
6+
<html>
7+
<head>
8+
<title>Navigation Pixel Test</title>
9+
<style>
10+
body {
11+
font-family: Arial, sans-serif;
12+
margin: 20px;
13+
}
14+
15+
button {
16+
padding: 10px;
17+
margin: 5px;
18+
}
19+
20+
.section {
21+
margin-top: 100px;
22+
padding: 20px;
23+
background: #f0f0f0;
24+
}
25+
26+
#log {
27+
margin-top: 20px;
28+
padding: 10px;
29+
background: #e8e8e8;
30+
font-family: monospace;
31+
}
32+
33+
.warning {
34+
background: #fff3cd;
35+
border: 1px solid #ffeaa7;
36+
padding: 10px;
37+
margin: 10px 0;
38+
border-radius: 4px;
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
<h1>Navigation Pixel Test Page</h1>
44+
<p>Use this page to test different types of navigation events for pixel tracking.</p>
45+
46+
<div class="warning" id="warning">
47+
<strong>Note:</strong> You MUST serve this file via HTTP (e.g., using a local web server) instead of opening directly via file:// protocol, because the HTML5 events it tests (pushState/popState) aren't' handled. Use a web server, e.g.:<br/>
48+
<code>python -m http.server</code>
49+
</div>
50+
51+
<div id="log">
52+
<h3>Event Log</h3>
53+
<div id="logContent"></div>
54+
</div>
55+
56+
<div id="body" hidden>
57+
<h2>History API Navigation (should fire client pixels)</h2>
58+
<button onclick="testPushState('page1')">Push State (Page 1)</button>
59+
<button onclick="testPushState('page2')">Push State (Page 2)</button>
60+
<button onclick="testPushState('page3')">Push State (Page 3)</button>
61+
<button onclick="history.back()">Back (Pop State)</button>
62+
<button onclick="history.forward()">Forward (Pop State)</button>
63+
64+
<h2>Replace State (should NOT fire client pixels)</h2>
65+
<button onclick="testReplaceState('replaced1')">Replace State 1</button>
66+
<button onclick="testReplaceState('replaced2')">Replace State 2</button>
67+
68+
<h2>Hash Navigation (should fire client pixels)</h2>
69+
<a href="#section1">Go to Section 1</a> |
70+
<a href="#section2">Go to Section 2</a> |
71+
<a href="#section3">Go to Section 3</a> |
72+
<a href="#top">Back to Top</a>
73+
74+
<h2>Regular Navigation (should fire regular pixels)</h2>
75+
<button onclick="window.location.href='https://example.com'">Navigate to Example.com</button>
76+
<button onclick="window.location.href='https://httpbin.org'">Navigate to HTTPBin</button>
77+
78+
<div id="section1" class="section">
79+
<h3>Section 1</h3>
80+
<p>This is section 1. Hash navigation to here should fire a client pixel.</p>
81+
</div>
82+
83+
<div id="section2" class="section">
84+
<h3>Section 2</h3>
85+
<p>This is section 2. Hash navigation to here should fire a client pixel.</p>
86+
</div>
87+
88+
<div id="section3" class="section">
89+
<h3>Section 3</h3>
90+
<p>This is section 3. Hash navigation to here should fire a client pixel.</p>
91+
</div>
92+
</div>
93+
94+
<script>
95+
function log(message) {
96+
const logContent = document.getElementById('logContent');
97+
const timestamp = new Date().toLocaleTimeString();
98+
logContent.innerHTML += `[${timestamp}] ${message}<br>`;
99+
logContent.scrollTop = logContent.scrollHeight;
100+
}
101+
102+
function testPushState(page) {
103+
try {
104+
const state = { page: page, timestamp: Date.now() };
105+
history.pushState(state, `Page ${page}`, `/${page}`);
106+
log(`PushState: ${page} (Success)`);
107+
} catch (error) {
108+
log(`PushState Error: ${error.message}`);
109+
}
110+
}
111+
112+
function testReplaceState(page) {
113+
try {
114+
const state = { page: page, timestamp: Date.now(), replaced: true };
115+
history.replaceState(state, `Replaced ${page}`, `/${page}`);
116+
log(`ReplaceState: ${page} (Success)`);
117+
} catch (error) {
118+
log(`ReplaceState Error: ${error.message}`);
119+
}
120+
}
121+
122+
// Listen for popstate events
123+
window.addEventListener('popstate', (event) => {
124+
log(`PopState event: ${JSON.stringify(event.state)}`);
125+
});
126+
127+
// Listen for hashchange events
128+
window.addEventListener('hashchange', (event) => {
129+
log(`HashChange: ${event.oldURL} → ${event.newURL}`);
130+
});
131+
132+
// Log initial page load
133+
window.addEventListener('DOMContentLoaded', () => {
134+
const warning = document.getElementById('warning');
135+
const body = document.getElementById('body');
136+
const isFileProtocol = window.location.protocol === 'file:';
137+
138+
body.hidden = isFileProtocol;
139+
warning.hidden = !isFileProtocol;
140+
141+
if (isFileProtocol) {
142+
log('ERROR: Running on file:// protocol. You must serve this file via HTTP');
143+
return;
144+
}
145+
146+
log('Ready for navigation testing');
147+
});
148+
</script>
149+
</body>
150+
</html>

0 commit comments

Comments
 (0)