# Add CLItrail to SolidStart Where the CLItrail tag goes in SolidStart, in its own idiom, with the consent, CSP and client-side routing details and how to check it works. Written for SolidStart 2 (Vite 8) ## Where the tag goes Edit `src/entry-server.tsx`. Put the tag on every page that shows your install command; site-wide is best, after your existing analytics tags. ```js import { createHandler, StartServer } from '@solidjs/start/server'; export default createHandler(() => ( ( {assets}

{children}

{scripts} )} /> )); ``` ## Only after consent Use the loader in place of the tag: nothing from CLItrail loads until `startClitrail()` runs. Load the loader before your consent manager's script and call `startClitrail()` from the manager's accept callback (most managers also run it on later visits once a choice is stored; check yours). Use the marketing category when installs go to Google Ads, Meta, TikTok or X Ads, and the analytics category when they only reach GA4 or your webhooks. Consent loader ```js // Loads CLItrail only after the visitor agrees. Call startClitrail() from your // consent manager's "accepted" callback; nothing is fetched or stored before that. window.startClitrail = () => { if (document.getElementById('clitrail')) return; const tag = document.createElement('script'); tag.id = 'clitrail'; tag.src = 'https://YOUR_SERVICE/browser.js'; tag.dataset.website = 'YOUR_WEBSITE_ID'; document.head.append(tag); }; ``` ```js ``` ## Client-side routing SolidStart changes pages without a reload. Render `` once in the `` root in `src/app.tsx`. Route helper ```js // Records a visit when client-side navigation opens a new page path. The tag records // the page the browser loaded, so that page is never recorded twice; before the SDK has // started (for example, before consent) it records nothing. declare global { interface Window { InstallAttribution?: { init(options: { service: string; project: string }): Promise; ready?: Promise }; } } let recorded: string | undefined; export function recordVisit(): void { if (typeof window === 'undefined') return; recorded ??= new URL(performance.getEntriesByType('navigation')[0]?.name ?? location.href).pathname; const sdk = window.InstallAttribution; if (!sdk?.ready || location.pathname === recorded) return; recorded = location.pathname; sdk.ready = sdk.init({ service: 'https://YOUR_SERVICE', project: 'YOUR_WEBSITE_ID' }); } ``` ```js import { createEffect, on } from 'solid-js'; import { useLocation } from '@solidjs/router'; import { recordVisit } from './clitrail'; // Render once in the root: records a visit whenever the path changes. export function ClitrailRoutes() { const location = useLocation(); createEffect(on(() => location.pathname, () => recordVisit())); return null; } ``` Render it in the Router root ```js ( <> {props.children} )} > ``` ## Content Security Policy Response headers from middleware (`src/middleware.ts`) or your host; SolidStart's with-strict-csp template shows a nonce setup: add `https://YOUR_SERVICE` to `script-src` and `connect-src`, and `blob:` to `worker-src` (only Safari before 26 needs that one). ``` script-src 'self' https://YOUR_SERVICE; connect-src 'self' https://YOUR_SERVICE; worker-src 'self' blob:; ``` ## Verify it works 1. Run `npm run dev` (http://localhost:3000) or deploy. 2. Open a page with the tag in Chrome or Firefox (accept analytics first if you gate CLItrail on consent), open the developer console and run `await InstallAttribution.ready`. It resolves to `{ ok: true, urlId, hasAnalyticsContext, expiresAt }`. 3. In the CLItrail dashboard, open Visits & identities: the visit is listed. 4. Anything else names the cause: `disabled` (no consent yet, or `data-enabled="false"`), `opfs_unavailable` (the page is not served over https or from localhost), `Error` (the service refused the visit: add the page's origin, including a development origin such as `http://localhost:3000`, under Settings → Additional domains). If `InstallAttribution` is undefined, the tag did not load: check the Network tab and your Content-Security-Policy. Then run your installer on the same computer and check **Install events**, or run the hook with [`--doctor`](https://clitrail.com/docs/doctor). SolidStart documentation: [docs.solidjs.com/solid-start/reference/server/start-server](https://docs.solidjs.com/solid-start/reference/server/start-server) Using other install paths or destinations? The [setup generator](https://clitrail.com/docs/setup-generator) puts this snippet together with your hooks and destination checklist.