---
title: "Etiquetas personalizadas en Paywall Builder"
description: "Aprende a usar etiquetas personalizadas en el Paywall Builder de Adapty para personalizar la experiencia del usuario y optimizar las conversiones."
---

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!"

:::warning

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](custom-tags-in-legacy-paywall-builder).

:::

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.

:::warning
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 \{#how-to-add-a-custom-tag-to-a-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:

1. 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](paywall-builder-tag-variables) reservadas para información de productos en Adapty.

  <img src="/assets/shared/img/1ea0b95-adding_custom_tag.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. 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.

   

  <img src="/assets/shared/img/4d43874-custom_tag_fallback.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Cómo usar etiquetas personalizadas en tu app \{#how-to-use-custom-tags-in-your-mobile-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:

<Tabs groupId="current-os" queryString>
<TabItem value="swift" label="Swift" default>

```swift showLineNumbers
let tagResolver = [
    "USERNAME": "John",
] 
  
let paywallConfiguration = try await AdaptyUI.getPaywallConfiguration(
    forPaywall: paywall,
    tagResolver: tagResolver // or any other AdaptyTagResolver protocol implementation
)
```
</TabItem>
<TabItem value="kotlin" label="Kotlin" default>

```kotlin showLineNumbers
val customTags = mapOf("USERNAME" to "John")
val tagResolver = AdaptyUiTagResolver { tag -> customTags[tag] }
```
</TabItem>
<TabItem value="java" label="Java" default>

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

<TabItem value="kmp" label="Kotlin Multiplatform" default>

```kotlin showLineNumbers
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
)
```
</TabItem>

<TabItem value="flutter" label="Flutter" default>

```dart showLineNumbers
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
}
```
</TabItem>

<TabItem value="unity" label="Unity (C#)" default>

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

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

</TabItem>

<TabItem value="rn" label="React Native" default>

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

</TabItem>
</Tabs>

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](ios-present-paywalls), [Android](android-present-paywalls), [React Native](react-native-present-paywalls), [Flutter](flutter-present-paywalls) o [Unity](unity-present-paywalls).