Firebase için Google Analytics ile Web Görünümünde Etkinlikleri İzleme

1. Giriş

Son güncelleme: 2022-02-25

Ne oluşturacaksınız?

Bu codelab'de, WebView içindeki bir web sayfasından etkinlikleri yerel koda nasıl yönlendireceğinizi öğreneceksiniz. Böylece GA4F, etkinlikleri izleyebilir.

WebView kullanarak bir web sayfası çağıran örnek bir hibrit Android uygulaması kullanacağız.

Neler öğreneceksiniz?

Hibrit uygulamada GA4F'yi (Firebase için Google Analytics) başlatma
Web sayfasında özel etkinlik ve parametre oluşturma
WebView'deki bir web sayfasında bulunan etkinlikleri yerel koda yönlendirme
Hata ayıklama
Etkinlikleri içe aktarma ve bunları işleme yönelik kampanyalarda kullanma

Gerekenler

Android Studio 3.6 veya sonraki sürümler
Firebase Hesabı

2. Hazırlanma

Kodu alma

Firebase resmi kılavuzunda GitHub'daki örnek kod verilmektedir. Bu proje için buna ihtiyacımız var.

Başlamak için kodu indirmeniz ve en sevdiğiniz geliştirme ortamında açmanız gerekir. android ve web olmak üzere 2 dizin kullanacağız. "android" dizini Android uygulaması, "web" dizini ise uygulama tarafından WebView aracılığıyla çağrılacak bir web sayfası içindir.

3. Firebase projesi oluşturma ve ayarlama

Firebase'i kullanmaya başlamak için bir Firebase projesi oluşturup ayarlamanız gerekir.

Firebase projesi oluşturma

Firebase'de oturum açın.

Firebase konsolunda Proje Ekle'yi (veya Proje oluştur) tıklayın ve Firebase projenizi Webview-test-codelab ya da istediğiniz herhangi bir adla adlandırın.

Proje oluşturma seçeneklerini tıklayın. İstenirse Firebase şartlarını kabul edin. İşlem etkinliklerini izlemek ve dönüşümleri analiz etmek için Google Analytics etkinliklerine ihtiyacınız olduğundan bu proje için Google Analytics'i etkinleştirmeniz gerekir.

Firebase projeleri hakkında daha fazla bilgi edinmek için Firebase projelerini anlama başlıklı makaleyi inceleyin.

4. Android için Firebase yapılandırması

Firebase konsolunda Android'i yapılandırma

Firebase konsolu ana sayfasında aşağıdaki gibi Android simgesini tıklayabilirsiniz.

Alternatif olarak, sol gezinme çubuğundaki Proje Genel Bakışı'na gidip "Firebase'i uygulamanıza ekleyerek başlayın" bölümündeki Android düğmesini tıklayabilirsiniz.

Ardından, aşağıdaki gibi "Firebase'i Android uygulamanıza ekleyin" ekranını görürsünüz.

Android paket adınızı (ör. com.xxxx.myproject) uygulama dizininizdeki android/app/src/main/AndroidManifest.xml içinde bulabilirsiniz.

package="com.xxxx.myproject"

Burada SHA-1 anahtarı gerekmez. Bu anahtar yalnızca Google ile Oturum Açma veya Firebase Dynamic Links'nı kullanmak ya da Google Play'den uygulama içi satın alma verilerini içe aktarmak istediğinizde gereklidir. Bu codelab'in kapsamı bu değildir.
Register App'i (Uygulamayı Kaydet) tıklayın.
Firebase konsolunda yapılandırma dosyasını google-services.json indirin ve bu dosyayı uygulama projenizdeki android/app dizinine kopyalayıp yapıştırın.
Firebase konsoluna geri dönün, kalan adımları atlayın ve Firebase konsolunun ana sayfasına geri dönün.
Son olarak, Firebase tarafından oluşturulan google-services.json dosyasını okumak için Google Hizmetleri Gradle eklentisine ihtiyacınız vardır.
IDE'nizde veya düzenleyicinizde android/app/build.gradle dosyasını açın ve aşağıdaki satırı dosyanın son satırı olarak ekleyin:

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

android/build.gradle adlı kişiyi aç. Ardından, buildscript etiketi içine yeni bir bağımlılık ekleyin.

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

Uygulamanız hâlâ çalışıyorsa gradle'ın bağımlılıkları yüklemesine izin vermek için uygulamayı kapatıp yeniden oluşturun.

Android için uygulamanızı yapılandırma işlemini tamamladınız.

5. Web'de bir Analytics web arayüzü geliştirme ve özel etkinlikleri günlüğe kaydetme

Google Analytics ile bir web görünümündeki etkinlikleri izlemek için kodu hem web hem de Android uygulamasına eklemeniz gerekir.

Bu bölümde, web sayfasına hangi kodu yerleştirmeniz gerektiğini inceleyelim.

Öncelikle, bir HTML dosyasında kullanılacak bir JavaScript dosyası oluşturun. Örnek kodda, js dosyasının adı index.js'dir. Android için "AnayticsWebInterface", iOS için ise "messageHander" işlevini aşağıdaki kodda olduğu gibi çağırmak üzere "logEvent" işlevini oluşturmanız gerekir.

Ayrıca, etkinliği izlemek istediğiniz yerde bu işlevi HTML dosyasında aşağıdaki gibi çağırın.

Android uygulamasındaki WebView'da bir etkinlik tetiklendiğinde "window.AnalyticsWebInterface" çağrılır ve etkinliği uygulamadaki WebInterface koduna yönlendirir.

6. Web sayfası URL'si almak için web dizini barındırma

Uygulamanızdaki WebView'da bir web sayfasını çağırmadan önce web sayfası URL'sine ihtiyacınız vardır. Web sayfalarını barındırmak için birçok yöntem olacaktır. Bu codelab'de, yalnızca kolaylık sağlaması için Firebase Hosting hizmetini kullanacağız.

Terminalinizde web dizinini girin (ör. cd web) ve aşağıdaki komutları çalıştırın:
npm install -g firebase-tools

Bu komut, Firebase CLI'yi yükler.

firebase login
firebase init
Hangi özelliği ayarlamak istediğiniz sorulduğunda "Hosting"i seçin.
Android uygulamanız için ayarladığınız projeyi seçin.
Kalan tüm istemler için varsayılan değerleri kabul edin.
firebase deploy --only hosting - Firebase Hosting'e dağıtın.

Web sayfası URL'sini aldıktan sonra Android Studio'da uygulama projenize gidin ve bu adımda oluşturulan web URL'sini aşağıdaki gibi WebView'a ekleyin.

7. Android uygulamasında arayüz kodu geliştirme

WebView'daki etkinlikleri GA4F ile izlemek için kodu hem web'e hem de Android'e eklemeniz gerekir. Bu bölümde, WebView'daki web sayfasından etkinlikleri almak için Android uygulamasına hangi kodu yerleştirmeniz gerektiğini inceleyelim.

"AnalyticsWebInterface" sınıfını oluşturmak için "AnalyticsWebInterface.java" dosyasını oluşturun. Bu sınıfta, web JS dosyasındaki logEvent fonksiyonunu aşağıdaki gibi bağlamak için @JavascriptInterface kodunu yazmanız gerekir.

Ardından, WebView'u çağıran Etkinliğe aşağıdaki gibi bir JavaScript arayüzü eklemeniz gerekir.

Kodun tamamını görmek için lütfen "Kurulum" adımında GitHub'dan indirdiğiniz örnek koda bakın.

8. Etkinlikleri kontrol etme ve hatalarını ayıklama

Etkinliklerde hata ayıklamak için test cihazını bağladıktan veya emülatörü başlattıktan sonra Android Studio terminalinde aşağıdaki kodu kullanabilirsiniz.

> adb shell setprop debug.firebase.analytics.app [app package name]

> adb shell setprop log.tag.FA VERBOSE

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

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

Uygulamanızda "LOG EVENT 1"i tıklayın. Kodunuz düzgün çalışıyorsa aşağıdaki gibi bir günlük görürsünüz.

Firebase konsolunda kontrol etmek isterseniz Gerçek Zamanlı sekmesini de kullanabilirsiniz. Firebase konsoluna gidin ve aşağıdaki gibi Realtime sekmesini tıklayın.

Ardından, "Karşılaştırma ekle" işlevini kullanarak Android platform etkinliğini filtreleyin.

Kodunuz doğru şekilde uygulanmışsa Android uygulamasından gelen etkinlikleri Anlık sekmesinde görürsünüz.

Birkaç saat içinde, kaydedilen etkinliklerinizi Firebase konsolundaki Etkinlikler sekmesinde görebilirsiniz. Firebase konsolundaki Analytics bölümünde Etkinlikler sekmesini tıklamanız yeterlidir. Etkinliği tıklayarak etkinlik event1 içindeki değerleri de kontrol edebilirsiniz.

event1 etkinliğini Google Ads'e dönüşüm olarak aktarmak için Dönüşüm olarak işaretle anahtarını sağa kaydırarak etkinliği dönüşüm olarak işaretleyin.

Etkinlik Dönüşüm sekmesinde görünüyorsa etkinliği başarıyla dönüşüm olarak işaretlemişsinizdir. Google Ads artık bu etkinliği Firebase'den içe aktarabilir.

Hata ayıklama amacıyla Firebase DebugView'u kullanın. Daha fazla bilgi için Etkinlikte hata ayıklama başlıklı makaleyi inceleyin.

9. Google Ads'de analiz etkinliklerini içe aktarma

Firebase kurulumunuz tamamlandıktan sonra, işlem etkinlikleriyle uygulama kampanyalarını başlatmaya hazırsınız. Firebase'i Google Ads'e bağlayarak başlayın. Firebase'i Google Ads'e bağlayarak uygulama kampanyaları Firebase etkinliklerini içe aktarabilir. Bu süreç, Google Ads'in kitleleri hakkında daha fazla bilgi edinmesine olanak tanıyarak uygulama kampanyalarını artırmasına da yardımcı olur.

Proje Genel Bakış'ın yanındaki düğmeyi tıklayarak Firebase Ayarları'na gidin.
Entegrasyonlar sekmesinde Google Ads ve Bağla düğmesini görürsünüz. Bağla'yı ve ardından Devam'ı tıklayın.

Google Ads hesabını seçin.

Firebase bölümü tamamlandı.

Google Ads'e gidin.

Oturum açın ve özel etkinlikleri dönüşüm olarak içe aktarmak için Araçlar ve Ayarlar > Ölçüm > Dönüşümler'e gidin.
Yeni dönüşüm işlemleri eklemek için + düğmesini tıklayın.

Google Analytics 4 mülkleri (Firebase)'ni seçin ve Devam'ı tıklayın.

Dönüşüm olarak işaretlenen tüm analiz etkinliklerini görebilirsiniz. Daha önce uyguladığımız event1 etkinliğini bulun.

İşlemi işaretleyin, İçe aktar'ı ve ardından Devam et'i tıklayın.

event1 etkinliğini dönüşüm işlemi olarak ayarladıktan sonra event1 etkinliğini içeren uygulama işlemi kampanyaları yayınlayabilirsiniz.

10. İçe aktarılan etkinliklerle uygulama işlemi kampanyalarını başlatma

Mevcut hesabınızın kampanya sekmesine gidin ve + düğmesini tıklayarak yeni bir kampanya başlatın. [Yeni kampanya]'yı ve ardından Devam'ı tıklayın.
Uygulama yüklemeleri seçeneğiyle uygulama tanıtım kampanyası başlatın.

Uygulama adını, paket adını veya yayıncıyı yazarak uygulamanızı bulun.
Teklif verme bölümündeki açılır menüden Uygulama içi işlemler'i seçin.
Sağlanan listede özel etkinliğinizi bulun. Hedef işlem başına maliyet'i ayarlayın ve diğer seçenekleri tamamlayın.

Kampanya ayarlarınızı tamamlayın.

11. Tebrikler

Tebrikler, Firebase ve Google Ads'i başarıyla entegre ettiniz. Bu sayede, Firebase'den içe aktarılan etkinliklerle kampanya performansınızı artırabilirsiniz.

Öğrendikleriniz

Hibrit uygulamada GA4F'yi (Firebase için Google Analytics) başlatma
Web sayfasında özel etkinlik ve parametre oluşturma
WebView'deki bir web sayfasında bulunan etkinlikleri yerel koda yönlendirme
Hata ayıklama
Etkinlikleri içe aktarma ve bunları işleme yönelik kampanyalarda kullanma

12. Referanslar

Resmi Kılavuz

WebView'da Analytics'i kullanma - Firebase - Google

Firebase ve Google Ads kurulumu