Initial

2026-04-27 19:13:27 +07:00
commit 4ab5f16798
21 changed files with 1081 additions and 0 deletions
--- a/src/components/TrackingScripts.astro
+++ b/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>
+)}