Śledzenie zdarzeń w komponencie WebView za pomocą Google Analytics

1. Wprowadzenie

Ostatnia aktualizacja: 22.12.2021

Co utworzysz

Z tego przewodnika dowiesz się, jak przekazywać zdarzenia ze strony internetowej w WebView do kodu natywnego, aby GA4F mogło je śledzić.

Użyjemy przykładowej aplikacji hybrydowej na Androida, która wywołuje stronę internetową za pomocą komponentu WebView.

Czego się nauczysz

• Jak zainicjować GA4F (Google Analytics dla Firebase) w aplikacji hybrydowej
• Jak tworzyć zdarzenia i parametry niestandardowe na stronie internetowej
• Jak przekazywać zdarzenia na stronie internetowej w WebView do kodu natywnego
• Jak debugować
• Jak importować zdarzenia i używać ich w kampaniach zachęcających do działania.

Czego potrzebujesz

• Android Studio w wersji 3.6 lub nowszej.
• Konto Firebase

2. Przygotowania

Pobierz kod

W dokumentach przewodnika Firebase znajdziesz przykładowy kod potrzebny do tego projektu na GitHubie.

Aby rozpocząć, pobierz kod i otwórz go w ulubionym środowisku programistycznym. Użyjemy 2 katalogów : android i web. Katalog „android” jest przeznaczony dla aplikacji na Androida, a katalog „web” – dla strony internetowej, która będzie wywoływana przez aplikację za pomocą komponentu WebView.

3. Tworzenie i konfigurowanie projektu w Firebase

Aby rozpocząć korzystanie z Firebase, musisz utworzyć i skonfigurować projekt w Firebase.

Tworzenie projektu w Firebase

1. Zaloguj się w Firebase.

W konsoli Firebase kliknij Dodaj projekt (lub Utwórz projekt) i nadaj projektowi w Firebase nazwę Webview-test-codelab lub dowolną inną nazwę.

2. Klikaj opcje tworzenia projektu. W razie potrzeby zaakceptuj warunki usługi Firebase. Włącz Google Analytics w tym projekcie, ponieważ zdarzenia Google Analytics są potrzebne do śledzenia zdarzeń związanych z działaniami i analizowania konwersji.

Więcej informacji o projektach Firebase znajdziesz w artykule Projekty Firebase.

4. Konfiguracja Firebase na Androida

Konfigurowanie Androida

1. W konsoli Firebase w menu po lewej stronie wybierz Przegląd projektu, a następnie kliknij przycisk Android w sekcji „Rozpocznij, dodając Firebase do aplikacji”.

Zobaczysz okno dialogowe widoczne na poniższym ekranie.

2. Ważną wartością, którą musisz podać, jest nazwa pakietu Androida. Uzyskasz ją w kolejnym kroku.

Wskazówka: więcej informacji o identyfikatorach pakietu i aplikacji znajdziesz w artykule Ustawianie identyfikatora aplikacji.

3. W katalogu aplikacji otwórz plik android/app/src/main/AndroidManifest.xml.
4. W elemencie manifest znajdź wartość ciągu atrybutu package. Jest to nazwa pakietu na Androida (np. com.yourcompany.yourproject). Skopiuj tę wartość.
5. W oknie Firebase wklej skopiowaną nazwę pakietu w polu Android package name.
6. Nie potrzebujemy tutaj klucza SHA-1, chyba że planujesz używać logowania przez Google lub linków dynamicznych Firebase (pamiętaj, że nie są one częścią tego laboratorium). Jeśli planujesz importować dane in_app_purchase z Google Play, musisz później ustawić klucz.
7. Kliknij Zarejestruj aplikację.
8. W Firebase wykonaj instrukcje, aby pobrać plik konfiguracyjny google-services.json.

9. Otwórz katalog aplikacji, a następnie przenieś pobrany właśnie plik google-services.json do katalogu android/app.
10. Wróć do konsoli Firebase, pomiń pozostałe kroki i wróć na stronę główną konsoli Firebase.
11. Na koniec potrzebujesz wtyczki Gradle do usług Google, aby odczytać plik google-services.json wygenerowany przez Firebase.
12. W IDE lub edytorze otwórz plik android/app/build.gradle, a następnie dodaj ten wiersz jako ostatni w pliku:

apply plugin: 'com.google.gms.google-services'

13. Otwórz plik android/build.gradle, a następnie w tagu buildscript dodaj nową zależność:

buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}

14. Jeśli aplikacja nadal działa, zamknij ją i zbuduj ponownie, aby umożliwić Gradle zainstalowanie zależności.

Aplikacja na Androida została skonfigurowana.

5. Tworzenie interfejsu internetowego Analytics w internecie i rejestrowanie zdarzeń niestandardowych

Aby śledzić zdarzenia w widoku internetowym za pomocą Google Analytics, musisz wstawić kod zarówno do aplikacji internetowej, jak i do aplikacji na Androida.

W tej części przyjrzymy się, jaki kod należy umieścić w internecie.

Najpierw utwórz plik JavaScript, który będzie używany w pliku HTML. W przykładowym kodzie plik JS ma nazwę index.js. Musisz utworzyć funkcję „logEvent” do wywoływania AnayticsWebInterface na Androidzie i funkcję messageHander na iOS, jak w poniższym kodzie.

Wywołaj tę funkcję w miejscu, w którym chcesz śledzić zdarzenie, np. tak jak poniżej.

Gdy zdarzenie zostanie wywołane w widoku WebView na Androidzie, zostanie wywołany interfejs „window.AnalyticsWebInterface”, który połączy zdarzenie z aplikacją natywną.

6. Hostuj katalog internetowy, aby uzyskać adres URL strony internetowej

Zanim wywołasz stronę internetową w widoku WebView w aplikacji, musisz mieć adres URL strony internetowej. Istnieje wiele metod hostowania stron internetowych, ale w tym laboratorium pokażemy Ci, jak korzystać z usługi hostingu Firebase.

• W terminalu wpisz katalog internetowy (np. cd web) i uruchom te polecenia:
• npm install -g firebase-tools – spowoduje to zainstalowanie wiersza poleceń Firebase.
• firebase login
• firebase init
• Gdy pojawi się pytanie, którą funkcję chcesz skonfigurować, wybierz „Hosting”.
• Wybierz projekt skonfigurowany dla aplikacji na Androida.
• Zaakceptuj domyślne wartości dla wszystkich pozostałych pytań.
• firebase deploy --only hosting – wdrożenie w Hostingu Firebase.

7. Tworzenie kodu interfejsu w aplikacji na Androida

Aby śledzić zdarzenia w widoku WebView za pomocą Google Analytics, musisz wstawić kod zarówno w witrynie, jak i w aplikacji na Androida. W tej części przyjrzymy się kodowi, który musisz umieścić w aplikacji na Androida.

Utwórz plik „AnalyticsWebInterface.java”, aby utworzyć klasę „AnalyticsWebInterface”. W tej klasie musisz zakodować @JavascriptInterface, aby połączyć funkcję logEvent w pliku js strony internetowej, jak poniżej.

Następnie musisz dodać interfejs JavaScript w aktywności, która wywołuje komponent WebView, jak poniżej.

Aby zobaczyć cały kod, zapoznaj się z przykładowym kodem pobranym w kroku „Konfiguracja”.

8. Sprawdzanie i debugowanie zdarzeń

Do debugowania zdarzeń możesz użyć tego kodu w terminalu Android Studio po podłączeniu urządzenia testowego lub uruchomieniu emulatora.

> adb shell setprop debug.firebase.analytics.app [nazwa pakietu aplikacji]

> adb shell setprop log.tag.FA VERBOSE

> adb shell setprop log.tag.FA-SVC VERBOSE

> adb logcat -v time -s FA FA-SVC

Jeśli kod działa prawidłowo, zobaczysz dziennik podobny do tego poniżej.

Jeśli chcesz sprawdzić to w konsoli Firebase, możesz też użyć karty Czas rzeczywisty. Otwórz konsolę Firebase i kliknij kartę Czas rzeczywisty, jak pokazano poniżej.

Następnie odfiltruj zdarzenie platformy Android za pomocą funkcji „Dodaj porównanie”.

Jeśli kod jest prawidłowo zaimplementowany, zdarzenia z aplikacji na Androida będą widoczne na karcie Czas rzeczywisty.

Po kilku godzinach zarejestrowane zdarzenia będą widoczne na karcie Zdarzenia w konsoli Firebase. Wystarczy, że w sekcji Analytics w konsoli Firebase klikniesz kartę Zdarzenia. Możesz też sprawdzić wartości w zdarzeniu event1, klikając je.

Oznacz event1 jako konwersję, przesuwając przełącznik Oznacz jako konwersję w prawo.

Jeśli zdarzenie znajduje się na karcie Konwersje, oznacza to, że zostało ono prawidłowo oznaczone jako konwersja. Google Ads będzie teraz mogło importować to zdarzenie z Firebase.

Do debugowania używaj widoku debugowania Firebase. Więcej informacji znajdziesz w artykule Debugowanie zdarzenia.

9. Importowanie zdarzeń analitycznych w Google Ads

Po zakończeniu konfiguracji Firebase-Flutter możesz uruchomić kampanie promujące aplikacje ze zdarzeniami związanymi z działaniami. Zacznij od połączenia Firebase z Google Ads. Połączenie Firebase z Google Ads umożliwia kampaniom promującym aplikację importowanie zdarzeń Firebase. Ten proces pomaga też zwiększać skuteczność kampanii promujących aplikacje w Google Ads, ponieważ umożliwia uzyskiwanie większej ilości informacji o odbiorcach.

1. Otwórz Ustawienia Firebase, klikając przycisk obok Przeglądu projektu.
2. Na karcie Integracje zobaczysz Google Ads i przycisk Połącz. Kliknij Połącz, a następnie Dalej.

3. Wybierz konto Google Ads.

Ostrzeżenie: jeśli zdarzenie docelowe nie jest oznaczone jako zdarzenie konwersji, Google Ads nie będzie w stanie go zaimportować. Sprawdź, czy zdarzenie jest prawidłowo oznaczone jako konwersja.

Część dotycząca Firebase jest już gotowa.

Otwórz Google Ads.

1. Zaloguj się i kliknij Narzędzia i ustawienia > Pomiar skuteczności > Konwersje, aby zaimportować zdarzenia niestandardowe jako konwersje.
2. Aby dodać nowe działania powodujące konwersję, kliknij przycisk +.

3. Wybierz Usługi w Google Analytics 4 (Firebase) i kliknij Dalej.

4. Możesz zobaczyć wszystkie zdarzenia analityczne oznaczone jako konwersje. Znajdź zdarzenie event1, które zostało wcześniej wdrożone.

5. Zaznacz działanie, kliknij Importuj,a potem kliknij Dalej.

Po ustawieniu event1 jako działania powodującego konwersję możesz uruchamiać kampanie zachęcające do działania, które mogą kierować reklamy na użytkowników, którzy prawdopodobnie wywołają zdarzenia event1 więcej niż 5 razy.

10. Uruchamianie kampanii promujących działania w aplikacji z importowanymi zdarzeniami

Ważne: aby skutecznie uruchomić kampanię promującą aplikację, musisz mieć aplikację w wersji produkcyjnej w Google Play. Jeśli jednak nie chcesz jeszcze publikować, możesz na razie pominąć ten krok.

6. Otwórz kartę kampanii na bieżącym koncie i zacznij nową kampanię, klikając przycisk +. Kliknij [Nowa kampania], a potem Dalej.
7. Uruchom kampanię promującą aplikację z opcją Instalacje aplikacji.

8. Znajdź aplikację, wpisując jej nazwę, nazwę pakietu lub wydawcę.
9. W sekcji Określanie stawek wybierz z menu Działania w aplikacji.
10. Znajdź na liście zdarzenie niestandardowe. Ustaw docelowy koszt działania i skonfiguruj dodatkowe opcje.

11. Dokończ konfigurowanie kampanii.

11. Gratulacje

Udało Ci się zintegrować Firebase z Google Ads. Pomoże Ci to zwiększyć skuteczność kampanii dzięki zaimportowanym zdarzeniom Firebase.

Czego się nauczysz

• Jak zainicjować GA4F (Google Analytics dla Firebase) w aplikacji hybrydowej
• Jak tworzyć zdarzenia i parametry niestandardowe na stronie internetowej
• Jak przekazywać zdarzenia na stronie internetowej w WebView do kodu natywnego
• Jak debugować
• Jak importować zdarzenia i używać ich w kampaniach zachęcających do działania.