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

1. Wprowadzenie

Ostatnia aktualizacja: 25 lutego 2022 r.

Co utworzysz

W tym ćwiczeniu dowiesz się, jak przekazywać zdarzenia ze strony internetowej w komponencie WebView do kodu natywnego, aby usługa GA4F mogła je śledzić.

Użyjemy przykładowej hybrydowej aplikacji 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 komponencie 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

Oficjalny przewodnik Firebase zawiera przykładowy kod na GitHubie. Będzie on potrzebny w tym projekcie.

Na początek pobierz kod i otwórz go w ulubionym środowisku programistycznym. Użyjemy 2 katalogów : android i web. Katalog „android” jest przeznaczony na aplikację na Androida, a katalog „web” – na stronę internetową, która będzie wywoływana przez aplikację za pomocą komponentu WebView.

3. Tworzenie i konfigurowanie projektu w Firebase

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

Utwórz projekt w Firebase

1. Zaloguj się w Firebase.

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

2. Kliknij opcje tworzenia projektu. Jeśli pojawi się prośba, zaakceptuj warunki korzystania z usługi Firebase. W tym projekcie musisz włączyć Google Analytics, 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 Androidzie

Skonfiguruj Androida w konsoli Firebase

1. Na stronie głównej konsoli Firebase możesz kliknąć ikonę Androida, jak pokazano poniżej.

Możesz też kliknąć Przegląd projektu na lewym pasku nawigacyjnym i kliknąć przycisk Android w sekcji „Zacznij od dodania Firebase do aplikacji”.

Następnie zobaczysz ekran „Dodaj Firebase do aplikacji na Androida”, jak pokazano poniżej.

2. Nazwę pakietu Androida (np. com.xxxx.myproject) znajdziesz w pliku android/app/src/main/AndroidManifest.xml w katalogu aplikacji.

package="com.xxxx.myproject"

3. Klucz SHA-1 nie jest tu potrzebny. Ten klucz jest potrzebny tylko wtedy, gdy chcesz używać logowania przez Google lub linków dynamicznych Firebase albo importować dane o zakupach w aplikacji z Google Play, co nie jest przedmiotem tego ćwiczenia.
4. Kliknij Zarejestruj aplikację.
5. Pobierz plik konfiguracyjny google-services.json z konsoli Firebase, a następnie skopiuj i wklej go do katalogu android/app w projekcie aplikacji.
6. Wróć do konsoli Firebase, pomiń pozostałe kroki i wróć na stronę główną konsoli Firebase.
7. Na koniec potrzebujesz wtyczki Gradle do usług Google, aby odczytać plik google-services.json wygenerowany przez Firebase.
8. 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. Następnie dodaj nową zależność w tagu buildscript.

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

14. Jeśli aplikacja jest nadal uruchomiona, zamknij ją i ponownie skompiluj, aby Gradle mogło zainstalować zależności.

Konfiguracja aplikacji na Androida została zakończona.

5. Tworzenie interfejsu internetowego Analytics i rejestrowanie zdarzeń niestandardowych

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

W tej części dowiesz się, jaki kod musisz umieścić na stronie internetowej.

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 „messageHander” na iOS, jak pokazano w poniższym kodzie.

Następnie wywołaj tę funkcję w miejscu, w którym chcesz śledzić zdarzenie w pliku HTML, jak pokazano poniżej.

Gdy w komponencie WebView w aplikacji na Androida zostanie wywołane zdarzenie, zostanie wywołana funkcja „window.AnalyticsWebInterface”, która przekaże zdarzenie do kodu WebInterface w aplikacji.

6. Hostowanie katalogu internetowego w celu uzyskania adresu URL strony internetowej

Zanim wywołasz stronę internetową w komponencie WebView w aplikacji, musisz mieć jej adres URL. Istnieje wiele sposobów hostowania stron internetowych. W tym ćwiczeniu dla wygody użyjemy usługi Hosting Firebase.

• W terminalu otwórz 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 na potrzeby aplikacji na Androida.
• Zaakceptuj wartości domyślne we wszystkich pozostałych promptach.
• firebase deploy --only hosting - wdrożenie w Hostingu Firebase.

• Po uzyskaniu adresu URL strony internetowej otwórz projekt aplikacji w Android Studio i wstaw adres URL strony internetowej utworzony w tym kroku w komponencie WebView, jak pokazano poniżej.

7. Tworzenie kodu interfejsu w aplikacji na Androida

Aby śledzić zdarzenia w komponencie WebView za pomocą GA4F, musisz wstawić kod zarówno do aplikacji internetowej, jak i do aplikacji na Androida. W tej części dowiesz się, jaki kod musisz umieścić w aplikacji na Androida, aby otrzymywać zdarzenia ze strony internetowej w komponencie WebView.

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 pokazano poniżej.

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

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

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

W aplikacji kliknij „LOG EVENT 1”. Jeśli kod działa prawidłowo, zobaczysz log, jak pokazano poniżej.

Jeśli chcesz sprawdzić 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 przefiltruj zdarzenie platformy Android za pomocą funkcji „Dodaj porównanie”.

Jeśli kod jest prawidłowo wdrożony, na karcie Czas rzeczywisty zobaczysz zdarzenia z aplikacji na Androida.

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

Aby zaimportować event1 jako konwersję w Google Ads, oznacz je jako konwersję, przesuwając przełącznik Oznacz jako konwersję w prawo.

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

Do debugowania użyj DebugView Firebase. Więcej informacji znajdziesz w artykule Debugowanie zdarzeń.

9. Importowanie zdarzeń Analytics do Google Ads

Gdy konfiguracja Firebase zostanie zakończona, możesz uruchomić kampanie promujące aplikacje ze zdarzeniami związanymi z działaniami. 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 zwiększać skuteczność kampanii promujących aplikacje, ponieważ umożliwia poznawanie ich odbiorców.

1. Kliknij przycisk obok opcji Przegląd projektu i otwórz Ustawienia Firebase.
2. Na karcie Integracje zobaczysz Google Ads i przycisk Połącz. Kliknij Połącz , a potem Dalej.

3. Wybierz konto Google Ads.

Uwaga: jeśli zdarzenie docelowe nie jest oznaczone jako zdarzenie konwersji, Google Ads nie będzie mogło go zaimportować. Upewnij się, że zdarzenie jest prawidłowo oznaczone jako konwersja.

Część Firebase została zakończona.

Otwórz Google Ads.

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

3. Kliknij Usługi w Google Analytics 4 (Firebase) , a potem Dalej.

4. Zobaczysz wszystkie zdarzenia Analytics oznaczone jako konwersje. Znajdź zdarzenie event1, które zostało wcześniej wdrożone.

5. Sprawdź działanie, kliknij Importuj,a potem Dalej.

Po ustawieniu event1 jako działania powodującego konwersję możesz uruchamiać kampanie zachęcające do działania w aplikacji ze zdarzeniem event1.

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

Ważne: aby pomyślnie uruchomić kampanię promującą aplikację, musisz mieć aplikację na poziomie produkcyjnym w Google Play. Jeśli nie chcesz jeszcze publikować aplikacji, możesz na razie pominąć ten krok.

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

8. Znajdź aplikację, wpisując jej nazwę, nazwę pakietu lub nazwę wydawcy.
9. W sekcji Określanie stawek w menu wybierz 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

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

Czego się dowiedziałeś(-aś)

• 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 komponencie WebView do kodu natywnego
• Jak debugować
• Jak importować zdarzenia i używać ich w kampaniach zachęcających do działania

12. Odniesienia

Oficjalny przewodnik

• Korzystanie z Analytics w komponencie WebView – Firebase – Google

Konfiguracja Firebase i Google Ads

• Google Ads ze zdarzeniami niestandardowymi Google Analytics dla Firebase – Android
• Uruchamianie kampanii Google Ads z użyciem zdarzeń niestandardowych Google Analytics i Fluttera