Flow'ları ve Paywall'ları Getir - Flutter

Flow’unuzu tasarladıktan sonra, mobil uygulamanızda görüntüleyebilirsiniz. İlk adım, aşağıda açıklandığı gibi placement ile ilişkili flow veya paywall’ı ve görünüm yapılandırmasını almaktır.

Bu konunun, Adapty’nin builder’larında tasarlanmış flow’lar ve paywall’larla ilgili olduğunu unutmayın. Paywall’larınızı manuel olarak uyguluyorsanız lütfen Mobil uygulamanızda remote config paywall’ları için paywall’ları ve ürünleri getirme konusuna bakın.

Başlamadan önce

İhtiyacınız olanlar:

• Adapty Kontrol Paneli’nde ürünler: Ürünlerinizi oluşturun.
• Ürünlere sahip bir flow: Flow & Paywall Builder üzerinde oluşturun ve ürünleri ona atayın.
• Bir placement: Placement oluşturun ve flow’unuzu ona atayın.
• Adapty SDK kurulu: Flutter SDK kurulum kılavuzuna bakın.

Flow/paywall getirme

Eğer bir flow veya paywall’u builder’da tasarladıysanız, bunu kullanıcıya göstermek için mobil uygulama kodunuzda render işlemiyle uğraşmanıza gerek yok. Bu tür bir flow veya paywall, hem ne gösterileceğini hem de nasıl gösterileceğini içerir. Bununla birlikte, placement aracılığıyla ID’sini, görünüm yapılandırmasını almanız ve ardından mobil uygulamanızda sunmanız gerekmektedir.

Flow veya paywall’ı mümkün olduğunca erken — ideally sunarken değil, çok daha önce — çekin ve görünümünü oluşturun. createFlowView metodu görünüm yapılandırmasını yükler ve arka planda görselleri indirip önbelleğe almaya başlar. Bu metodu ne kadar erken çağırırsanız, indirmelerin tamamlanması için o kadar fazla zaman olur. Flow veya paywall’ı sunduğunuzda, yapılandırma ve görseller zaten önbellekte hazır olabilir.

Bir flow veya paywall almak için getFlow metodunu kullanın:

try {
  final flow = await Adapty().getFlow(placementId: 'YOUR_PLACEMENT_ID');
  // istenen flow/paywall
} on AdaptyError catch (adaptyError) {
  // hatayı işle
} catch (e) {
  // hatayı işle
}

Parametreler:

Yanıt parametreleri

Görünüm yapılandırmasını getir

Placement Flow & Paywall Builder veya eski Paywall Builder ile tasarlandıysa, Adapty kullanıcı arayüzünü sizin için render eder — getirilen flow’un hasViewConfiguration özelliği true olur. createFlowView ile view oluşturun, ardından flow veya paywall’ı gösterin. Placement, Builder arayüzü olmayan özel bir paywall ise (hasViewConfiguration değeri false), bunun yerine remote config paywall olarak ele alın.

try {
  final view = await AdaptyUI().createFlowView(flow: flow);
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Parametreler:

Görünümü elde ettikten sonra, flow/paywall’ı gösterin.

Varsayılan kitle için bir flow veya paywall alın, daha hızlı getirmek için

Genellikle flow’lar ve paywall’lar neredeyse anında getirilir, bu yüzden bu süreci hızlandırmak için endişelenmenize gerek yoktur. Ancak çok sayıda kitle ve placement’a sahip olduğunuz ve kullanıcılarınızın zayıf bir internet bağlantısı bulunduğu durumlarda, bir flow veya paywall getirmek istediğinizden daha uzun sürebilir. Bu gibi durumlarda, hiçbir şey göstermek yerine sorunsuz bir kullanıcı deneyimi sağlamak amacıyla varsayılan bir flow veya paywall görüntülemek isteyebilirsiniz.

Bunu çözmek için, belirtilen placement’ın Tüm Kullanıcılar kitlesi için flow veya paywall’ı getiren getFlowForDefaultAudience metodunu kullanabilirsiniz. Ancak önerilen yaklaşımın, yukarıdaki Flow/paywall getirme bölümünde ayrıntılı olarak açıklandığı üzere, getFlow metoduyla flow veya paywall getirmek olduğunu anlamak kritik önem taşır.

try {
  final flow = await Adapty().getFlowForDefaultAudience(placementId: 'YOUR_PLACEMENT_ID');
  // the requested flow/paywall
} on AdaptyError catch (adaptyError) {
  // handle error
} catch (e) {
  // handle unknown error
}

Öğeleri özelleştir

Flow/paywall’ınızdaki görsel ve videoları özelleştirmek için özel öğeleri uygulayın.

Hero görseller ve videolar önceden tanımlanmış ID’lere sahiptir: hero_image ve hero_video. Özel bir öğe paketinde, bu öğeleri ID’leri üzerinden hedefleyerek davranışlarını özelleştirirsiniz.

Diğer görseller ve videolar için Adapty kontrol panelinde özel bir ID belirlemeniz gerekir.

Örneğin şunları yapabilirsiniz:

• Bazı kullanıcılara farklı bir görsel veya video gösterme.
• Uzak ana görsel yüklenirken yerel bir önizleme görseli gösterme.
• Video başlamadan önce bir önizleme görseli gösterme.

Here’s an example of how you can provide custom assets via a simple dictionary:

final customAssets = {
    // Show a local image using a custom ID
    'custom_image': AdaptyCustomAsset.localImageAsset(
        assetId: 'assets/images/image_name.png',
    ),

    // Show a local video with a preview image
    'hero_video': AdaptyCustomAsset.localVideoAsset(
        assetId: 'assets/videos/custom_video.mp4',
    ),
};

try {
  final view = await AdaptyUI().createFlowView(
    flow: flow,
    customAssets: customAssets,
  );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Geliştirici tanımlı zamanlayıcıları ayarlama

Mobil uygulamanızda özel zamanlayıcılar kullanmak için createFlowView metoduna bir customTimers map’i geçirin. Her map anahtarı bir zamanlayıcı ID’si, değeri ise zamanlayıcının ne zaman sona ereceğini tanımlayan bir DateTime nesnesidir. İşte bir örnek:

try {
  final view = await AdaptyUI().createFlowView(
    flow: flow,
    customTimers: {
      'CUSTOM_TIMER_6H': DateTime.now().add(const Duration(seconds: 3600 * 6)),
      'CUSTOM_TIMER_NY': DateTime(2027, 1, 1), // New Year 2027
    },
  );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Bu örnekte, CUSTOM_TIMER_NY ve CUSTOM_TIMER_6H, Adapty Kontrol Paneli’nde ayarladığınız geliştirici tanımlı zamanlayıcıların Timer ID’leridir. customTimers haritası, uygulamanızın her zamanlayıcıyı doğru değerle dinamik olarak güncellemesini sağlar. Örneğin:

• CUSTOM_TIMER_NY: Zamanlayıcının bitiş zamanına (örneğin Yılbaşı Günü) kalan süre.
• CUSTOM_TIMER_6H: Kullanıcının flow’u açtığı andan itibaren başlayan 6 saatlik sürede kalan zaman.

Adapty Kontrol Paneli’nde eski Paywall Builder ile ödeme duvarınızın görsel kısmını tasarladıktan sonra, bunu mobil uygulamanızda gösterebilirsiniz. Bu sürecin ilk adımı, aşağıda açıklandığı gibi placement ile ilişkili paywall’ı ve görünüm yapılandırmasını almaktır.

Lütfen bu konunun Paywall Builder ile özelleştirilmiş paywall’lara atıfta bulunduğunu unutmayın. Paywall’larınızı manuel olarak uyguluyorsanız, Mobil uygulamanızda remote config paywall’ları için paywall ve ürünleri getirin konusuna bakın.

Paywall Builder ile tasarlanan paywall’ı getirme

Paywall Builder kullanarak bir paywall tasarladıysanız, bunu kullanıcıya göstermek için mobil uygulama kodunuzda render etme konusunda endişelenmenize gerek yok. Bu tür bir paywall, paywall içinde ne gösterileceğini ve nasıl gösterileceğini içerir. Bununla birlikte, placement aracılığıyla kimliğini, görünüm konfigürasyonunu almanız ve ardından mobil uygulamanızda sunmanız gerekir.

En iyi performansı sağlamak için, paywall’ı ve görünüm konfigürasyonunu mümkün olduğunca erken almanız kritik önem taşır; böylece görseller kullanıcıya sunulmadan önce indirmek için yeterli süre kalır.

Bir paywall almak için getPaywall metodunu kullanın:

try {
  final paywall = await Adapty().getPaywall(placementId: "YOUR_PLACEMENT_ID", locale: "en");
  // the requested paywall
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
}

Parametreler:

Yanıt parametreleri:

Paywall Builder ile tasarlanan paywall’ın görünüm konfigürasyonunu getirme

Paywall’ı aldıktan sonra, Paywall Builder kullanılarak oluşturulduğunu gösteren bir ViewConfiguration içerip içermediğini kontrol edin. Bu, paywall’ın nasıl gösterileceği konusunda size rehberlik edecektir. ViewConfiguration mevcutsa, bunu bir Paywall Builder paywall’ı olarak değerlendirin; değilse, remote config paywall olarak ele alın.

try {
  final view = await AdaptyUI().createPaywallView(
        paywall: paywall,
      );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Görünümü aldıktan sonra paywall’ı sunun.

Daha hızlı getirmek için varsayılan kitle paywall’ını alma

Genellikle paywall’lar neredeyse anında getirilir, bu nedenle bu süreci hızlandırma konusunda endişelenmenize gerek yoktur. Ancak çok sayıda kitle ve paywall’ınız varsa ve kullanıcılarınızın zayıf bir internet bağlantısı varsa, bir paywall’ı getirmek istediğinizden daha uzun sürebilir. Bu gibi durumlarda, hiç paywall göstermemek yerine sorunsuz bir kullanıcı deneyimi sağlamak için varsayılan bir paywall göstermek isteyebilirsiniz.

Bunu çözmek için, belirtilen placement’ın All Users kitlesi için paywall’ı getiren getPaywallForDefaultAudience metodunu kullanabilirsiniz. Ancak, önerilen yaklaşımın yukarıdaki Paywall Bilgisini Getirme bölümünde ayrıntılı olarak açıklandığı gibi getPaywall metoduyla paywall’ı getirmek olduğunu anlamak çok önemlidir.

try {
    final paywall = await Adapty().getPaywallForDefaultAudience(placementId: 'YOUR_PLACEMENT_ID');
} on AdaptyError catch (adaptyError) {
    // handle error
} catch (e) {
    // handle unknown error
}

Varlıkları özelleştirme

Paywall’ınızdaki görselleri ve videoları özelleştirmek için özel varlıkları uygulayın.

Hero görseller ve videolar önceden tanımlanmış kimliklere sahiptir: hero_image ve hero_video. Özel bir varlık paketinde, bu öğeleri kimliklerine göre hedefler ve davranışlarını özelleştirirsiniz.

Diğer görseller ve videolar için Adapty kontrol panelinde özel bir kimlik ayarlamanız gerekir.

Örneğin şunları yapabilirsiniz:

• Bazı kullanıcılara farklı bir görsel veya video gösterin.
• Uzak ana görsel yüklenirken yerel bir önizleme görseli gösterin.
• Bir video çalıştırmadan önce önizleme görseli gösterin.

İşte basit bir sözlük aracılığıyla özel varlıkları nasıl sağlayabileceğinize dair bir örnek:

final customAssets = {
    // Show a local image using a custom ID
    'custom_image': AdaptyCustomAsset.localImageAsset(
        assetId: 'assets/images/image_name.png',
    ),

    // Show a local video with a preview image
    'hero_video': AdaptyCustomAsset.localVideoAsset(
        assetId: 'assets/videos/custom_video.mp4',
    ),
};

try {
  final view = await AdaptyUI().createPaywallView(
    paywall: paywall,
    customAssets: customAssets,
  );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Geliştirici tanımlı zamanlayıcıları ayarlama

Mobil uygulamanızda özel zamanlayıcılar kullanmak için createPaywallView metoduna bir customTimers haritası geçirin. Haritadaki her anahtar bir zamanlayıcı ID’sidir ve değeri zamanlayıcının ne zaman sona ereceğini tanımlayan bir DateTime nesnesidir. İşte bir örnek:

try {
  final view = await AdaptyUI().createPaywallView(
        paywall: paywall,
        customTimers: {
          'CUSTOM_TIMER_6H': DateTime.now().add(const Duration(seconds: 3600 * 6)),
          'CUSTOM_TIMER_NY': DateTime(2025, 1, 1), // New Year 2025
        },
      );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Bu örnekte, CUSTOM_TIMER_NY ve CUSTOM_TIMER_6H, Adapty Kontrol Paneli’nde ayarladığınız geliştirici tanımlı zamanlayıcıların Timer ID’leridir. customTimers haritası, uygulamanızın her zamanlayıcıyı doğru değerle dinamik olarak güncellemesini sağlar. Örneğin:

• CUSTOM_TIMER_NY: Yeni Yıl Günü gibi zamanlayıcının bitiş anına kadar kalan süre.
• CUSTOM_TIMER_6H: Kullanıcının paywall’ı açtığı andan itibaren başlayan 6 saatlik sürede kalan zaman.