Cookie consent banner
@slashclone/cookie-consent-banner
Add an honest cookie banner to a web app: analytics, ad pixels, and video embeds load only after a yes, and saying no is one click. One registry of every cookie and service drives the banner, the loaders, the CSP, and the privacy page's cookie table. Includes a registry checker and React templates.
- Activity
- New: be the first to try it
- Installs
- 0 installs
- Likes
- 0 likes
- Clones
- 0 clones
- 1/**
- 2 * Starting points for common vendors: category, what they store, and the CSP hosts
- 3 * their scripts need. Vendors change hosts and cookie names, so check each against the
- 4 * vendor's current docs and the browser console (CSP errors) after enabling it.
- 5 * Copy what you use into your registry; leave out what you do not.
- 6 */
- 7export const VENDORS = {
- 8 googleAnalytics: {
- 9 category: "analytics",
- 10 stores: "_ga, _ga_<id> (up to 2 years)",
- 11 clear: /^(_ga|_ga_.*|_gid)$/,
- 12 csp: {
- 13 script: ["https://www.googletagmanager.com"],
- 14 connect: [
- 15 "https://*.google-analytics.com",
- 16 "https://*.analytics.google.com",
- 17 "https://www.googletagmanager.com",
- 18 ],
- 19 img: ["https://*.google-analytics.com", "https://www.googletagmanager.com"],
- 20 },
- 21 notes:
- 22 "Send page views by hand with page_location set to origin and path, and turn off 'page changes based on browser history events' in enhanced measurement, or SPA navigations count twice with full URLs. Use Consent Mode: ad_storage, ad_user_data, and ad_personalization follow the advertising choice.",
- 23 },
- 24 posthog: {
- 25 category: "analytics",
- 26 stores: "ph_<project key>_posthog (1 year)",
- 27 clear: /^(ph_.*|__ph_opt_in_out_.*)$/,
- 28 csp: {
- 29 script: ["https://us-assets.i.posthog.com"],
- 30 connect: ["https://us.i.posthog.com", "https://us-assets.i.posthog.com"],
- 31 },
- 32 notes:
- 33 "EU cloud uses eu.i.posthog.com and eu-assets.i.posthog.com. For a privacy-first setup: autocapture false, disable_session_recording true, disable_surveys true, mask_all_text true, person_profiles 'identified_only', and a before_send that strips query strings from $current_url and $referrer.",
- 34 },
- 35 metaPixel: {
- 36 category: "advertising",
- 37 stores: "_fbp, _fbc (90 days)",
- 38 clear: /^(_fbp|_fbc)$/,
- 39 csp: {
- 40 script: ["https://connect.facebook.net"],
- 41 connect: ["https://www.facebook.com", "https://connect.facebook.net"],
- 42 img: ["https://www.facebook.com"],
- 43 },
- 44 notes:
- 45 "Set fbq.disablePushState = true and send PageView yourself, so pages with typed text can be skipped.",
- 46 },
- 47 linkedinInsight: {
- 48 category: "advertising",
- 49 stores: "li_fat_id, li_giant (30 days)",
- 50 clear: /^li_.*$/,
- 51 csp: {
- 52 script: ["https://snap.licdn.com"],
- 53 connect: ["https://px.ads.linkedin.com"],
- 54 img: ["https://px.ads.linkedin.com"],
- 55 },
- 56 notes: "Counts page views and history changes itself, including the full URL. Disclose that.",
- 57 },
- 58 xPixel: {
- 59 category: "advertising",
- 60 stores: "_twclid, muc_ads (up to 2 years)",
- 61 clear: /^(_twclid|muc_ads)$/,
- 62 csp: {
- 63 script: ["https://static.ads-twitter.com"],
- 64 connect: ["https://analytics.twitter.com", "https://t.co"],
- 65 img: ["https://analytics.twitter.com", "https://t.co"],
- 66 },
- 67 notes: "Counts page views itself after twq('config', id).",
- 68 },
- 69 tiktokPixel: {
- 70 category: "advertising",
- 71 stores: "_ttp (13 months)",
- 72 clear: /^_ttp$/,
- 73 csp: {
- 74 script: ["https://analytics.tiktok.com"],
- 75 connect: ["https://analytics.tiktok.com"],
- 76 img: ["https://analytics.tiktok.com"],
- 77 },
- 78 notes: "Call ttq.page() yourself on each route change.",
- 79 },
- 80 youtube: {
- 81 category: "media",
- 82 stores: "Set by YouTube",
- 83 clear: undefined,
- 84 csp: { frame: ["https://www.youtube-nocookie.com"] },
- 85 notes:
- 86 "Use the youtube-nocookie.com player and fetch no thumbnail before consent (i.ytimg.com is a Google request too).",
- 87 },
- 88} as const;
