feat: add coolify deployment and meta tracking

This commit is contained in:
9a0ffedc5b31823b
2026-05-02 22:41:33 +00:00
parent 5c47bdecb6
commit 6b325702b1
13 changed files with 308 additions and 32 deletions

View File

@@ -9,6 +9,7 @@ npm install
npm run dev
npm test
npm run build
npm run start
```
## Add A New Car
@@ -40,13 +41,41 @@ Sold cars are hidden by default. To show a sold section on the homepage, set `sh
## Meta Pixel
Set `META_PIXEL_ID` in your Vercel environment variables. Leave it empty locally if the pixel should not load.
Set `PUBLIC_META_PIXEL_ID` in Coolify or Vercel environment variables. `META_PIXEL_ID` is also supported for build-time compatibility. Leave both empty locally if the pixel should not load.
Phone and WhatsApp buttons fire a `Contact` event when the pixel is configured. `src/pages/api/meta-capi.ts` is only a static stub for a future server-side Conversions API function.
Tracking setup:
1. `PageView` fires on every route with a unique `eventID` and page context.
2. Phone and WhatsApp buttons fire `Contact` with `content_name`, `content_ids`, `contact_channel`, `currency`, and `value` when listing data is available.
3. The sell-car form fires `Lead` on submit when a form endpoint is configured.
4. Events also push to `window.dataLayer` for future Google Tag Manager or debugging.
5. A `<noscript>` fallback is included for `PageView`.
For Meta Conversions API, set `PUBLIC_META_CAPI_ENDPOINT` to a separate server-side endpoint or worker. The browser sends CAPI-ready payloads with matching `event_id`, `_fbp`, `_fbc`, user agent, source URL, and custom data. Keep Meta access tokens server-side only. `src/pages/api/meta-capi.ts` is a static explanatory stub because this site intentionally builds as static output.
## Contact Form Endpoint
Set `PUBLIC_FORMSPREE_ENDPOINT` in Vercel when the Formspree form is ready. Until then, the form is visible but disabled so visitors use phone or WhatsApp instead of submitting to a placeholder endpoint.
Set `PUBLIC_FORMSPREE_ENDPOINT` in Coolify or Vercel when the Formspree form is ready. Until then, the form is visible but disabled so visitors use phone or WhatsApp instead of submitting to a placeholder endpoint.
## Deploy To Coolify With Nixpacks
The repository includes `nixpacks.toml` for Coolify.
Coolify settings:
1. Build pack: Nixpacks.
2. Install command: handled by `nixpacks.toml` as `npm ci`.
3. Build command: handled by `nixpacks.toml` as `npm run build`.
4. Start command: handled by `nixpacks.toml` as `npm run start`.
5. Port: Coolify should provide `PORT`; the app falls back to `4321`.
Recommended Coolify environment variables:
```text
PUBLIC_META_PIXEL_ID=<your-pixel-id>
PUBLIC_META_CAPI_ENDPOINT=<optional-server-side-capi-endpoint>
PUBLIC_FORMSPREE_ENDPOINT=<optional-formspree-endpoint>
```
## Deploy To Vercel
@@ -54,7 +83,7 @@ Set `PUBLIC_FORMSPREE_ENDPOINT` in Vercel when the Formspree form is ready. Unti
2. Use the default framework detection for Astro.
3. Build command: `npm run build`.
4. Output directory: `dist`.
5. Add `META_PIXEL_ID` if needed.
5. Add `PUBLIC_META_PIXEL_ID` if needed.
6. Deploy.
## Domain Setup