Pomiar danych dotyczących podstawowych wskaźników internetowych za pomocą danych reklam

1. Zanim zaczniesz

Z tego ćwiczenia dowiesz się, jak mierzyć Core Web Vitals za pomocą gotowego szablonu tagu Menedżera tagów Google (GTM) i przesyłać dane do usługi w Google Analytics 4 (GA4). Dowiesz się też, jak pobierać dane z Google Ad Managera i Google AdSense do GA4, aby korelować dane z pola Core Web Vitals i dane o skuteczności reklam z gotowym panelem Looker Studio.

Jakie zadania wykonasz

• Zaimportuj i skonfiguruj tag w kontenerze Menedżera tagów Google.
• Mierz Core Web Vitals strony internetowej w GA4.
• Skonfiguruj tag zdarzenia GA4 w Menedżerze tagów Google.
• Sprawdź dane dotyczące podstawowych wskaźników internetowych w dataLayer i w raportach GA4.
• Połącz usługę w GA4 z Google Ad Managerem i Google AdSense.
• Koreluj Core Web Vitals z przychodami z reklam za pomocą panelu Looker Studio.

Czego potrzebujesz

• Konto Google Analytics i usługa internetowa w GA4 z uprawnieniami do edycji.
• Konto Menedżera tagów Google i kontener internetowy z uprawnieniami do publikowania.
• Sieć Google Ad Managera lub konto Google AdSense z dostępem administracyjnym.
• konto Looker Studio;

2. Dodawanie szablonu tagu z GitHuba do Menedżera tagów Google

Pomiar Core Web Vitals za pomocą szablonu tagu Menedżera tagów Google opiera się na web-vitals bibliotece. Najpierw pobierzemy szablon tagu Menedżera tagów Google.

1. Otwórz plik template.tpl.
2. Pobieranie pliku na komputer

Teraz otwórz konto Menedżera tagów Google.

1. Otwórz kontener internetowy.
2. Utwórz nowy obszar roboczy i wpisz nazwę (np. „Pomiar Core Web Vitals”).
3. Otwórz „Szablony”.
4. W sekcji „Szablony tagów” kliknij przycisk „Nowy”.

5. Kliknij menu Więcej czynności i wybierz Importuj.

6. Wybierz z komputera pobrany wcześniej plik TPL.
7. Kliknij przycisk „Zapisz”.

Szablon tagu został dodany do kontenera Menedżera tagów Google.

3. Konfigurowanie tagu Web Vitals

1. W obszarze roboczym Menedżera tagów Google kliknij „Tagi”.
2. Dodaj tag Web Vitals, klikając kolejno „Nowy” i „Konfiguracja tagu”, a następnie wybierz tag „Web Vitals” w sekcji „Niestandardowy”.
3. Następnym krokiem jest skonfigurowanie różnych ustawień. Wszystkie ustawienia są opisane w repozytorium GitHub. Aby to ćwiczenie i gotowy panel działały prawidłowo, wystarczą te ustawienia.

4. Zastosuj jedną z reguł wyświetlenia strony, np. regułę „Wszystkie strony”.
5. W razie potrzeby dodaj też wyjątki od reguły.
6. Nadaj tagowi nazwę „Core Web Vitals – wszystkie strony” i go zapisz.

4. Przeglądanie danych Web Vitals w warstwie danych

Aby zobaczyć tag w działaniu, przełącz się na tryb podglądu Menedżera tagów Google. Otworzy się rozszerzenie Tag Assistant, które poprosi o podanie adresu URL, aby wyświetlić podgląd konfiguracji i ją debugować. Podaj adres URL strony, na której zaimplementowano kontener Menedżera tagów Google, i kliknij „Połącz”. Otworzy się osobna karta z podanym adresem URL.

1. Wejdź w interakcję ze stroną, przewijając ją i klikając elementy lub puste miejsca.
2. Następnie wróć na kartę z Tag Assistant i trybem podglądu Menedżera tagów Google.
3. Po lewej stronie zobaczysz różne zdarzenia przesłane do dataLayer.
4. Najpierw sprawdź, czy tag Web Vitals został uruchomiony w przypadku wybranej reguły wyświetlenia strony.

5. Powinny się też pojawić 3 zdarzenia „web_vitals”, z których każde reprezentuje jeden z podstawowych wskaźników internetowych: LCP, INP i CLS.

6. Kliknij pierwszy z nich i po prawej stronie otwórz kartę „Wywołanie interfejsu API”. Zobaczysz tam dane przesłane z szablonu tagu do dataLayer.

7. Sprawdź też inne wpisy zdarzeń „web_vitals”. W web-vitals.js dokumentacji znajdziesz informacje o różnych typach danych.

5. Wysyłanie danych Web Vitals do GA4

Aby pobrać dane dotyczące Core Web Vitals z dataLayer i przesłać je do GA4, musisz:

• Utwórz aktywator dla tagu GA4
• Tworzenie zmiennych do pobierania danych z usługi dataLayer
• Tworzenie tagu zdarzenia GA4

Tworzenie aktywatora

1. W obszarze roboczym Menedżera tagów Google otwórz „Reguły”.
2. Dodaj nową regułę, klikając kolejno „Nowa”, „Konfiguracja reguły” i „Zdarzenie niestandardowe” w sekcji „Inne”.
3. W polu Nazwa zdarzenia wpisz „web_vitals”, nadaj nazwę wyzwalaczowi i zapisz zmiany.

Tworzenie zmiennych warstwy danych

1. W obszarze roboczym Menedżera tagów Google kliknij „Zmienne”.
2. Utwórz nową zmienną zdefiniowaną przez użytkownika typu „Zmienna warstwy danych”.
3. W polu Nazwa zmiennej warstwy danych wpisz „webVitalsData.name”, nazwij zmienną (np. „Zmienna warstwy danych – webVitalsData.name”) i zapisz zmiany.

4. Powtórz te czynności w przypadku pozostałych 4 zmiennych warstwy danych. Utwórz „webVitalsData.value”.

5. Utwórz kolejną zmienną z polem nazwy „webVitalsData.id”.

6. Utwórz „webVitalsData.rating”.

7. Utwórz „webVitalsData.delta”.

8. Powinny powstać te zmienne definiowane przez użytkownika: dataLayer

Tworzenie tagu zdarzenia GA4

Przed utworzeniem tagu zdarzenia GA4 upewnij się, że tag Google jest już skonfigurowany.

1. W obszarze roboczym Menedżera tagów Google kliknij „Tagi”.
2. Dodaj tag zdarzenia GA4, klikając kolejno „Nowy” i „Konfiguracja tagu”, a następnie wybierz tag „Google Analytics: zdarzenie GA4” w sekcji „Google Analytics”.
3. Wpisz identyfikator pomiaru w odpowiednim polu.

4. W polu do wprowadzania danych „Nazwa zdarzenia” wybierz zmienną dataLayer „DLV – webVitalsData.name” z utworzonego wcześniej kroku.

5. Dodaj pozostałe zmienne dataLayer jako parametry zdarzenia, jak pokazano na zrzucie ekranu. Pamiętaj też, aby dodać parametr „event_category” z wartością np. „Web Vitals”, aby pogrupować zdarzenia dotyczące Core Web Vitals.

6. Zarejestruj te parametry zdarzeń jako wymiary niestandardowe w interfejsie GA4.
7. Zastosuj dodatkowe ustawienia zgodnie z wymaganiami konfiguracji GA4.
8. Ustaw zdarzenie niestandardowe „web_vitals” jako regułę tagu GA4.
9. W razie potrzeby dodaj też wyjątki od reguły.

6. Sprawdzanie danych w GA4

Aby sprawdzić przepływ danych do GA4, ponownie przełącz się na tryb podglądu Menedżera tagów Google. Podaj adres URL rozszerzeniu Tag Assistant i kliknij „Połącz”.

1. Wejdź w interakcję ze stroną, przewijając ją i klikając elementy lub puste miejsca.
2. Następnie wróć na kartę z Tag Assistant i trybem podglądu Menedżera tagów Google.
3. Po lewej stronie kliknij poszczególne wpisy „web_vitals” i sprawdź, czy tag Core Web Vitals w GA4 jest uruchamiany.

4. Otwórz tag GA4, klikając kartę, aby sprawdzić, czy dane są prawidłowo pobierane z dataLayer. Pamiętaj, aby wyświetlać zmienne jako wartości.

5. Teraz przejdź do usługi w GA4 i otwórz raport Czas rzeczywisty.
6. Na karcie „Liczba zdarzeń według nazwy zdarzenia” możesz sprawdzić, czy zdarzenia związane z Core Web Vitals są zbierane prawidłowo.

7. Jeśli w raporcie Czas rzeczywisty jest przetwarzana duża ilość danych, zdarzenia mogą być trudniejsze do zidentyfikowania. W takim przypadku użyj raportu DebugView, który umożliwia wyświetlanie danych z konkretnego urządzenia.

7. Publikowanie konfiguracji

Gdy testowanie konfiguracji zakończy się powodzeniem, możesz opublikować obszar roboczy.

1. Otwórz obszar roboczy Menedżera tagów Google.
2. W prawym górnym rogu interfejsu kliknij „Prześlij”.
3. Podaj nazwę i opis wersji, a potem kliknij „Opublikuj”, aby wdrożyć konfigurację.

8. Łączenie GA4 z Google Ad Managerem lub Google AdSense

Aby panel działał, po zebraniu w GA4 danych o Core Web Vitals w GA4 muszą być też dostępne dane związane z reklamami. Połącz z GA4 Google Ad Managera i Google AdSense lub tylko jedno z tych rozwiązań reklamowych. Pamiętaj, że aby połączyć konta, musisz mieć uprawnienia edytującego (lub wyższe) w GA4 oraz uprawnienia administratora w Google Ad Managerze i Google AdSense.

Łączenie GA4 z Google Ad Managerem

1. Otwórz sieć Google Ad Managera.
2. Kliknij kolejno „Administracja” – „Ustawienia globalne” – „Ustawienia sieci”.
3. W sekcji „Ustawienia raportów” włącz „Raporty dotyczące usługi w Google Analytics 4 w raportach Ad Managera”.

4. Przeczytaj warunki korzystania z usługi i kliknij „Potwierdź”.
5. Zapisz aktualizację.
6. Kliknij kolejno „Administracja” –> „Połączone konta” –> „Google Analytics 4”.
7. Kliknij „Nowe połączenie z usługą w Google Analytics 4”.
8. Znajdź i wybierz usługę w GA4, którą chcesz połączyć.
9. Kliknij Zapisz i gotowe.

Łączenie GA4 z Google AdSense

1. Wejdź na swoje konto Google AdSense.
2. Kliknij „Konto” –> „Dostęp i autoryzacja” –> „Integracja z Google Analytics”.
3. Kliknij „+Nowy link”.

4. Znajdź i wybierz usługę w GA4, którą chcesz połączyć.
5. Kliknij „Utwórz link”.

9. Wizualizowanie danych za pomocą narzędzia Looker Studio

Aby uzyskać wizualną prezentację danych Core Web Vitals wraz z danymi reklam, musisz skonfigurować panel narzędzia Looker Studio. Aby powiązać Core Web Vitals z przychodami z reklam, wykonaj te czynności.

1. Otwórz ten szablon panelu narzędzia Looker Studio.
2. Skopiuj panel.
3. Zaktualizuj źródło danych, wybierając z menu usługę w GA4.
4. Gotowe

Pamiętaj, że aby panel działał i wyświetlał dane prawidłowo, dane muszą być zgodne ze składnią i konwencją nazewnictwa z tego ćwiczenia.

Na pierwszej stronie panelu znajdziesz historyczny widok skuteczności Core Web Vitals:

Na drugiej stronie możesz powiązać Core Web Vitals z przychodami z reklam w Google Ad Managerze lub Google AdSense:

Trzecia strona umożliwia analizowanie skuteczności wskaźników Core Web Vitals na poziomie ścieżki do strony wraz z danymi związanymi z reklamami:

10. Podsumowanie

Gratulacje! Dowiedziałeś(-aś) się, jak mierzyć i raportować Core Web Vitals za pomocą GA4 oraz dane o skuteczności reklam z Google Ad Managera i Google AdSense.

Więcej informacji

• Korelacja Core Web Vitals i przychodów z reklam za pomocą narzędzi Google
• Skuteczne ładowanie reklam bez wpływu na Page Speed
• Optymalizacja największego wyrenderowania treści
• Optymalizacja skumulowanego przesunięcia układu
• Optymalizacja interakcji do kolejnego wyrenderowania