c15t

c15t 是什麼？

c15t 是一個開源框架，用於管理現代網頁應用程式的 Cookie 同意與腳本載入。其核心目的是幫助開發者控制同意的收集方式，以及根據同意狀態啟用（或封鎖）追蹤或其他腳本。

該專案定位為「開發者優先」與「headless」，意指底層同意邏輯與使用者介面分離，讓團隊能在自家技術堆疊中建置橫幅與對話框體驗，而非依賴不透明的供應商邏輯。

主要功能

• 開源 Cookie、同意與隱私合規工作流程框架，專注於現代網頁應用。
• 設計用於客戶端/邊緣執行的同意與腳本載入控制，目標是在相關同意狀態設定前封鎖請求。
• 可與多種框架搭配的 headless 核心（列出：React、Vue、Svelte、Angular、Next.js、Nuxt、SvelteKit、Astro、Solid、Qwik 等）。
• CLI 快速生成 Cookie 橫幅，或選擇「直接嵌入 headless 邏輯」完全自行掌控體驗。
• 透過自家 CSS/設計令牌自訂 UI，橫幅/對話框元件預期與您的樣式整合。
• i18n 支援橫幅語言/地區設定（一次翻譯，到處同意）。
• 基於地理位置的語言與呈現選項，包括「以終端語言呈現最終橫幅」，並可選擇完全不顯示。
• 涵蓋 15+ 隱私法管轄區的地區鎖定支援，包括 GDPR 與 CCPA/CPRA，列出 LGPD、PIPEDA、PIPL 與 APPI 等範例。

如何使用 c15t

典型設定從新增 c15t 的框架專屬提供者與 UI 元件開始，然後以您的同意模式、後端 URL 與欲置於同意後的腳本進行設定。

來自頁面的 Next.js 範例：

1. 匯入提供者與 UI 元件（例如 ConsentManagerProvider、ConsentBanner、ConsentDialog）。
2. 將腳本新增至提供者設定（範例顯示 Meta Pixel 腳本透過 metaPixel({ pixelId: "..." })）。
3. 設定選項，包括 mode（範例使用 hosted）與 backendURL（來自環境變數）。
4. 渲染 <ConsentBanner /> 與 <ConsentDialog />，讓使用者管理隱私設定。

網站也提及透過 CLI 快速入門（npx @c15t/cli）。

使用情境

• 需要同意橫幅與設定對話框的 Next.js 應用，同時將同意狀態綁定至腳本載入（例如僅在使用者選擇後啟用特定分析腳本）。
• 希望單一同意邏輯、多框架團隊，使用自家元件建置 UI，因為核心為 headless 且相容多框架。
• 需要同意橫幅文字以使用者語言呈現的本地化密集產品，利用內建 i18n/地區處理。
• 跨地區運作、隱私法訊息（或是否顯示橫幅）需依管轄區與語言變更的產品，透過所述地理位置與管轄區設定支援。
• 偏好自訂樣式與設計令牌整合橫幅/對話框的團隊，而非採用預設 UI。

常見問題

• c15t 是純 UI 解決方案嗎？ 不是。網站描述 c15t 擁有 headless 核心，開發者可「直接嵌入 headless 邏輯」並掌控體驗與樣式。

• 支援哪些框架？ 頁面列出相容 React、Vue、Svelte、Angular、Next.js、Nuxt、SvelteKit、Astro、Solid、Qwik 等。

• 可以自訂橫幅外觀嗎？ 可以。頁面表示您可使用自家 CSS 與設計令牌樣式，並掌控體驗。

• c15t 支援多語言嗎？ 可以。頁面表示有 i18n 支援與內建地區處理。

• 如何處理不同隱私管轄區？ 頁面描述地理位置與管轄區鎖定，包括 GDPR 與 CCPA/CPRA 等範例，並提及 15+ 管轄區。

替代方案

• Headless 同意管理函式庫/框架無關：團隊可自行建置同意狀態管理，並以自家 UI 控制腳本載入，而非使用專屬同意框架。這會將實作工作從現成框架轉移。
• 專注 UI 的 Cookie/橫幅元件：有些方案主要提供可設定的現成同意橫幅。相較 headless 做法，這些通常犧牲開發者對同意邏輯與腳本閘道的控制。
• 具同意模式的標籤/腳本管理工具：分析/標籤管理類別的替代方案可能提供同意感知的腳本觸發。工作流程常以標籤規則為中心，而非開發者可直接整合的 headless 同意核心。
• 隱私/合規平台：這些通常管理更廣泛的合規工作流程。可能較不適合 c15t 所述的框架無關、開發者控制的同意與腳本載入模式。