feat: update website-creator to static mode with ConsentOS + tracking scripts

- Remove Astro DB (no longer needed for consent logging) - Change from SSR to static output mode - Add TrackingScripts.astro with GA4, GTM, Umami, Clarity, FB Pixel, Google Ads, TikTok, LINE - Use ConsentOS consent-loader.js for auto-blocking tracking scripts - Update Dockerfile to nginx static hosting - Remove old consent template (custom consent no longer needed) - Update SKILL.md, AGENTS.md, README.md documentation - Add nginx.conf for static hosting
2026-04-21 21:19:32 +07:00
parent d1edc9cd6c
commit c38cc4ae26
19 changed files with 378 additions and 1099 deletions
--- a/skills/website-creator/templates/astro-tina-starter/src/components/TrackingScripts.astro
+++ b/skills/website-creator/templates/astro-tina-starter/src/components/TrackingScripts.astro
@@ -0,0 +1,167 @@
+---
+const ga4Id = import.meta.env.PUBLIC_GA4_ID
+const gtmId = import.meta.env.PUBLIC_GTM_ID
+const umamiUrl = import.meta.env.PUBLIC_UMAMI_URL
+const umamiWebsiteId = import.meta.env.PUBLIC_UMAMI_WEBSITE_ID
+const clarityId = import.meta.env.PUBLIC_CLARITY_ID
+const fbPixelId = import.meta.env.PUBLIC_FB_PIXEL_ID
+const googleAdsId = import.meta.env.PUBLIC_GOOGLE_ADS_ID
+const tiktokPixelId = import.meta.env.PUBLIC_TIKTOK_PIXEL_ID
+const lineChannelId = import.meta.env.PUBLIC_LINE_CHANNEL_ID
+---
+
+<!-- Google Analytics 4 -->
+{ga4Id && (
+  <script
+    data-consent-category="analytics"
+    async
+    src={`https://www.googletagmanager.com/gtag/js?id=${ga4Id}`}
+  ></script>
+)}
+{ga4Id && (
+  <script
+    data-consent-category="analytics"
+    dangerouslySetInnerHTML={{
+      __html: `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '${ga4Id}');
+    `
+    }}
+  ></script>
+)}
+
+<!-- Google Tag Manager -->
+{gtmId && (
+  <script
+    data-consent-category="analytics"
+    dangerouslySetInnerHTML={{
+      __html: `
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer','${gtmId}');
+    `
+    }}
+  ></script>
+)}
+
+<!-- Umami Analytics -->
+{umamiUrl && umamiWebsiteId && (
+  <script
+    data-consent-category="analytics"
+    async
+    src={`${umamiUrl}/script.js`}
+    data-website-id={umamiWebsiteId}
+  ></script>
+)}
+
+<!-- Microsoft Clarity -->
+{clarityId && (
+  <script
+    data-consent-category="analytics"
+    dangerouslySetInnerHTML={{
+      __html: `
+      (function(c,l,a,r,i,t,y){
+        a[q]=a[q]||function(){(a[q].q=a[q].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+      })(window, document, "clarity", "script", "${clarityId}");
+    `
+    }}
+  ></script>
+)}
+
+<!-- Facebook Pixel -->
+{fbPixelId && (
+  <script
+    data-consent-category="marketing"
+    dangerouslySetInnerHTML={{
+      __html: `
+      !function(f,b,e,v,n,t,s)
+      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+      n.queue=[];t=b.createElement(e);t.async=!0;
+      t.src=v;s=b.getElementsByTagName(e)[0];
+      s.parentNode.insertBefore(t,s)}(window, document,'script',
+      'https://connect.facebook.net/en_US/fbevents.js');
+      fbq('init', '${fbPixelId}');
+      fbq('track', 'PageView');
+    `
+    }}
+  ></script>
+)}
+{fbPixelId && (
+  <noscript data-consent-category="marketing">
+    <img
+      height="1"
+      width="1"
+      style="display:none"
+      src={`https://www.facebook.com/tr?id=${fbPixelId}&ev=PageView&noscript=1`}
+      alt=""
+    />
+  </noscript>
+)}
+
+<!-- Google Ads Conversion -->
+{googleAdsId && (
+  <script
+    data-consent-category="marketing"
+    async
+    src={`https://www.googletagmanager.com/gtag/js?id=${googleAdsId}`}
+  ></script>
+)}
+
+<!-- TikTok Pixel -->
+{tiktokPixelId && (
+  <script
+    data-consent-category="marketing"
+    dangerouslySetInnerHTML={{
+      __html: `
+      !function (w, d, t) {
+        w.TiktokAnalyticsObject = t;
+        var ttq = w[t] = w[t] || [];
+        ttq.methods = ["page", "track", "identify", "instances", "debug", "on", "off", "once", "ready", "alias", "group", "enableCookie", "disableCookie"];
+        ttq.setAndDefer = function (t, e) { t[e] = function () { t.push([e].concat(Array.prototype.slice.call(arguments, 0))) } };
+        for (var i = 0; i < ttq.methods.length; i++) ttq.setAndDefer(ttq, ttq.methods[i]);
+        ttq.instance = function (t) {
+          var e = t.slice(0);
+          return ttq.push([e]), ttq
+        };
+        for (var i = 0; i < ttq.methods.length; i++) {
+          var e = ttq.methods[i];
+          ttq[e] = ttq.instance.bind(ttq, e)
+        }
+        ttq.load = function (t, e) {
+          var n = "https://analytics.tiktok.com/i18n/pixel/events.js";
+          n = n + "?sdkid=" + t + "&lib=" + e;
+          var i = d.createElement("script");
+          i.type = "text/javascript";
+          i.src = n;
+          d.getElementsByTagName("head")[0].appendChild(i)
+        };
+        ttq.load("${tiktokPixelId}", "exc");
+        ttq.page()
+      }(window, document, 'ttq');
+    `
+    }}
+  ></script>
+)}
+
+<!-- LINE Channel Tag -->
+{lineChannelId && (
+  <script
+    data-consent-category="marketing"
+    dangerouslySetInnerHTML={{
+      __html: `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '${lineChannelId}');
+    `
+    }}
+  ></script>
+)}
--- a/skills/website-creator/templates/astro-tina-starter/src/layouts/Layout.astro
+++ b/skills/website-creator/templates/astro-tina-starter/src/layouts/Layout.astro
@@ -1,5 +1,6 @@
 ---
 import "@/styles/global.css"
+import TrackingScripts from "@/components/TrackingScripts.astro"

 interface Props {
  title?: string
@@ -10,6 +11,9 @@ const {
  title = "Astro Tina Starter",
  description = "Astro 6 + Tina CMS starter template",
 } = Astro.props
+
+const consentSiteId = import.meta.env.PUBLIC_CONSENT_SITE_ID || 'demo'
+const consentApiBase = import.meta.env.PUBLIC_CONSENT_API_BASE || 'https://consent.moreminimore.com'
 ---

 <!doctype html>
@@ -23,5 +27,15 @@ const {
  </head>
  <body class="bg-primary-50 text-primary-900 min-h-screen">
    <slot />
+
+    <!-- Tracking Scripts (ConsentOS will auto-block until consent) -->
+    <TrackingScripts />
+
+    <!-- ConsentOS - Consent Management -->
+    <script
+      src={`${consentApiBase}/consent-loader.js`}
+      data-site-id={consentSiteId}
+      data-api-base={consentApiBase}
+    ></script>
  </body>
 </html>