404 Pages
The Problem
The default page tracking behavior will capture the exact URL of each page. This can present a problem when users navigate to an incorrect or unavailable page in your app, populating analytics hits for a page that doesn’t exist.
For example, if a fan of your hypothetical star wars website is trying to reach the bio page for Han Solo but accidentally types Hand Solo, your analytics will now record a hit to starwarsfans.com/bios/hand-solo when the user actually got to a 404 page.
The Simple Solution
Most of the time your app is already aware of the missing URL and serves a 404 page, however it typically does not redirect the user and change the URL, instead serving a 404 view from the not-found URL.
In this case, the simplest fix is to utilize a Canonical Link to mark the page as a 404. Alternatively, you could utilize a 99dev-page meta depending on your specific SEO considerations. Read more about Canonicals and 99Dev Metas here
404.html
<head>
…
<link rel="canonical" href="https://starwarsfans.com/404" />
<!--
Canonicals impact SEO and require a full URL.
An alternative approach that doesn't…
-->
<meta name="99dev-page" content="/404">
</head>Tracking The Incorrect URL
Additionally, you may want to capture the incorrect URL in case there’s some obvious pattern where users are frequently hitting a commonly mistyped or otherwise unavailable URL.
Custom Events are a perfect use case for this.
404.ts
// Include the 99dev event function
import { recordEvent } from "@99devco/analytics";
// Call it to record the incorrect URL
recordEvent("404'd", { url: window.location.href })