astro-tina/src/components/TrackingScripts.astro

---
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>
)}