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

1. Zanim zaczniesz

Z tego ćwiczenia w programie dowiesz się, jak mierzyć podstawowe wskaźniki internetowe za pomocą gotowego szablonu tagu Menedżera tagów Google oraz 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 skorelować dane z pola Podstawowe wskaźniki internetowe i dane o skuteczności reklam z gotowym panelem Looker Studio.

Jakie zadania wykonasz

• Zaimportuj i skonfiguruj tag do kontenera Menedżera tagów Google.
• Mierz w GA4 podstawowe wskaźniki internetowe strony internetowej.
• Skonfiguruj w Menedżerze tagów Google tag zdarzenia GA4.
• Przeglądaj dane o web Vitals w dataLayer i w raportach GA4.
• Połącz usługę w GA4 z Google Ad Managerem i Google AdSense.
• Podstawowe wskaźniki internetowe możesz skorelować z przychodami z reklam w panelu narzędzia 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 prawami do publikowania.
• Sieć Google Ad Managera lub konto Google AdSense z dostępem administracyjnym.
• konto Looker Studio,

2. Dodaj szablon tagu z GitHuba do Menedżera tagów Google

Pomiar podstawowych wskaźników internetowych za pomocą szablonu tagu Menedżera tagów Google korzysta z biblioteki web-vitals. Najpierw pobierzemy szablon tagu Menedżera tagów Google.

1. Otwórz plik template.tpl.
2. Pobierz plik na komputer

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

1. Otwórz kontener internetowy.
2. Utwórz nowy obszar roboczy i wpisz jego nazwę (np. „Pomiar podstawowych wskaźników internetowych”).
3. Otwórz „Szablony”.
4. W sekcji „Szablony tagów” kliknij przycisk „Nowy”, Przycisk

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

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

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

3. Konfigurowanie tagu wskaźników internetowych

1. W obszarze roboczym Menedżera tagów Google kliknij „Tagi”.
2. Aby dodać tag wskaźników internetowych, kliknij kolejno „Nowy” i „Konfiguracja tagu”. i wybierz „Wskaźniki internetowe”, w sekcji „Niestandardowy” .
3. Następnym krokiem jest skonfigurowanie różnych ustawień. Wszystkie ustawienia znajdziesz w repozytorium GitHub. Do działania tego ćwiczenia w Codelabs i ostatniego panelu wystarczą poniższe ustawienia.

4. Zastosuj jedną z reguł wyświetlenia strony, np. „Wszystkie strony” .
5. W razie potrzeby dodaj też wyjątki od reguł.
6. Nazwij tag „Podstawowe wskaźniki internetowe – wszystkie strony”. i zapiszę go.

4. Przeglądanie danych wskaźników internetowych w dataLayer

Aby zobaczyć, jak działa tag, przełącz się na tryb podglądu Menedżera tagów Google. Otworzy się Tag Assistant i poprosi o podanie adresu URL, aby wyświetlić podgląd i debugować konfigurację. Podaj adres URL strony z zaimplementowanym kontenerem Menedżera tagów Google i kliknij „Połącz”. Otworzy się osobna karta z podanym adresem URL.

1. Wchodź w interakcję ze stroną, przewijając i klikając elementy lub spacje.
2. Następnie wróć na kartę z rozszerzeniem Tag Assistant i trybem podglądu Menedżera tagów Google.
3. Po lewej stronie zobaczysz różne zdarzenia przekazane do dataLayer.
4. Najpierw sprawdź, czy w wybranej regule polegającej na wyświetleniu strony został uruchomiony tag wskaźników internetowych.

5. Powinny być też widoczne 3 parametry „web_vitals”. zdarzenia, gdzie każde z nich reprezentuje jeden podstawowy wskaźnik internetowy: LCP, INP i CLS.

6. Kliknij pierwszy z nich, a potem po prawej stronie otwórz „Wywołanie interfejsu API”. gdzie zobaczysz dane przekazane z szablonu tagu do komponentu dataLayer.

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

5. Wysyłanie danych ze wskaźników internetowych do GA4

Aby pobrać dane dotyczące podstawowych wskaźników internetowych z narzędzia dataLayer i przesłać je do GA4:

• Tworzenie reguły dla tagu GA4
• Utwórz zmienne do pobierania danych z: dataLayer
• Tworzenie tagu zdarzenia GA4

Tworzenie aktywatora

1. W obszarze roboczym Menedżera tagów Google przejdź do sekcji „Reguły”.
2. Aby dodać nową regułę, kliknij kolejno „Nowa” i „Skonfiguruj regułę” i wybierz „Zdarzenie niestandardowe”, z karty „Inne” .
3. Ustaw „web_vitals” w polu Nazwa zdarzenia wpisz nazwę reguły i zapisz ją.

Tworzenie zmiennych obiektu dataLayer

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. Ustaw „webVitalsData.name” w polu nazwy zmiennej warstwy danych nadaj jej nazwę (np. „DLV – webVitalsData.name”) i zapisz ją.

4. Powtórz te kroki w przypadku pozostałych czterech wymaganych zmiennych warstwy danych. Utwórz plik „webVitalsData.value”.

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

6. Utwórz plik „webVitalsData.rating”.

7. Utwórz plik „webVitalsData.delta”.

8. Powinny pojawić się następujące zmienne zdefiniowane 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. Aby dodać tag zdarzenia GA4, kliknij kolejno „Nowy” i „Konfiguracja tagu”. i wybierz „Google Analytics: zdarzenie GA4”, tagu „Google Analytics” .
3. W odpowiednim polu wpisz identyfikator pomiaru.

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

5. Dodaj pozostałe zmienne dataLayer jako parametry zdarzenia, tak jak to widać na zrzucie ekranu. Pamiętaj też, aby dodać parametr „event_category” z wartością taką jak „Wskaźniki internetowe” do grupowania zdarzeń Core Web Vitals.

6. Zarejestruj te parametry zdarzeń jako wymiary niestandardowe w interfejsie GA4.
7. Zastosuj dodatkowe ustawienia na podstawie wymagań konfiguracji GA4.
8. Ustawianie parametru „web_vitals” jako regułę tagu GA4.
9. W razie potrzeby dodaj też wyjątki od reguł.

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 do rozszerzenia Tag Assistant i kliknij „Połącz”.

1. Wchodź w interakcję ze stroną, przewijając i klikając elementy lub spacje.
2. Następnie wróć na kartę z rozszerzeniem Tag Assistant i trybem podglądu Menedżera tagów Google.
3. Po lewej stronie kliknij każdy z kolumn „web_vitals”. i potwierdzić, że tag GA4 Core Web Vitals uruchamia się.

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. W sekcji „Liczba zdarzeń według nazwy zdarzenia” , za pomocą której możesz sprawdzić, czy zdarzenia dotyczące podstawowych wskaźników internetowych zostały zebrane.

7. Jeśli raport w czasie rzeczywistym przetwarza dużą ilość danych, może się zdarzyć, że nie uda się tak łatwo zidentyfikować zdarzeń. W takim przypadku skorzystaj z raportu debugview, który zawiera dane o konkretnym urządzeniu.

7. Opublikuj konfigurację

Po pomyślnym przetestowaniu konfiguracji 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 następnie opublikuj konfigurację, klikając „Opublikuj”.

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

Aby panel działał, dane dotyczące podstawowych wskaźników internetowych po zebraniu w GA4 danych dotyczących reklam muszą być też dostępne w GA4. Połącz Google Ad Managera i Google AdSense z GA4 lub tylko z jednym z tych rozwiązań reklamowych. Pamiętaj, że aby utworzyć połączenie, musisz mieć uprawnienia do edycji (lub wyższe) w GA4 oraz uprawnienia administratora w usługach Google Ad Manager i Google AdSense.

Łączenie GA4 z Google Ad Managerem

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

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

Łączenie GA4 z Google AdSense

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

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

9. Wizualizacja danych za pomocą Looker Studio

Aby wyświetlić wizualną prezentację danych dotyczących podstawowych wskaźników internetowych wraz z danymi o reklamach, w tym kroku trzeba skonfigurować panel narzędzia Looker Studio. Wykonaj te czynności, aby powiązać podstawowe wskaźniki internetowe z przychodami z reklam.

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

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

Na pierwszej stronie panelu znajdziesz widok historyczny skuteczności podstawowych wskaźników internetowych:

Na drugiej stronie możesz powiązać Podstawowe wskaźniki internetowe z przychodami z reklam w usłudze Google Ad Manager lub Google AdSense:

Trzecia strona umożliwia analizowanie skuteczności Podstawowych wskaźników internetowych na poziomie ścieżki strony wraz z danymi dotyczącymi reklam:

10. Podsumowanie

Gratulacje! Wiesz już, jak mierzyć i raportować podstawowe wskaźniki internetowe w GA4 oraz dane o skuteczności reklam pochodzące z Google Ad Managera i Google AdSense.

Więcej informacji

• Skuteczne wczytywanie reklam bez wpływu na szybkość strony
• Optymalizacja największego wyrenderowania treści
• Optymalizacja skumulowanego przesunięcia układu
• Optymalizacja interakcji do kolejnego wyrenderowania