Google gtag consent cookie banner in Laravel blabe component.

gtag-banner.blade.php

<!-- Add in views/components/gtag-banner.blade.php -->

<!-- Komponent ładuje się na samej górze sekcji head -->
{{-- <x-gtag-banner gtm-id="GTM-XXXXXXX" /> --}}
{{-- @include('components.gtag-banner', ['gtmId' => 'GTM-XXXXXXX']) --}}

<!-- Button wywołujący cookie banner dodaj do sekcji footer -->
{{-- <button type="button" class="cookie-trigger-btn" onclick="showCookieBanner()">Ustawienia Cookies</button>  --}}

<!-- CONSENT COOKIE BANNER BLADE COMPONENT -->

@props([
    'gtmId' => null, // Możliwość przekazania TAG_ID GTM przez atrybut komponentu
])

@if($gtmId)
<!-- INIT GOOGLE TAG (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ $gtmId }}"></script>
<script>
    window.dataLayer = window.dataLayer || []
    function gtag() {
        dataLayer.push(arguments)
    }
    gtag('js', new Date())
    gtag('config', '{{ $gtmId }}')
    gtag('consent', 'default', {
        ad_storage: 'denied',
        ad_user_data: 'denied',
        ad_personalization: 'denied',
        analytics_storage: 'denied',
    })
</script>

<!-- EVENTS GOOGLE TAG (gtag.js) -->

<script>
// Trigger events
function triggerEvents() {
    // With push
    window.dataLayer.push({
        'gtm.start': new Date().getTime(),
        event: 'gtm.js'
    });

    // With gtag
    gtag('event', 'screen_view', {
    'app_name': 'myAppName',
    'screen_name': 'Home'
    });

    gtag('event', 'signup_newsletter', {
        'method': 'web'
    });
}

// Example function called after successful login
function handleUserLogin(userId) {
  if (userId) {
    gtag('set', {'user_id': userId});
    console.log('User ID set for GA:', userId);

    // You can also send a login event
    gtag('event', 'login', { method: 'your_login_method' });
  }
}

// Example function called after logout
function handleUserLogout() {
  gtag('set', {'user_id': null});
  console.log('User ID cleared for GA.');

  // You can also send a logout event
  gtag('event', 'logout');
}
</script>

<!-- 1. UPDATE GOOGLE -->
<script>
    // Pobranie stanu z localStorage z obsługą błędów parsowania JSON
    let savedConsent = null;
    try {
        savedConsent = JSON.parse(localStorage.getItem('cookie_consent_settings'));
    } catch (e) {
        console.error('Empty cookie_consent_settings', e);
    }

    if (savedConsent) {
        gtag('consent', 'default', {
            'ad_storage': savedConsent.ad_storage || 'denied',
            'analytics_storage': savedConsent.analytics_storage || 'denied',
            'ad_user_data': savedConsent.ad_user_data || 'denied',
            'ad_personalization': savedConsent.ad_personalization || 'denied'
        });
        console.log("Cookie banner works!", savedConsent);
    } else {
        gtag('consent', 'default', {
            'ad_storage': 'denied',
            'analytics_storage': 'denied',
            'ad_user_data': 'denied',
            'ad_personalization': 'denied',
            'wait_for_update': 500
        });
    }
</script>
@endif

{{-- @if($gtmId)
<!-- Stara Inicjalizacja Google Tag Manager -->
<script>(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),
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://googletagmanager.com;
})(window,document,'script','dataLayer','{{ $gtmId }}');</script>
@endif --}}

<!-- 2. STYLE CSS DLA BANERU -->
<style>
    #laravel-cookie-banner {
        position: fixed;
        bottom: 20px;
        right: 20px;
        max-width: 400px;
        background-color: #ffffff;
        color: #333333;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        border-radius: 8px;
        padding: 20px;
        font-family: Arial, sans-serif;
        z-index: 999999;
        display: none;
    }
    #laravel-cookie-banner h3 {
        margin-top: 0;
        font-size: 18px;
    }
    #laravel-cookie-banner p {
        font-size: 14px;
        line-height: 1.4;
        color: #666666;
    }
    .cookie-options {
        margin: 15px 0;
        padding-top: 10px;
        border-top: 1px solid #eeeeee;
    }
    .cookie-option-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        font-size: 14px;
    }
    .cookie-option-item input {
        margin-right: 10px;
        cursor: pointer;
    }
    .cookie-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 15px;
    }
    .btn {
        flex: 1;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        text-align: center;
        transition: background 0.2s;
    }
    .btn-accept { background-color: #1a73e8; color: white; }
    .btn-accept:hover { background-color: #155cb4; }
    .btn-save { background-color: #f1f3f4; color: #3c4043; border: 1px solid #dadce0; }
    .btn-save:hover { background-color: #e8eaed; }
    .btn-reject { background-color: transparent; color: #5f6368; }
    .btn-reject:hover { text-decoration: underline; }
    .cookie-trigger-btn {
        background: #222;
        color: #ffffff;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 6px
    }
</style>

<!-- 3. STRUKTURA HTML BANERU -->

<!-- Cookie banner -->
<div id="laravel-cookie-banner">
    <h3>Prywatność i pliki cookies</h3>
    <p>Używamy plików cookies, aby zapewnić poprawne działanie strony oraz analizować ruch i personalizować reklamy zgodnie z RODO.</p>

    <div class="cookie-options">
        <div class="cookie-option-item">
            <input type="checkbox" id="consent-analytics" checked>
            <label for="consent-analytics">Analityka (Google Analytics)</label>
        </div>
        <div class="cookie-option-item">
            <input type="checkbox" id="consent-marketing" checked>
            <label for="consent-marketing">Marketing i personalizacja reklam (Google Ads)</label>
        </div>
    </div>

    <div class="cookie-buttons">
        <button class="btn btn-accept" onclick="handleAcceptAll()">Akceptuję wszystkie</button>
        <button class="btn btn-save" onclick="handleSavePreferences()">Zapisz wybrane</button>
        <button class="btn btn-reject" onclick="handleRejectAll()">Odrzuć wszystkie</button>
    </div>
</div>

<!-- 4. LOGIKA JAVASCRIPT -->

<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (!localStorage.getItem('cookie_consent_settings')) {
            showCookieBanner();
        }
    });

    // Publiczna funkcja do otwierania baneru w dowolnym momencie
    function showCookieBanner() {
        const banner = document.getElementById('laravel-cookie-banner');

        // Przed otwarciem synchronizujemy stan checkboxów z tym, co jest w pamięci
        try {
            const currentConsent = JSON.parse(localStorage.getItem('cookie_consent_settings'));
            if (currentConsent) {
                document.getElementById('consent-analytics').checked = (currentConsent.analytics_storage === 'granted');
                document.getElementById('consent-marketing').checked = (currentConsent.ad_storage === 'granted');
            }
        } catch (e) {
            console.error(e);
        }

        banner.style.display = 'block';
    }

    function hideBanner() {
        document.getElementById('laravel-cookie-banner').style.display = 'none';
    }

    function handleSavePreferences() {
        const isAnalyticsAllowed = document.getElementById('consent-analytics').checked;
        const isMarketingAllowed = document.getElementById('consent-marketing').checked;

        const consentUpdate = {
            'analytics_storage': isAnalyticsAllowed ? 'granted' : 'denied',
            'ad_storage': isMarketingAllowed ? 'granted' : 'denied',
            'ad_user_data': isMarketingAllowed ? 'granted' : 'denied',
            'ad_personalization': isMarketingAllowed ? 'granted' : 'denied'
        };

        gtag('consent', 'update', consentUpdate);
        localStorage.setItem('cookie_consent_settings', JSON.stringify(consentUpdate));
        hideBanner();
        console.log("Cookie updated", consentUpdate);
    }

    function handleAcceptAll() {
        const allGranted = {
            'ad_storage': 'granted',
            'analytics_storage': 'granted',
            'ad_user_data': 'granted',
            'ad_personalization': 'granted'
        };

        gtag('consent', 'update', allGranted);
        localStorage.setItem('cookie_consent_settings', JSON.stringify(allGranted));
        hideBanner();
        console.log("Cookie updated", allGranted);
    }

    function handleRejectAll() {
        const allDenied = {
            'ad_storage': 'denied',
            'analytics_storage': 'denied',
            'ad_user_data': 'denied',
            'ad_personalization': 'denied'
        };

        gtag('consent', 'update', allDenied);
        localStorage.setItem('cookie_consent_settings', JSON.stringify(allDenied));
        hideBanner();
        console.log("Cookie updated", allDenied);
    }
</script>