Dodaj w pliku app.ts na końcu.
// Google Analytics id
const GA_ID = 'G-XXXXXXXXXX';
// Z pliku .env
// const GA_ID = import.meta.env.VITE_GA_ID || '';
// Lista komponentów Vue, na których gtag.js ma bys zablokowany
const blockedComponents = [
'Auth/Login',
'Auth/Register',
'Auth/ForgotPassword',
'Auth/ResetPassword'
];
// Dynamiczne zarządzanie blokadą podczas nawigacji SPA (bez przeładowania strony)
router.on('navigate', (event) => {
const currentComponent = event.detail.page.component;
const shouldBlockGA = blockedComponents.includes(currentComponent);
// Aktywujemy flagę blokady Google Analytics
if (shouldBlockGA) {
window[`ga-disable-${GA_ID}`] = true;
// Nadpisujemy gtag pustą funkcją, więc wywołania w komponentach Vue nie dodadzą nic do dataLayer
window.gtag = function() {
console.log('🔴 [GA Blocked] Próba wywołania zdarzenia na zablokowanej stronie zignorowana.');
};
} else {
window[`ga-disable-${GA_ID}`] = false;
// Przywracanie originalnej funkcji
window.dataLayer = window.dataLayer || [];
window.gtag = function() {
window.dataLayer.push(arguments);
console.log('🟢 [GA Queue] Zdarzenie dodane do kolejki dataLayer.');
};
if (typeof window.gtag === 'function') {
window.gtag('config', GA_ID, {
page_path: event.detail.page.url
});
}
}
// Testowanie statusu GA
const isBlocked = window[`ga-disable-${GA_ID}`];
console.log(`[Inertia Navigation] Bieżący komponent: %c${router.page.component}`, 'font-weight: bold;');
console.log(`Czy Google Analytics jest ZABLOKOWANE?: ${isBlocked ? '🔴 TAK (Zablokowane)' : '🟢 NIE (Działa)'}`);
});Pełna legalność (RODO): Nawet jeśli skrypt gtag.js pobierze się w tle z pliku Blade, instrukcja 'analytics_storage': 'denied' kategorycznie zabrania mu tworzenia plików cookie w przeglądarce użytkownika na stronie logowania. Brak "widmowych" ciasteczek: Przeglądarka pozostaje całkowicie czysta od identyfikatorów śledzących na wrażliwych podstronach.
// Google Analytics id
const GA_ID = 'G-XXXXXXXXXX';
// Z pliku .env
// const GA_ID = import.meta.env.VITE_GA_ID || '';
// Lista komponentów Vue, na których gtag.js ma bys zablokowany
const blockedComponents = [
'Auth/Login',
'Auth/Register',
'Auth/ForgotPassword',
'Auth/ResetPassword'
];
router.on('navigate', (event) => {
const currentComponent = event.detail.page.component;
const shouldBlockGA = blockedComponents.includes(currentComponent);
// Inicjalizacja dataLayer jeśli nie istnieje
window.dataLayer = window.dataLayer || [];
window.gtag = window.gtag || function() { window.dataLayer.push(arguments); };
if (shouldBlockGA) {
// Blokada sieciowa i lokalna
window[`ga-disable-${GA_ID}`] = true;
window.gtag = function() {};
// Wymuszenie odmowy zapisu ciasteczek (RODO)
if (typeof window.gtag === 'function') {
window.gtag('consent', 'default', {
'analytics_storage': 'denied',
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied'
});
}
} else {
window[`ga-disable-${GA_ID}`] = false;
window.gtag = function() {
window.dataLayer.push(arguments);
};
// Jeśli użytkownik zaakceptował baner cookies (np. trzymasz to w localStorage)
const hasAcceptedCookies = localStorage.getItem('cookie_consent_analytics') === 'accepted';
const hasAcceptedAds = localStorage.getItem('cookie_consent_ads') === 'accepted';
// Aktualizacja zgód w zależności od decyzji użytkownika
window.gtag('consent', 'default', {
'analytics_storage': hasAcceptedCookies ? 'granted' : 'denied',
'ad_storage': hasAcceptedAds ? 'granted' : 'denied',
'ad_user_data': hasAcceptedAds ? 'granted' : 'denied',
'ad_personalization': hasAcceptedAds ? 'granted' : 'denied'
});
window.gtag('js', new Date());
window.gtag('config', GA_ID, {
page_path: event.detail.page.url
});
}
});Add in GtagEvent.vue component.
<script setup>
const triggerTestEvent = () => {
// Sprawdzamy czy funkcja gtag istnieje w oknie przeglądarki
if (typeof window.gtag === 'function') {
window.gtag('event', 'test_button_click', {
'event_category': 'testing',
'event_label': 'Inertia Analytics Test'
});
} else {
console.error('Funkcja window.gtag nie jest zdefiniowana!');
}
};
</script>
<template>
<div class="my-5 p-4 border border-dashed border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-900">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3">
Tester Google Analytics
</h3>
<button
@click="triggerTestEvent"
class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded shadow transition-colors duration-200"
>
Wyślij zdarzenie testowe
</button>
</div>
</template>Użyj tej funkcji i ustaw w panelu GTM (reguły blokujące).
// Obsługa nawigacji SPA dla Google Tag Manager
router.on('navigate', (event) => {
window.dataLayer = window.dataLayer || [];
// Popychamy czyste zdarzenie SPA do GTM
window.dataLayer.push({
event: 'inertia_page_view',
page_url: event.detail.page.url,
page_component: event.detail.page.component // Np. 'Auth/Login'
});
});Musisz poinstruować GTM, aby odczytywał nazwę komponentu przesyłaną przez Inertia.js i blokował tagi analityczne na stronach uwierzytelniania. Wykonaj poniższe trzy konfiguracje w swoim kontenerze GTM.
- W menu po lewej stronie przejdź do: Zmienne (Variables).
- W sekcji Zmienne zdefiniowane przez użytkownika kliknij: Nowa (New).
- Kliknij w pole Konfiguracja zmiennej i wybierz typ: Zmienna warstwy danych (Data Layer Variable).
- W polu Nazwa zmiennej warstwy danych wpisz dokładnie:
page_component - Wersja warstwy danych: Wersja 2
- Nazwij zmienną na górze ekranu jako:
dlv - page_component - Kliknij: Zapisz.
- W menu po lewej stronie przejdź do: Reguły (Triggers).
- Kliknij: Nowa (New).
- Kliknij w pole Konfiguracja reguły i wybierz typ: Zdarzenie niestandardowe (Custom Event).
- W polu Nazwa zdarzenia wpisz dokładnie:
inertia_page_view - W sekcji Ta reguła generuje uruchomienie w następujących przypadkach zaznacz opcję: Niektóre zdarzenia niestandardowe (Some Custom Events).
- Skonfiguruj warunek (trzy pola od lewej do prawej):
dlv - page_component➡️ nie zawiera (does not contain) ➡️Auth/ - Nazwij regułę na górze ekranu jako:
Custom Event - Inertia Page View (Safe Pages Only) - Kliknij: Zapisz.
- Przejdź do sekcji Tagi (Tags).
- Edytuj swój główny tag Google Analytics (GA4) lub inne tagi marketingowe (Facebook Pixel, Hotjar itp.).
- W sekcji Reguły (Triggering) na samym dole, USUŃ CAŁKOWICIE domyślną regułę "All Pages" (Wszystkie strony). W aplikacji SPA stara metoda oparta na przeładowaniu okna nie zadziała przy przejściach linkami.
- Jako nową i jedyną regułę uruchamiającą (Firing Trigger) dodaj stworzoną przed chwilą:
Custom Event - Inertia Page View (Safe Pages Only). - Kliknij: Zapisz.
- Kliknij niebieski przycisk Prześlij (Submit) w prawym górnym rogu panelu GTM, aby opublikować zmiany w kontenerze.
Gdy wdrożysz rozwiązanie z Google Tag Managerem (GTM), działanie aplikacji opiera się na blokowaniu uruchomienia tagu, a nie na wyłączaniu wysyłania danych po fakcie.
-
Aplikacja wysyła sygnał (kod JavaScript): Gdy użytkownik wchodzi na stronę logowania, Inertia.js przesyła do pamięci podręcznej przeglądarki obiekt z danymi:
{ event: 'inertia_page_view', page_component: 'Auth/Login', page_url: '/login' }
-
GTM odbiera sygnał i sprawdza regułę: Silnik GTM przechwytuje to zdarzenie z
window.dataLayer. Zanim jednak pozwoli na uruchomienie jakichkolwiek skryptów śledzących, sprawdza skonstruowaną regułę:„Uruchom tag GA4 dla zdarzenia inertia_page_view TYLKO WTEDY, gdy zmienna page_component NIE ZAWIERA frazy Auth/”.
-
Decyzja silnika GTM (Blokada): Ponieważ bieżący komponent to
Auth/Login(czyli zawiera słowoAuth/), reguła zwraca wynik negatywny. GTM podejmuje natychmiastową decyzję: Nie uruchamiać tagu Google Analytics.
- W przeglądarce (Lokalnie): Informacja o tym, że użytkownik jest na podstronie logowania, znajduje się wyłącznie w lokalnej pamięci RAM (
window.dataLayer). To całkowicie bezpieczne – te dane nie opuszczają komputera użytkownika. - W sieci (Pakiety HTTP): Ponieważ tag GA4 w ogóle się nie włącza, przeglądarka nie wysyła absolutnie żadnych żądań sieciowych do serwerów Google. W zakładce Network (Sieć) w DevTools nie pojawi się żaden pakiet
collect. - W panelu Google Analytics (GA4): W raportach czasu rzeczywistego (Realtime) oraz raportach historycznych nie pojawi się żaden ślad po wizycie użytkownika na stronie logowania. Dla Google ta wizyta po prostu nie istnieje.
Gdy użytkownik przejdzie ze strony logowania np. na stronę główną lub katalog produktów (page_component: 'Products/Index'), GTM ponownie zweryfikuje regułę. Warunek "nie zawiera Auth/" zostanie spełniony. W tym momencie GTM uruchomi tag (Fired), a przeglądarka wyśle dane o nowej odsłonie do Google Analytics.