Etiquetas personalizadas en Paywall Builder

Las etiquetas personalizadas te permiten evitar crear paywalls separados para distintos escenarios. Imagina un único paywall que se adapta dinámicamente según los datos del usuario. Por ejemplo, en lugar de un genérico “¡Hola!”, podrías saludar a los usuarios de forma personal con “¡Hola, Juan!” o “¡Hola, Ana!”

Esta sección describe el nuevo Paywall Builder, compatible con los SDKs de iOS, Android y React Native versión 3.0 o superior, y con los SDKs de Flutter y Unity versión 3.3.0 o superior. Para información sobre el Paywall Builder heredado compatible con el SDK de Adapty v2.x o anterior, consulta Etiquetas personalizadas en el Paywall Builder heredado.

Aquí tienes algunas formas de usar las etiquetas personalizadas:

Mostrar el nombre o el correo electrónico del usuario en el paywall.
Mostrar el día de la semana actual para impulsar las ventas (p. ej., “Feliz jueves”).
Añadir detalles personalizados sobre los productos que vendes (como el nombre de un programa de fitness o un número de teléfono en una app VoIP).

Las etiquetas personalizadas te ayudan a crear un paywall flexible que se adapta a distintas situaciones, haciendo que la interfaz de tu app sea más personalizada y atractiva.

Asegúrate de añadir textos de respaldo para cada línea con etiquetas personalizadas.

Recuerda incluir textos de respaldo para cada línea que contenga etiquetas personalizadas.

En algunos casos, tu app puede no saber con qué reemplazar una etiqueta personalizada, especialmente si los usuarios tienen una versión antigua del SDK de AdaptyUI. Para evitarlo, añade siempre un texto de respaldo que sustituya las líneas que contengan etiquetas desconocidas. Sin esto, los usuarios podrían ver las etiquetas mostradas como código (<USERNAME/>).

Cómo añadir una etiqueta personalizada a un paywall

Puedes añadir una o más etiquetas personalizadas a cualquier línea de texto en el Paywall Builder.

Para añadir una etiqueta personalizada:

Introduce la etiqueta personalizada con el formato <CUSTOM_TAG/> o escribe un corchete angular de apertura (<) en la línea de texto. El sistema sugerirá la etiqueta en el formato correcto.

Algunos aspectos a tener en cuenta:
- En el Paywall Builder de Adapty, las etiquetas personalizadas van entre corchetes angulares (<CUSTOM_TAG/>), pero en el código de tu app deben referenciarse directamente (CUSTOM_TAG).
- Las etiquetas personalizadas distinguen entre mayúsculas y minúsculas.
- Las etiquetas personalizadas no pueden coincidir con ninguna de las variables de etiqueta reservadas para información de productos en Adapty.

Después de añadir la etiqueta personalizada, asegúrate de introducir un texto de respaldo. Este texto aparecerá en tu app si no reconoce una etiqueta personalizada concreta, evitando que los usuarios vean la etiqueta mostrada como código. El texto de respaldo reemplaza toda la línea que contiene la etiqueta personalizada.

Cómo usar etiquetas personalizadas en tu app

Para usar etiquetas personalizadas en tu app, crea un objeto tagResolver —un diccionario o mapa que asocia etiquetas personalizadas con los valores de cadena que las sustituirán cuando se renderice el paywall. Aquí tienes un ejemplo:

let tagResolver = [
    "USERNAME": "John",
] 
  
let paywallConfiguration = try await AdaptyUI.getPaywallConfiguration(
    forPaywall: paywall,
    tagResolver: tagResolver // or any other AdaptyTagResolver protocol implementation
)

val customTags = mapOf("USERNAME" to "John")
val tagResolver = AdaptyUiTagResolver { tag -> customTags[tag] }

Map<String, String> customTags = new HashMap<>();
customTags.put("USERNAME", "John");
AdaptyUiTagResolver tagResolver = customTags::get;

val customTags = mapOf(
    "USERNAME" to "John",
    "CUSTOM_TAG_NAME" to "Walter White",
    "CUSTOM_TAG_PHONE" to "+1 234 567890"
)

val view = AdaptyUI.createPaywallView(
    paywall = paywall,
    customTags = customTags
)

final customTags = {
  'USERNAME': 'John',
};

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

var parameters = new AdaptyUICreateViewParameters()
  .SetCustomTags(
    new Dictionary<string, string> {
      { "CUSTOM_TAG_NAME", "John Appleseed" }
    }
  )

AdaptyUI.CreateView(paywall, parameters, (view, error) => {
  // handle the result
});

let customTags: Record<string, string> = { "USERNAME": "John" }
//and then you can pass it to createPaywallView as follows:
view = await createPaywallView(paywall, { customTags })

En este ejemplo, USERNAME es una etiqueta personalizada que introduciste en el dashboard de Adapty como <USERNAME/>. El tagResolver garantiza que tu app reemplace dinámicamente esta etiqueta personalizada por el valor especificado, como John.

Te recomendamos crear y rellenar el tagResolver justo antes de presentar tu paywall. Una vez listo, pásalo al método de AdaptyUI que uses para mostrar el paywall. Puedes leer más sobre cómo presentar paywalls en iOS, Android, React Native, Flutter o Unity.