Installing the tracking pixel in a SvelteKit application is simple. You can add it directly to your global HTML template.
The app.html File
Open src/app.html. This file serves as the shell for your entire SvelteKit application. Add the tracking <script> tag inside the <head> section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
<!-- Discover Mac Apps Tracker -->
<script
src="https://discovermacapps.com/track.js"
data-program-id="YOUR_PROGRAM_ID"
defer
></script>
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
How It Handles Routing
SvelteKit acts as a Single Page Application (SPA) after the initial load. Our track.js script natively hooks into the browser's history.pushState.
If a user lands on /?ref=affiliate_name and then navigates to /pricing using SvelteKit's client-side routing, the script continues tracking flawlessly.
Server-Side Tracking Alternative
If you prefer not to use the frontend tracking pixel due to strict CSP (Content Security Policy) headers or a desire to bypass adblockers entirely, you can easily implement Backend S2S Tracking in SvelteKit using hooks.server.js.
See the Backend API (S2S) documentation for more details on reading the URL search params and storing cookies server-side.