Flow ve paywall'ları alma - Capacitor

Flow’unuzu tasarladıktan sonra onu 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’lar için geçerli olduğunu lütfen unutmayın. Paywall’larınızı manuel olarak uyguluyorsanız, Mobil uygulamanızda remote config paywall’ları için paywall ve ürünleri getirme konusuna bakınız.

Başlamadan önce

İhtiyacınız olanlar:

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

Flow/paywall getirme

Bir flow veya paywall’ı builder’da tasarladıysanız, kullanıcıya göstermek için onu mobil uygulama kodunuzda render etmeniz gerekmez. Bu tür bir flow veya paywall, içinde neyin ve nasıl gösterileceğini zaten 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 gerekir.

Flow veya paywall’ı mümkün olduğunca erken — ideal olarak sunmadan çok önce — çekin ve view’unu oluşturun. createFlowView metodu, view yapılandırmasını yükler ve arka planda görsellerini indirip önbelleğe almaya başlar. Bu metodu ne kadar erken çağırırsanız, indirmelerin tamamlanması için o kadar çok zaman kalır. 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 {
  const flow = await adapty.getFlow({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // istenen flow/paywall
} catch (error) {
  // hatayı işle
}

Parametreler:

Ürün ID’lerini kodun içine gömmeyин. Kodun içine gömmeniz gereken tek şey placement ID’sidir. Flow’lar ve paywall’lar uzaktan yapılandırıldığından, ürün sayısı ve mevcut teklifler her an değişebilir. Uygulamanız bu değişiklikleri dinamik olarak ele almalıdır; bir paywall bugün iki ürün döndürüyorsa ve yarın üç ürün döndürüyorsa, kod değişikliği yapmadan hepsini gösterin.

Yanıt parametreleri:

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

Eğer placement, Flow & Paywall Builder veya eski Paywall Builder ile tasarlandıysa, Adapty arayüzü sizin için oluşturur. createFlowView ile görünümü oluşturun, ardından flow veya paywall’ı sunun. Placement, Builder arayüzü olmayan özel bir paywall ise bunun yerine remote config paywall olarak ele alın.

hasViewConfiguration bayrağı, görünümü oluşturmadan önce ikisini birbirinden ayırt etmenizi sağlar:

if (flow.hasViewConfiguration) {
  const view = await createFlowView(flow);
  await view.present();
} else {
  // Render your own screen from flow.remoteConfigs and flow.paywalls
}

Capacitor SDK’da doğrudan createFlowView çağırın — önce görünüm yapılandırmasını almanız gerekmez.

try {
  const view = await createFlowView(flow);
} catch (error) {
  // handle the error
}

Parametreler:

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

Varsayılan kitle için flow veya paywall getirerek daha hızlı yükleme sağlayın

Genellikle flow’lar ve paywall’lar neredeyse anında getirilir, bu nedenle bu süreci hızlandırmak için endişelenmenize gerek yoktur. Ancak çok sayıda kitle ve placement’ınız varsa ve kullanıcılarınızın internet bağlantısı zayıfsa, bir flow veya paywall getirmek istediğinizden daha uzun sürebilir. Bu gibi durumlarda, hiçbir şey göstermemek 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 All Users kitlesi için flow veya paywall’ı getiren getFlowForDefaultAudience metodunu kullanabilirsiniz. Ancak şunu anlamak kritik önem taşır: önerilen yaklaşım, yukarıdaki Flow/paywall getirme bölümünde ayrıntılı olarak açıklanan getFlow metoduyla flow veya paywall’ı getirmektir.

try {
  const flow = await adapty.getFlowForDefaultAudience({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // the requested flow/paywall
} catch (error) {
  // handle the error
}

Varlıkları özelleştirme

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

Hero görseller ve videolar, önceden tanımlanmış ID’lere sahiptir: hero_image ve hero_video. Özel bir varlık paketinde bu öğeleri ID’leri aracılığıyla hedefler ve 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östermek.
• Uzaktaki ana görsel yüklenirken yerel bir önizleme görseli göstermek.
• Video oynatılmadan önce bir önizleme görseli göstermek.

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

const customAssets: Record<string, AdaptyCustomAsset> = {
  'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
  'hero_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'custom_video.mp4' },
      android: { relativeAssetPath: 'videos/custom_video.mp4' }
    }
  }
};

const view = await createFlowView(flow, { customAssets });

Adapty Kontrol Paneli’nde eski Paywall Builder ile paywallınızın görsel kısmını tasarladıktan sonra, onu mobil uygulamanızda gösterebilirsiniz. Bu süreçteki 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ş paywallları kapsadığını unutmayın. Remote config paywalllarını getirme hakkında bilgi için Mobil uygulamanızda remote config paywallları için paywall ve ürünleri getirme konusuna bakın.

Paywall Builder ile Tasarlanmış Paywall’ı Getirme

Paywall Builder ile bir paywall tasarladıysanız, bunu kullanıcıya göstermek için mobil uygulama kodunuzda render etmeniz gerekmez. Böyle bir paywall, hem gösterilecek içeriği hem de nasıl gösterileceğini içerir. Bununla birlikte, paywall’ın ID’sini placement aracılığıyla, görünüm yapılandırmasını ise ayrıca almanız ve ardından mobil uygulamanızda sunmanız gerekir.

En iyi performansı sağlamak için, paywall’u ve onun görünüm yapılandırmasını mümkün olduğunca erken almanız kritik önem taşır; böylece görseller kullanıcıya sunulmadan önce indirilmesi için yeterli zaman olur.

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

try {
  const paywall = await adapty.getPaywall({
    placementId: 'YOUR_PLACEMENT_ID',
    locale: 'en',
  });
  // istenen paywall
} catch (error) {
  // hatayı işle
}

Parametreler:

Ürün ID’lerini sabit kodlamayın. Sabit kodlamanız gereken tek ID, placement ID’sidir. Paywall’lar uzaktan yapılandırıldığından, ürün sayısı ve mevcut teklifler her an değişebilir. Uygulamanız bu değişiklikleri dinamik olarak ele almalıdır; bir paywall bugün iki ürün, yarın üç ürün döndürüyorsa, kod değişikliği yapmadan hepsini göstermelidir.

Yanıt parametreleri:

Paywall Builder ile tasarlanmış paywall’ın görünüm konfigürasyonunu alma

Paywall’ı aldıktan sonra, Paywall Builder kullanılarak oluşturulduğunu belirten ViewConfiguration içerip içermediğini kontrol edin. Bu, paywall’ı nasıl göstereceğiniz konusunda size yol gösterecektir. ViewConfiguration mevcutsa Paywall Builder paywall’ı olarak işleyin; değilse, remote config paywall olarak ele alın.

Capacitor SDK’da, view configuration’ı manuel olarak önceden almadan doğrudan createPaywallView metodunu çağırın.

if (paywall.hasViewConfiguration) {
  try {
    const view = await createPaywallView(paywall);
  } catch (error) {
    // handle the error
  }
} else {
  // use your custom logic
}

Parametreler:

Görünüme sahip olduktan sonra paywallı gösterin.

Varsayılan kitle için paywallı daha hızlı getir

Genellikle paywalllar 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 paywallınız varsa ve kullanıcılarınızın internet bağlantısı zayıfsa, bir paywallı getirmek istediğinizden daha uzun sürebilir. Bu durumlarda, hiç paywall göstermemek yerine sorunsuz bir kullanıcı deneyimi sağlamak için varsayılan bir paywall görüntülemek isteyebilirsiniz.

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

try {
  const paywall = await adapty.getPaywallForDefaultAudience({
    placementId: 'YOUR_PLACEMENT_ID',
    locale: 'en',
  });
  // istenen paywall
} catch (error) {
  // hatayı işleyin
}

Varlıkları özelleştirin

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

Hero görseller ve videoların önceden tanımlanmış ID’leri vardır: hero_image ve hero_video. Özel bir varlık paketinde bu öğeleri ID’lerine göre hedefleyerek davranışlarını özelleştirirsiniz.

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

Örneğin şunları yapabilirsiniz:

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

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

const customAssets: Record<string, AdaptyCustomAsset> = {
  'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
  'hero_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'custom_video.mp4' },
      android: { relativeAssetPath: 'videos/custom_video.mp4' }
    }
  }
};

view = await createPaywallView(paywall, { customAssets });