Flutter SDK'da flow verilerini işleme

Bir kullanıcı flow içindeki bir giriş alanına bir şeyler yazdığında, bir quiz’e cevap verdiğinde veya bir toggle’ı değiştirdiğinde, SDK bu değeri analitik callback’i aracılığıyla uygulamanıza iletir.

Uygulamalar bu verileri genellikle şunlar için kullanır:

• Kullanıcıları kendi backendlerinde kaydedin: Kullanıcının onboarding flow’unda girdiği e-posta adresi ve adı alarak, flow kapandığında hesaplarını oluşturun.
• Yanıtları ve tercihleri kaydedin: Kullanıcının seçtiklerini takip edin, böylece uygulamanız daha sonra buna göre davranabilsin — örneğin, özel attribute olarak Adapty profiline yazın.
• Gelecekteki flow’ları özelleştirin: Quiz yanıtlarını özel attribute olarak kaydedin, ardından bir sonraki placement’ı hedefleyin; böylece her segment farklı bir flow veya içindeki farklı bir paywall görsün.
• Üçüncü taraf analitik platformlarına aktarın: Yanıtları Amplitude, Mixpanel veya kullandığınız ürün analitiği platformuna iletin.

Girdi ve seçilebilir gruplar, değerlerini otomatik olarak raporlar. Kodunuzda girdileri birbirinden ayırt edebilmek için builder’da her girdiye anlamlı bir Element ID, her seçilebilir gruba ise bir Group ID verin.

Başlamadan önce

Şunlara ihtiyacınız var:

• Adapty SDK v4 veya üzeri: Flow callback’leri önceki sürümlerde mevcut değildir.
• Flow & Paywall Builder’da oluşturulmuş bir flow: Yalnızca flow’lar bu callback aracılığıyla giriş değerlerini raporlar.
• Yakın zamanda yayımlanmış bir flow sürümü: Bir flow, yalnızca bu özellik kullanıma sunulduktan sonra yayımlandıysa giriş değerlerini raporlar. Uygulamanıza hiçbir şey ulaşmıyorsa flow’un yeni bir sürümünü yayımlayıp tekrar deneyin.

Girdi değerlerini alma

Girdi değerleri, bir flow’dan gelen diğer tüm analitik etkinliklerle aynı callback üzerinden flow_user_input etkinlik adıyla ulaşır. AdaptyUI().setFlowsEventsObserver ile kaydettiğiniz observer’a flowViewDidReceiveAnalyticEvent metodunu uygulayın:

void flowViewDidReceiveAnalyticEvent(
  AdaptyUIFlowView view,
  String name,
  Map<String, dynamic> params,
) {
  handleFlowInput(name, params);
}

flowViewDidReceiveAnalyticEvent callback’i, ekran görüntüleme etkinlikleri de dahil olmak üzere bir flow’daki tüm analitik etkinlikleri iletir.

• name parametresi etkinlik adını içerir. Kullanıcı girişi etkinliklerini filtrelemek için name değerini flow_user_input ile karşılaştırın.
• element_type parametresi öğe kategorisini belirtir.
• Giriş değeri, öğe türüne göre farklı parametrelerde saklanır:
  • Metin alanları, seçiciler ve geçiş düğmeleri kullanıcının girişini value parametresinde saklar
  • Seçilebilir gruplar, aktif seçenekleri item_ids ve item_titles parametrelerinde bildirir

void handleFlowInput(String name, Map<String, dynamic> params) {
  if (name != 'flow_user_input') return;

  final elementId = params['element_id'] as String;

  // The screen the input sits on. Pair it with elementId to tell apart
  // two fields that share an Element ID on different screens.
  final screenId = params['instanceId'] as String?;

  switch (params['element_type'] as String) {
    case 'text_input':
    case 'email_input':
    case 'number_input':
    case 'phone_input':
      final text = params['value'] as String;
      break;
    case 'date_picker':
    case 'time_picker':
    case 'date_time_picker':
      // Unix time in milliseconds. Arrives as int on iOS and double on Android — read it through num.
      final date = DateTime.fromMillisecondsSinceEpoch((params['value'] as num).toInt());
      break;
    case 'single_choice':
      final optionId = (params['item_ids'] as List).cast<String>().first;
      break;
    case 'multi_choice':
      final optionIds = (params['item_ids'] as List).cast<String>();
      break;
    case 'toggle':
      final isOn = params['value'] as bool;
      break;
  }
}

Callback’in tetiklendiğini doğrulamak için kendi uygulamanızın test derlemesindeki input ile etkileşime girin. Callback handler’ınız bir event almıyorsa ön koşulları kontrol edin. Flow’un bu özellik kullanıma sunulduktan sonra yayımlandığından emin olun.

Uygulamanız girdiyi aldığında

Aşağıdaki öğeler bu olayı tetikler:

• Metin, e-posta, sayı ve telefon alanları
• Tarih, saat ve tarih-saat seçicileri
• Tekli seçim ve çoklu seçim grupları ile geçiş düğmeleri (toggle)

Aşağıdakiler tetiklemez:

• Parola alanları, ürün seçimleri ve sekme geçişleri
• Ekranlar arasında paylaşılan bir Header öğesinin içindeki giriş alanları
• Yinelenen veya eksik seçenek Element ID’lerine sahip ya da başka bir ekranda Group ID’si tekrarlanan seçilebilir gruplar. Bu tür bir grup, yanıtın bir kısmını göndermek yerine hiçbir şey göndermez.

Olay şu durumlarda tetiklenir:

• Bir alan odağı kaybettiğinde. Temizlenmiş bir alan boş dize bildirir; kullanıcının hiç düzenlemediği bir alan hiçbir şey bildirmez. Yer tutucu (placeholder) bir değer değildir. Kullanıcı alana geri dönür, düzenler ve tekrar ayrılırsa ikinci bir olay oluşur.
• Kullanıcı yeni bir değer seçtikten sonra seçiciyi kapattığında. Değiştirilmeden kapatılması hiçbir şey bildirmez.
• Kullanıcı bir seçenek veya geçiş düğmesine (toggle) dokunduğunda. Çoklu seçim olayı, seçili olan tüm seçenekleri listeler; bu nedenle son seçeneğin seçimini kaldırmak iki boş dizi gönderir.

Olay şu durumlarda tetiklenmez:

• Kullanıcı yazarken. Tuş vuruşu akışı yoktur; yalnızca odak ayrıldığında alanın tuttuğu değer bildirilir.
• Kullanıcı flow’u gönderdiğinde veya kapattığında. O anda hâlâ düzenlenmekte olan bir değer kaybolabilir; teslimat sınırlamaları bölümü, son ekranın bu duruma göre nasıl tasarlanacağını ele alır.
• Kullanıcı etkileşimi olmadan bir değer ayarlandığında. Set as default olarak işaretlenen bir seçenek, ekran açıldığında önceden seçili gelir; Set Variable eylemi ise başka bir etkileşimden bir seçenek belirleyebilir veya bir girişi doldurabilir. Bu durumların hiçbiri olay göndermez; önceden doldurulmuş bir giriş yalnızca kullanıcı onu düzenlediğinde bildirilir.

Ne alırsınız

Callback iki olay iletir. Yalnızca flow_user_input olaylarını görüntülemek için name alanına göre filtreleyin. Yanıt JSON yükü şu şekilde görünür:

{
  "name": "flow_user_input",
  "instanceId": "scr_registration",
  "isBackendEvent": false,
  "isCustomerEvent": true,
  "element_id": "email",
  "element_type": "email_input",
  "value": "jane@example.com"
}

Her elementin bildirdikleri:

Bir cevaba göre dallanmak için item_titles değil item_ids ile karşılaştırın. Başlık türetilmiş bir değerdir: ayarladıysanız seçeneğin Element Title’ı, yoksa varsayılan dilinizdeki metni, o da yoksa Element ID’si kullanılır. Flow’u başka bir dilde okuyan kullanıcı farklı bir metin görmüştür.

Olay örnekleri

Bu örnekler, her olayda mevcut olan özellikleri, yorumlarda açıklayıcı değerlerle birlikte göstermektedir.

void flowViewDidReceiveAnalyticEvent(
  AdaptyUIFlowView view,
  String name,
  Map<String, dynamic> params,
) {
  name;                      // 'flow_user_input'
  params['name'];            // 'flow_user_input'
  params['instanceId'];      // 'scr_J260KU5q'
  params['isCustomerEvent']; // true
  params['isBackendEvent'];  // false
  params['element_id'];      // 'email'
  params['element_type'];    // 'email_input'
  params['value'];           // 'jane@example.com'   (String)
}

void flowViewDidReceiveAnalyticEvent(
  AdaptyUIFlowView view,
  String name,
  Map<String, dynamic> params,
) {
  params['element_id'];      // 'birthday'
  params['element_type'];    // 'date_picker'
  params['value'];           // 645408000000   (Unix milliseconds — 1990-06-15, local midnight; int on iOS, double on Android)
}

void flowViewDidReceiveAnalyticEvent(
  AdaptyUIFlowView view,
  String name,
  Map<String, dynamic> params,
) {
  params['element_id'];      // 'experience'
  params['element_type'];    // 'single_choice'
  params['item_ids'];        // ['pro']   (List)
  params['item_titles'];     // ['I train professionally']
}

void flowViewDidReceiveAnalyticEvent(
  AdaptyUIFlowView view,
  String name,
  Map<String, dynamic> params,
) {
  params['element_id'];      // 'interests'
  params['element_type'];    // 'multi_choice'
  params['item_ids'];        // ['sports', 'music']   (List)
  params['item_titles'];     // ['Sports', 'Music']
}

void flowViewDidReceiveAnalyticEvent(
  AdaptyUIFlowView view,
  String name,
  Map<String, dynamic> params,
) {
  params['element_id'];      // 'reminders'
  params['element_type'];    // 'toggle'
  params['value'];           // true   (bool)
}

Teslimat ve sınırlamalar

• Son değer geçerlidir: Alan başına bir olay alırsınız; bu olay, kullanıcının tuş tuş değil, en sonunda girdiği değeri taşır. Kullanıcı bir alanı düzenlerse yalnızca son sürüm size ulaşır.
• Gönderim garantisi yoktur: Kullanıcılar flow boyunca ilerledikçe değerler size ulaşır ve kullanıcı her an çıkabilir. Bir yanıt kümesini tamamlanmış saymadan önce flow’un kapanmasını bekleyin.
• En iyi çaba teslimatı: Bir alan odaklanmışken veya bir seçici açıkken kullanıcı flow’u kapatır ya da uygulamayı arka plana alırsa o değer kaybolabilir.

Son alanın değerinin güvenilir olmasını sağlamak için flow’u; giriş veya seçici içermeyen bir ekranla bitirin ve bu ekran açıldığında otomatik olarak değil, açık bir kullanıcı eylemiyle flow’u kapatın. Son ekrana geçmek, önceki alandaki odağı kaldırır ve bu sayede değer gönderilir.

Her girdi değerini observer’ınız aldığında kaydedin ve flow kapandığında tüm seti gönderin. O anı yakalamak için aynı observer üzerinde flowViewDidDisappear metodunu uygulayın. Bu metot, kullanıcı flow’u tamamlayarak ya da yarıda bırakarak kapatması fark etmeksizin, flow görünümü kapatıldığında çalışır.

Kullanım Senaryoları

Kullanıcıları backend’inize kaydedin

Değerler geldikçe toplayın ve flow kapandığında tek bir istekle gönderin; böylece bir istek tüm yanıt setini taşır.

Görünüm, kullanıcı flow’u tamamlasa da yarıda bıraksa da kaybolur. Backend’inizi çağırmadan önce ihtiyaç duyduğunuz alanları kontrol edin.

Flow, backend’inizden gelen hataları gösteremez. Callback’in dönüş değeri yoktur ve SDK’nın çalışan bir flow’a veri gönderen bir metodu bulunmaz. Kayıt başarısız olursa, örneğin e-posta adresi zaten kullanımdaysa, flow kapandıktan sonra hatayı kendi arayüzünüzde gösterin.

final Map<String, String> flowAnswers = {};

void flowViewDidReceiveAnalyticEvent(
  AdaptyUIFlowView view,
  String name,
  Map<String, dynamic> params,
) {
  if (name != 'flow_user_input') return;

  final elementId = params['element_id'];
  final value = params['value'];
  if (elementId is! String || value is! String) return;

  flowAnswers[elementId] = value;
}

void flowViewDidDisappear(AdaptyUIFlowView view) {
  if (!flowAnswers.containsKey('email')) return;

  // Send flowAnswers to your backend here to create the account.

  flowAnswers.clear();
}

Kullanıcı profillerini verilerle zenginleştirin

Kullanıcının girdiği bilgileri profiliyle ilişkilendirmek ve aynı bilgileri iki kez sormamak için değerler geldikçe kullanıcı profilini güncelleyin.

Örneğin, flow’unuzda Element ID’si name olan bir metin girişi ve Element ID’si email olan bir e-posta girişi varsa:

void handleFlowInput(String name, Map<String, dynamic> params) async {
  if (name != 'flow_user_input') return;

  final value = params['value'];
  if (value is! String) return;

  final builder = AdaptyProfileParametersBuilder();

  switch (params['element_id'] as String) {
    case 'name':
      builder.setFirstName(value);
      break;
    case 'email':
      builder.setEmail(value);
      break;
    default:
      return;
  }

  try {
    await Adapty().updateProfile(builder.build());
  } on AdaptyError catch (adaptyError) {
    // handle the error
  }
}

Daha sonra gösterilen flow’ları özelleştirme

Sınav yanıtları, kullanıcının daha sonra bir placement’ta göreceği içeriği de belirleyebilir — farklı bir flow ya da içindeki farklı bir paywall.

Örneğin, onboarding flow’unuzda kullanıcılara spor deneyimlerini sorun, ardından her gruba farklı ürünler ve metinlerle kendi flow’unu gösterin.

1. Flow’unuza bir sınav ekleyin. Seçilebilir gruba experience Group ID’sini ve her seçeneğe anlamlı bir Element ID verin.
2. Yanıtları işleyin ve kullanıcı için özel özellikler ayarlayın.

void handleFlowInput(String name, Map<String, dynamic> params) async {
  if (name != 'flow_user_input') return;
  if (params['element_id'] != 'experience') return;

  final optionId = (params['item_ids'] as List).cast<String>().first;

  final builder = AdaptyProfileParametersBuilder();
  // Set the custom attribute 'experience' to the option the user selected
  // (beginner, amateur, or pro).
  builder.setCustomStringAttribute(optionId, 'experience');

  try {
    await Adapty().updateProfile(builder.build());
  } on AdaptyError catch (adaptyError) {
    // handle the error
  }
}

3. Her özel nitelik değeri için bir segment oluşturun.
4. Bir placement oluşturun ve her segment için bir kitle ekleyin.
5. Uygulamanızda o placement için flow’u görüntüleyin.