Google Analytics ile Web Görünümünde Etkinlikleri İzleme

1. Giriş

Son Güncelleme: 2021-12-22

Ne oluşturacaksınız?

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

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'daki bir web sayfasında bulunan etkinlikleri yerel koda yönlendirme
• Hata ayıklama
• Etkinlikleri içe aktarma ve işlem kampanyalarında kullanma

Gerekenler

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

2. Hazırlanma

Kodu alma

Firebase kılavuz belgeleri, bu proje için ihtiyacımız olan örnek kodu bir GitHub deposunda sağlar.

Başlamak için kodu alıp tercih ettiğiniz geliştirme ortamında açmanız gerekir. 2 dizin kullanacağız : android, web. "android" dizini Android uygulaması, "web" dizini ise WebView aracılığıyla uygulama tarafından ç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

1. 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.

2. 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 Firebase yapılandırması

Android'i yapılandırma

1. Firebase konsolunda, soldaki gezinme menüsünden Proje Genel Bakış'ı seçin, ardından "Uygulamanıza Firebase ekleyerek başlayın" bölümünde Android düğmesini tıklayın.

Aşağıdaki ekranda gösterilen iletişim kutusunu görürsünüz.

2. Sağlamanız gereken önemli değer, aşağıdaki adımı kullanarak elde edeceğiniz Android paket adıdır.

İpucu: Paket ve uygulama kimlikleri hakkında daha fazla bilgi için Uygulama kimliğini ayarlama başlıklı makaleyi inceleyin.

3. Uygulama dizininizde android/app/src/main/AndroidManifest.xml dosyasını açın.
4. manifest öğesinde, package özelliğinin dize değerini bulun. Bu değer, Android paket adıdır (örneğin, com.yourcompany.yourproject). Bu değeri kopyalayın.
5. Firebase iletişim kutusunda, kopyalanan paket adını Android package name alanına yapıştırın.
6. Google ile oturum açma veya Firebase Dynamic Links'i kullanmayı planlamıyorsanız (bunların bu codelab'in bir parçası olmadığını unutmayın) burada SHA-1 anahtarına ihtiyacımız yoktur. Google Play'den in_app_purchase verilerini içe aktarmayı planlıyorsanız anahtarı daha sonra ayarlamanız gerekir.
7. Register App'i (Uygulamayı Kaydet) tıklayın.
8. Firebase'de devam ederek yapılandırma dosyasını indirme talimatlarını uygulayın google-services.json.

9. Uygulama dizininize gidin, ardından yeni indirdiğiniz google-services.json dosyasını android/app dizinine taşıyın.
10. Firebase konsoluna geri dönün, kalan adımları atlayın ve Firebase konsolunun ana sayfasına geri dönün.
11. Son olarak, Firebase tarafından oluşturulan google-services.json dosyasını okumak için Google Hizmetleri Gradle eklentisine ihtiyacınız vardır.
12. 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'

13. android/build.gradle dosyasını açın, ardından buildscript etiketi içinde yeni bir bağımlılık ekleyin:

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

14. 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'e hangi kodu yerleştirmeniz gerektiğini inceleyelim.

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

Aşağıdaki örnekte olduğu gibi, etkinliği izlemek istediğiniz yerde bu işlevi çağırın.

Android'deki web görünümünde etkinlik tetiklendiğinde "window.AnalyticsWebInterface" çağrılır ve etkinlik, yerel uygulamaya bağlanır.

6. Web sayfası URL'sini almak için web dizinini barındırın

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 vardır ancak bu codelab'de kolaylık sağlamak amacıyla yalnızca Firebase Hosting hizmetini kullanmanız konusunda size yol göstereceğiz.

• 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.

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

Google Analytics ile bir web görünümündeki etkinlikleri izlemek için kodu hem web'e hem de Android'e eklemeniz gerekir. Bu bölümde, 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 işlevini aşağıdaki gibi bağlamak için @JavascriptInterface kodunu yazmanız gerekir.

Ardından, web görünümünü çağıran Etkinliğe aşağıdaki gibi bir JavaScript arayüzü eklemeniz gerekir.

Kodun tamamını görmek için lütfen "Başlarken" adımında 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

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 simgesini dönüşüm olarak işaretlemek için Dönüşüm olarak işaretle anahtarını sağa kaydırın.

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-Flutter 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.

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

3. Google Ads hesabını seçin.

Dikkat: Hedef etkinlik bir dönüşüm etkinliği olarak işaretlenmemişse Google Ads bu etkinliği içe aktaramaz. Etkinliğin doğru şekilde dönüşüm olarak işaretlendiğinden emin olun.

Firebase bölümü tamamlandı.

Google Ads'e gidin.

1. 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.
2. Yeni dönüşüm işlemleri eklemek için + düğmesini tıklayın.

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

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

5. İş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 etkinliklerini 5'ten fazla kez tetikleme olasılığı yüksek olan kullanıcıları hedefleyebilen işlem kampanyaları başlatabilirsiniz.

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

Önemli: Bir uygulama kampanyasını başarıyla başlatmak için Google Play'de üretim düzeyinde bir uygulama edinmeniz gerekir. Ancak henüz yayınlamaya hazır değilseniz bu adımı şimdilik atlayabilirsiniz.

6. 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.
7. Uygulama yüklemeleri seçeneğiyle uygulama tanıtım kampanyası başlatın.

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

11. 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'daki bir web sayfasında bulunan etkinlikleri yerel koda yönlendirme
• Hata ayıklama
• Etkinlikleri içe aktarma ve işlem kampanyalarında kullanma