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

1. Wprowadzenie

Ostatnia aktualizacja: 25.02.2022

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

Oficjalny przewodnik Firebase zawiera przykładowy kod w GitHubie. Jest nam potrzebna w tym projekcie.

Aby rozpocząć, musisz pobrać kod i otworzyć go w swoim ulubionym środowisku programistycznym. Użyjemy 2 katalogów : Android i Web. „Android” katalog jest przeznaczony dla aplikacji na Androida oraz katalogu „web” wskazuje stronę internetową, która będzie wywoływana przez aplikację za pomocą komponentu 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. Włącz 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

Konfigurowanie Androida w konsoli Firebase

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

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

Zobaczysz przycisk „Dodaj Firebase do swojej aplikacji na Androida”. jak pokazano poniżej.

2. Nazwę pakietu na Androida (np. com.xxxx.mójprojekt) znajdziesz w folderze android/app/src/main/AndroidManifest.xml w swoim katalogu aplikacji.

package="com.xxxx.myproject"

3. Klucz SHA-1 nie jest tu potrzebny. Ten klucz jest potrzebny tylko wtedy, gdy chcesz korzystać z logowania przez Google lub linków dynamicznych Firebase albo importować dane in_app_purchase z Google Play, które nie są objęte tym ćwiczeniem.
4. Kliknij Zarejestruj aplikację.
5. Pobierz plik konfiguracyjny google-services.json w konsoli Firebase, a następnie skopiuj & Wklej ten plik w katalogu android/app w projekcie aplikacji.
6. Z powrotem w konsoli Firebase pomiń pozostałe kroki i wróć na stronę główną konsoli Firebase.
7. Na koniec potrzebujesz wtyczki do Gradle usług Google, aby odczytać plik google-services.json wygenerowany przez Firebase.
8. 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 pokój 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 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ć na stronie internetowej.

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

Wywołaj tę funkcję, by śledzić zdarzenie w pliku HTML tak jak poniżej.

Po wywołaniu zdarzenia w komponencie WebView w aplikacji na Androida zdarzenie „window.AnalyticsWebInterface” Zdarzenie zostanie przekazane do kodu WebInterface w aplikacji.

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

Zanim wywołasz stronę internetową w komponencie WebView w aplikacji, potrzebujesz jej adresu URL. Istnieje wiele metod hostowania stron internetowych. W tym ćwiczeniu w programowaniu dla wygody będziemy używać 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.

• Po uzyskaniu adresu URL strony internetowej przejdź do projektu aplikacji w Android Studio i wstaw adres URL witryny utworzony w tym kroku w komponencie WebView jak poniżej.

7. Tworzenie kodu interfejsu w aplikacji na Androida

Aby śledzić zdarzenia w komponencie WebView za pomocą GA4F, 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, aby otrzymywać zdarzenia ze strony internetowej w komponencie WebView.

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 z GitHuba w sekcji „Pierwsze kroki” 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

Kliknij „ZAPISZ ZDARZENIE 1”. 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.

Aby zaimportować w Google Ads usługę event1 jako konwersję, oznacz ją 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 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 uruchamiać kampanie zachęcające do działania z aplikacji ze zdarzeniem event1.

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.

12. Pliki referencyjne

Oficjalny przewodnik

• Używanie Analytics w komponencie WebView – Firebase – Google

Firebase i Konfiguracja Google Ads

• Zdarzenia niestandardowe Google Ads ze zdarzeniami niestandardowymi Google Analytics dla Firebase – Android
• Uruchamianie kampanii Google Ads z wykorzystaniem zdarzeń niestandardowych i flutter w Google Analytics