freks blog

import { useEffect } from 'react';

function initialize(gtmId: string) {
  const script = document.createElement('script');
  script.text = `(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}');`;
  document.head.appendChild(script);

  const noscript = document.createElement('noscript');
  const iframe = document.createElement('iframe');
  iframe.src = `https://www.googletagmanager.com/ns.html?id=${gtmId}`;
  iframe.height = '0';
  iframe.width = '0';
  iframe.style.cssText = 'display:none;visibility:hidden';
  noscript.appendChild(iframe);

  document.body.prepend(noscript);
}

export function useGTM() {
  const GTM_ID = import.meta.env.VITE_GOOGLE_TAB_MANAGER_ID;

  useEffect(() => {
    if (GTM_ID) {
      initialize(GTM_ID);
    }
  }, [GTM_ID]);
}