@cartbase/storefront 0.13.0 → 0.15.0

package/src/tracking/storefront-tags.tsx

@@ -22,10 +22,15 @@ import type { TrackingConfig } from "./types"
  * it at the next deploy.
  *
  * Consent: nothing extra to wire. <ConsentInit> sets the Consent Mode v2
- * defaults synchronously ahead of these, the Meta and TikTok snippets read
- * the shared consent cookie before they are allowed to write cookies, and
- * `applyConsent()` relays a live decision to all three vendors. Mount this
- * AFTER <ConsentInit> and the gate holds.
+ * defaults synchronously ahead of these, the Meta, TikTok and ChatGPT
+ * snippets resolve the same decision before they are allowed to send, and
+ * `applyConsent()` relays a live decision to every vendor. Mount this
+ * AFTER <ConsentInit> and the gate holds. Whether there IS a gate is the
+ * store's own setting, `consent_required` on this same block: a store that
+ * collects consent starts every visitor denied until they choose, a store
+ * with the banner off starts them granted, and a stored choice wins either
+ * way. The block always carries the flag; an absent one is read as
+ * required, the closed side.
  *
  * Google is deliberately ONE tag with two destinations rather than two
  * loaders — see the comment block in ./ga4.tsx. It is also why the Ads
@@ -56,6 +61,8 @@ export async function StorefrontTags({
     }
   }
 
+  const consentRequired = tracking.consent_required ?? true
+
   return (
     <>
       {/* Cartbase's own analytics, always on and never a merchant setting:
@@ -64,9 +71,9 @@ export async function StorefrontTags({
           only appear when the merchant has entered their ids. */}
       <PageViews />
       <LiveHeartbeat />
-      <MetaPixel pixelId={tracking.facebookPixel?.pixelId} />
-      <TikTokPixel pixelId={tracking.tiktok?.pixelId} />
-      <ChatGptPixel pixelId={tracking.chatgptAds?.pixelId} />
+      <MetaPixel pixelId={tracking.facebookPixel?.pixelId} consentRequired={consentRequired} />
+      <TikTokPixel pixelId={tracking.tiktok?.pixelId} consentRequired={consentRequired} />
+      <ChatGptPixel pixelId={tracking.chatgptAds?.pixelId} consentRequired={consentRequired} />
       <GoogleTag
         measurementId={tracking.ga4?.measurementId}
         adsConversionId={tracking.googleAds?.conversionId}

package/src/tracking/tiktok-pixel.tsx

@@ -2,7 +2,7 @@
 
 import Script from "next/script"
 
-import { CONSENT_COOKIE } from "./consent"
+import { adsConsentSnippet } from "./consent"
 import { jsStringLiteral } from "./inline-script"
 
 /**
@@ -33,6 +33,11 @@ import { jsStringLiteral } from "./inline-script"
  *
  * Live decisions arrive through `applyConsent()` in ./consent.ts, which
  * relays to gtag, fbq and ttq together — there is no cookie watcher.
+ * The first decision is the store's default overridden by the visitor's
+ * stored choice (`adsConsentSnippet`): revoked on a store that collects
+ * consent, granted on a store with no consent gate, the cookie winning
+ * either way. `consentRequired` is `tracking.consent_required`, passed by
+ * <StorefrontTags>, and required for the reason <ConsentInit> gives.
  *
  * One dependency outside the code: Cookie Consent Mode must be switched
  * on for this pixel in TikTok Events Manager. With it off, `holdConsent`
@@ -43,7 +48,14 @@ import { jsStringLiteral } from "./inline-script"
  * Renders nothing when `pixelId` is falsy, so a layout can mount it
  * unconditionally.
  */
-export function TikTokPixel({ pixelId }: { pixelId?: string }) {
+export function TikTokPixel({
+  pixelId,
+  consentRequired,
+}: {
+  pixelId?: string
+  /** `tracking.consent_required`: does this store collect consent before it tracks? */
+  consentRequired: boolean
+}) {
   if (!pixelId) return null
 
   const id = jsStringLiteral(pixelId)
@@ -63,11 +75,7 @@ export function TikTokPixel({ pixelId }: { pixelId?: string }) {
   ttq.page();
 
   (function(){
-    var ads=false;
-    try{
-      var m=d.cookie.match(/(?:^|; )${CONSENT_COOKIE}=([^;]*)/);
-      if(m){ads=!!JSON.parse(decodeURIComponent(m[1])).ads;}
-    }catch(e){}
+    ${adsConsentSnippet(consentRequired, "d")}
     if(ads){ttq.grantConsent();}else{ttq.revokeConsent();}
   })();
 }(window, document, 'ttq');

package/src/tracking/types.ts

@@ -48,8 +48,11 @@ export type TrackingConfig = {
    *  token and stays on the platform, read by the order.placed forwarder
    *  (chatgpt-ads-pixel card). */
   chatgptAds?: { pixelId: string }
-  /** True when the store's consent CMP is enabled — client tags must
-   *  mount through the consent gate (`_1c_consent` / Consent Mode v2). */
+  /** Whether this store collects consent before it tracks (the consent
+   *  CMP's `enabled`). True: every tag starts denied until the visitor
+   *  chooses on the banner. False: the store has no consent gate and every
+   *  tag starts granted. A choice stored in `_1c_consent` wins either way.
+   *  Always served; a reader treats an absent value as true. */
   consent_required?: boolean
 }