Crear un paywall con alternador de prueba gratuita

Un alternador de prueba gratuita te permite cambiar un paywall entre productos con prueba gratuita y productos sin ella. Pero el alternador en sí es solo un interruptor: activado o desactivado. Tú escribes las reglas que muestran las tarjetas correctas y las reglas que cambian qué producto está seleccionado.

Esta receta te muestra cómo configurar estas reglas y crear un paywall completamente funcional con toggle.

Antes de empezar

Important

Si quieres que la prueba sea opcional (lo cual es necesario para usar el toggle de prueba), no crees una oferta introductoria. En iOS, las ofertas introductorias se aplican automáticamente a todos los usuarios elegibles. No puedes desactivarlas. Usa una oferta promocional en su lugar. Consulta Cómo funciona Adapty con las ofertas.

1. Añadir las tarjetas de producto

  1. Haz clic en el menú + > Paywall & Commerce > Products y elige un preset.
  2. Selecciona una tarjeta — en el canvas o en el panel Layers. Asigna un producto a la tarjeta y deja Select offer (optional) vacío.
  3. Repite el proceso con cada plan que vendas: una tarjeta por plan, sin la prueba gratuita.
  4. Duplica cada tarjeta. En cada copia, elige la oferta de prueba en Select offer (optional).

Ahora cada plan tiene dos tarjetas que apuntan al mismo producto: una con la oferta y otra sin ella.

Cuatro tarjetas de producto en el lienzo — anual y mensual, cada una con y sin prueba gratuita — todas visibles antes de establecer ninguna regla de visibilidad

2. Añade el toggle de prueba

  1. Haz clic en + > Paywall & Commerce > Trial Toggle.

    The trial toggle added to the paywall screen and selected on the canvas
  2. Asegúrate de que el toggle pertenece a un grupo seleccionable del tipo correcto. Haz clic en un área vacía del canvas para abrir Screen settings. En Selectable groups, abre trial_toggle, establece Group Type en Toggle y haz clic en Save. El cuadro de diálogo muestra la variable que usaremos para detectar si el toggle está activado: trial_toggle.isActive.

    El cuadro de diálogo Editar grupo con el Tipo de grupo configurado como Toggle y la variable de condición trial_toggle.isActive debajo
  3. Edita la etiqueta del toggle.

Deja el toggle desactivado por defecto. Un toggle de prueba preseleccionado puede provocar el rechazo en la App Store por considerarse un patrón oscuro — consulta Toggles.

3. Muestra las tarjetas correctas según el estado del toggle

En la pestaña Design de cada tarjeta, en Visibility, selecciona Conditional y define su condición:

TarjetaCondición
Con el trialtrial_toggle.isActive Equals True
Sin el trialtrial_toggle.isActive Equals False
The Yearly_notrial card selected with Visibility set to Conditional and the Show element if popover showing trial_toggle.isActive Equals False

4. Selecciona una tarjeta visible cuando cambia el toggle

Las tarjetas ahora cambian con el toggle, pero el producto seleccionado no. Una tarjeta que se vuelve invisible sigue seleccionada, y la acción Purchase sigue apuntando a ella — así que un usuario que activa el período de prueba podría seguir siendo cobrado.

Añade una Conditional Action al toggle para que reinicie la selección a una tarjeta visible en cada toque.

  1. En el panel Layers, selecciona el contenedor Trial toggle.
  2. Abre la pestaña Interactions, añade el disparador On tap y una Conditional Action:
BloqueQué configurar
iftrial_toggle.isActive Equals True
thenSelect Product, apuntando a una tarjeta con el trial
elseSelect Product, apuntando al mismo producto sin el trial
El disparador On Tap del toggle con una Acción Condicional: trial_toggle.isActive Equals True selecciona una tarjeta, y la rama else selecciona la otra

5. Actualiza la etiqueta del botón

La llamada a la acción debe mostrar un texto diferente cuando el período de prueba está activo.

  1. Selecciona el elemento de texto del botón.

  2. En la pestaña Design, dentro de Content, selecciona Conditional y haz clic en Edit conditions.

  3. Rellena los bloques:

    BloqueQué configurar
    iftrial_toggle.isActive Equals True
    thenLa etiqueta para el período de prueba, por ejemplo Start your free trial
    elseLa etiqueta estándar, por ejemplo Purchase
El cuadro de diálogo Editar texto condicional con trial_toggle.isActive Igual a True mostrando Start your free trial, y Purchase en la rama else

Para más información sobre el texto condicional, consulta Añadir texto condicional.