Google Analytics 4 script'ini async yükleyip dataLayer push'larını nasıl geciktirerek ana thread'i korudum

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

// 1. dataLayer'i en başta tanımla (diğer scriptlerin erişimi için)
window.dataLayer = window.dataLayer || [];

// 2. GA4 Script'ini Dinamik ve Async Yükleme Fonksiyonu
function loadGA4Script() {
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
    document.head.appendChild(script);

    // Script yüklendikten sonra temel config'i yap
    script.onload = function() {
        window.gtag = function() {
            window.dataLayer.push(arguments);
        };
        window.gtag('js', new Date());
        window.gtag('config', 'G-XXXXXXXXXX');
        console.log('GA4 scripti sorunsuz yüklendi ve config edildi.');
    };
}

// 3. Ana sayfa yükleme event'larını geciktiren wrapper fonksiyon
function deferDataLayerPush() {
    // Eğer tarayıcı requestIdleCallback destekliyorsa, onu kullan.
    if ('requestIdleCallback' in window) {
        requestIdleCallback(function() {
            window.dataLayer && window.dataLayer.push(arguments);
        }, { timeout: 2000 }); // Max 2 saniye beklesin, sonra çalışsın.
    } else {
        // Desteklemiyorsa, en azından bir sonraki event loop'a ertele (setTimeout 0)
        setTimeout(function() {
            window.dataLayer && window.dataLayer.push(arguments);
        }, 0);
    }
}

// 4. Sayfa Yüklendiğinde Script'i Başlat
// 'DOMContentLoaded' event'ında değil, 'load' event'ında çalıştırarak daha da geç yükleyebilirsiniz.
window.addEventListener('load', function() {
    // Burada requestIdleCallback kullanarak script yüklemeyi bile erteleyebiliriz.
    if ('requestIdleCallback' in window) {
        requestIdleCallback(loadGA4Script, { timeout: 3000 });
    } else {
        // Fallback: 1 saniye gecikmeli normal yükleme
        setTimeout(loadGA4Script, 1000);
    }
});

// KULLANIM ÖRNEĞİ:
// Artık sayfa başında hemen fire etmek istemediğimiz event'ları deferDataLayerPush ile sarmalayabiliriz.
// Örneğin, bir buton tıklamasında hemen çalışsın, ama "page_view" gibi event'lar yukarıdaki load event'ı içinde zaten işlenecek.