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

1. Wprowadzenie

Ostatnia aktualizacja: 22.12.2021 r.

Co utworzysz

Z tego ćwiczenia w Codelabs dowiesz się, jak przekazywać zdarzenia ze strony internetowej w komponencie WebView do kodu natywnego, aby umożliwić GA4F ich śledzenie.

Wykorzystamy przykładową aplikację hybrydową 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ć niestandardowe zdarzenia i parametry na stronie internetowej
• Jak przekazywać zdarzenia na stronie internetowej w komponencie WebView do kodu natywnego
• Debugowanie
• Jak importować zdarzenia i używać ich w kampaniach zachęcających do działania.

Czego potrzebujesz

• Android Studio 3.6 lub nowszy
• Konto Firebase

2. Przygotowanie

Pobierz kod

Dokumenty z przewodnikiem po Firebase znajdują się w GitHubie i zawierają przykładowy kod potrzebny na potrzeby tego projektu.

Aby rozpocząć, pobierz kod i otwórz go w ulubionym środowisku programistycznym. Wykorzystamy 2 katalogi : Android i internet. „Android” katalog jest przeznaczony dla aplikacji na Androida oraz katalogu „web” wskazuje stronę internetową, która będzie wywoływana przez aplikację za pomocą WebView.

3. Tworzenie i konfigurowanie projektu Firebase

Aby zacząć korzystać z Firebase, musisz utworzyć i skonfigurować projekt Firebase.

Tworzenie projektu Firebase

1. Zaloguj się w Firebase.

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

2. Klikaj opcje tworzenia projektów. Zaakceptuj warunki korzystania z Firebase, jeśli pojawi się taka prośba. Musisz włączyć Google Analytics w tym projekcie, ponieważ potrzebujesz zdarzeń Google Analytics do śledzenia zdarzeń związanych z działaniami i analizowania konwersji.

Więcej informacji o projektach Firebase znajdziesz w artykule Omówienie projektów Firebase.

4. Konfiguracja Firebase na Androida

Skonfiguruj Androida

1. W konsoli Firebase w panelu nawigacyjnym po lewej stronie kliknij Przegląd projektu, a potem w sekcji „Rozpocznij od dodania Firebase do aplikacji” kliknij przycisk Android.

Okno dialogowe pojawi się na następnym ekranie.

2. Najważniejszą wartością jest nazwa pakietu na Androida, którą otrzymasz w następnym kroku.

Wskazówka: więcej informacji o identyfikatorach pakietów 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ść w postaci ciągu znaków atrybutu package. Ta wartość to nazwa pakietu na Androida (np. com.yourcompany.yourproject). Skopiuj tę wartość.
5. W oknie Firebase wklej nazwę skopiowanego pakietu w polu Android package name.
6. Nie jest nam potrzebny klucz SHA-1, chyba że planujesz użyć logowania przez Google lub linków dynamicznych Firebase (pamiętaj, że nie są one częścią tego ćwiczenia). Jeśli planujesz importować dane in_app_purchase z Google Play, trzeba będzie skonfigurować klucz później.
7. Kliknij Zarejestruj aplikację.
8. Przechodząc dalej w Firebase, postępuj zgodnie z instrukcjami, aby pobrać plik konfiguracyjny google-services.json.

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

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

13. Otwórz android/build.gradle i 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 skompiluj ponownie, aby umożliwić Gradle instalowanie zależności.

Aplikacja na Androida została skonfigurowana.

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

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

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

Najpierw utwórz plik JavaScript do użycia w pliku HTML. W przykładowym kodzie plik js o nazwie index.js Musisz utworzyć funkcję „logEvent” za wywołanie AnayticsWebInterface na Androida i messageHander w przypadku iOS, jak poniżej.

Wywołaj tę funkcję, która pozwala śledzić zdarzenie, tak jak poniżej.

Po wywołaniu zdarzenia w komponencie WebView na Androidzie „window.AnalyticsWebInterface” zostanie wywołana i połączy się z aplikacją natywną.

6. Hostowanie katalogu internetowego dla pobierania adresu URL strony internetowej

Zanim wywołasz stronę w komponencie WebView w aplikacji, potrzebujesz jej adresu URL. Jest wiele metod hostowania stron internetowych, ale z tego ćwiczenia z programowania dowiesz się, jak wygodnie 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 interfejsu wiersza poleceń Firebase.
• firebase login
• firebase init
• Wybierz „Hosting”. gdy pojawi się pytanie, którą funkcję chcesz skonfigurować.
• Wybierz projekt skonfigurowany dla aplikacji na Androida.
• Zaakceptuj wartości domyślne we wszystkich pozostałych promptach.
• firebase deploy --only hosting – wdróż w Hostingu Firebase.

7. Tworzenie kodu interfejsu w aplikacji na Androida

Aby śledzić zdarzenia w komponencie WebView za pomocą Google Analytics, musisz wstawić kod zarówno w wersji internetowej, jak i na Androida. W tej części zobaczmy, jaki kod należy umieścić w aplikacji na Androida.

Utworzenie pliku „AnalyticsWebInterface.java” w celu utworzenia interfejsu AnalyticsWebInterface zajęcia. W tej klasie musisz w kodzie @JavascriptInterface połączyć funkcję logEvent w pliku js witryny jak poniżej.

Następnie musisz dodać do Aktywności interfejs JavaScriptu, który wywołuje komponent WebView jak poniżej.

Cały kod znajdziesz w przykładowym kodzie pobranym w sekcji „Konfigurowanie” krok po kroku.

8. Sprawdzanie i debugowanie zdarzeń

W przypadku zdarzeń debugowania możesz użyć poniższego 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 to sprawdzić w konsoli Firebase, możesz też użyć karty Czas rzeczywisty. Otwórz konsolę Firebase i kliknij kartę Czas rzeczywisty jak poniżej.

Następnie przefiltruj zdarzenie na platformie Androida za pomocą opcji „Dodaj porównanie” .

Jeśli kod został prawidłowo zaimplementowany, zobaczysz zdarzenia z aplikacji na Androida na karcie Czas rzeczywisty.

Zarejestrowane zdarzenia pojawią się na karcie Zdarzenia w konsoli Firebase w ciągu kilku godzin. Wystarczy, że klikniesz kartę Zdarzenia w sekcji Analytics dostępnej w konsoli Firebase. Możesz też sprawdzić wartości w wydarzeniu event1, klikając je.

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

Jeśli zdarzenie znajduje się na karcie Konwersja, oznacza to, że zostało ono oznaczone jako konwersja. Google Ads będzie teraz mógł importować to zdarzenie z Firebase.

Do debugowania użyj Firebase DebugView. Więcej informacji znajdziesz w artykule Zdarzenie debugowania.

9. Importowanie zdarzeń analitycznych do Google Ads

Po zakończeniu konfiguracji Firebase-Flutter możesz uruchomić kampanie promujące aplikacje ze zdarzeniami działania. Zacznij od połączenia Firebase z Google Ads. Dzięki połączeniu Firebase z Google Ads kampanie promujące aplikacje mogą importować zdarzenia Firebase. Ten proces pomaga też Google Ads ulepszać kampanie promujące aplikacje, ponieważ dostarcza więcej informacji o ich 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 kolejno Połącz i Dalej.

3. Wybierz konto Google Ads.

Uwaga: 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.

To już koniec działania Firebase.

Przejdź do Google Ads.

1. Zaloguj się i wybierz Narzędzia Ustawienia > Pomiary > Konwersje, aby importować 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 wyświetlić wszystkie zdarzenia Analytics, które są oznaczone jako konwersje. Znajdź zaimplementowane wcześniej zdarzenie event1.

5. Sprawdź działanie, kliknij Importuj,a następnie kliknij Dalej.

Po ustawieniu event1 jako działania powodującego konwersję możesz uruchomić kampanie zachęcające do działania kierowane na użytkowników, którzy prawdopodobnie będą uruchamiać zdarzenia event1 więcej niż 5 razy.

10. Uruchomienie kampanii zachęcających do działania w aplikacji z zaimportowanymi zdarzeniami

Ważne: aby uruchomić kampanię promującą aplikację, musisz uzyskać w Google Play aplikację na poziomie produkcyjnym. Jeśli jednak nie wszystko jest jeszcze gotowe do publikacji, możesz na razie pominąć ten krok.

6. Przejdź na kartę kampanii bieżącego konta i rozpocznij nową kampanię, klikając przycisk +. Kliknij kolejno [Nowa kampania] i 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. Na wyświetlonej liście odszukaj zdarzenie niestandardowe. Ustaw Docelowy koszt działania i podaj dodatkowe opcje.

11. Dokończ konfigurowanie ustawień kampanii.

11. Gratulacje

Gratulujemy! Udało Ci się zintegrować Firebase z Google Ads. Pomoże Ci to zwiększyć skuteczność kampanii za pomocą zdarzeń zaimportowanych z Firebase.

Wiesz już

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