Utilice la plantilla de F2P

Descripción general

Este caso de uso y las herramientas prediseñadas de Xsolla permiten monetizar los juegos gratuitos (F2P) a través de su propia tienda web. En esta tienda, puede vender artículos virtuales, moneda virtual y lotes en un sitio web externo, independientemente de si su juego es para PC, consolas o es multiplataforma.

Funciones principales:

• La interfaz de pago flexible y seguro de Xsolla, que admite más de 1000 métodos de pago en todo el mundo.
• La interfaz de usuario de tienda es sencilla de personalizar mediante el creador de sitios web, sin necesidad de desarrollarla desde cero.
• Control absoluto sobre su catálogo de artículos, precios y promociones.
• Una amplia gama de herramientas de LiveOps; por ejemplo, promociones con descuentos, ventas adicionales y sistemas de recompensas.

Esta guía describe la configuración rápida y el lanzamiento de una tienda web para su juego gratuito F2P mediante las herramientas de Xsolla.

¿Quién puede utilizarlo?

Este caso de uso es perfecto para usted si:

• desarrolla o publica juegos para PC, consolas o tipo multiplataforma
• desea vender productos dentro del juego y moneda virtual a través de su propio sitio web
• pretende reducir las comisiones de plataforma
• quiere tener total control sobre el marketing, el embudo de ventas y los datos de los usuarios

Cómo establecerlo

1. Crear un proyecto en Cuenta del editor.
2. Crear un catálogo de artículos.
3. Crear un sitio web.
4. Establecer los bloques principales.
5. Configurar la lutenticación del usuario.
6. Configurar los webhooks para transferir compras al usuario.
7. Probar el sitio web.
8. Publicar el sitio web.

Crear un catálogo de artículos

Para crear un catálogo, puede:

• agregar elementos manualmente en Cuenta del editor
• llamar a los métodos API
• importar catálogo de artículos desde un archivo JSON

Para agregar un artículo virtual con la configuración básica al catálogo:

1. Abra su proyecto en Cuenta del editor y vaya a Items catalog > Virtual items.
2. En el menú desplegable, seleccione Create item.

3. Establezca la configuración básica del artículo en los siguientes campos:
   • Image (opcional)
   • SKU (ID único del artículo)
   • Item name
   • Description (opcional)

4. Especificar el precio del artículo:
   1. Establezca el conmutador Price in real currency en On.
   2. En el campo Default currency, cambie la moneda (opcional) y especifique el precio del artículo.
   3. Si cambió la moneda en el campo Default currency, seleccione la misma moneda en el campo Price in real currency.

5. Cambie el estado del artículo a Available.

6. Haga clic en Create item.

Crear sitio web

1. Abra su proyecto en Cuenta del editor.
2. En la página principal del proyecto, pulse en Change focus y seleccione Sell virtual goods in-game or online.

3. En el paso Optional: Set up a web storefront, haga clic en Create template.

4. En la pestaña Express, añada un enlace a la plataforma en la que está disponible su juego: Steam o Epic Games Store. Esto le permite crear rápidamente un sitio web personalizado para su juego: la imagen del juego, el título, el nombre del desarrollador y la combinación de colores se agregan automáticamente al crear el sitio web.

5. Haga clic en Generate web store.
6. Haga clic en Continue to set up.

Configurar los bloques principales

1. En la página principal del proyecto, en el foco Sell virtual goods in-game or online, vaya al paso Optional: Set up a web storefront, y haga clic en Customize site. Se le redirigirá al creador de sitios web, donde podrá personalizar el sitio creado.

Nota

Si ya ha cerrado la página principal del proyecto, vaya a la sección Storefronts > Websites y haga clic en Open Site Builder en el panel del sitio web creado. Para encontrarlo, puede consultar la hora de creación que aparece en el panel del sitio web.

2. Configure el bloque Header, en el que se muestran la información del usuario y los elementos de navegación del sitio web: Añada el logotipo de su juego o estudio.
3. Si hace falta, cambie los botones preestablecidos.

Ejemplo de bloque de encabezado:

3. Configure el bloque Lead block, en el que se muestra la información principal sobre su tienda:
   • Añada el nombre de la tienda, una descripción y una imagen de fondo si no quiere usar los que se suben automáticamente.
   • Agregar etiquetas.
   • Especifique las plataformas en las que está disponible el juego.
   • Edite los botones predeterminados o agregue otros nuevos si es necesario.

4. Configure el bloque Battle Pass (Pase de batalla) que muestra una oferta destacada:
   • Actualizar el fondo personalizado de la ficha.
   • Añadir un nombre y una descripción de la oferta.
   • Establezca el botón de compra: seleccione el artículo que se va a vender y, si es necesario, personalice el estilo del botón.

Ejemplo de bloque de pase de batalla:

5. Configure el bloque Store, en el que se muestran los artículos virtuales, los lotes y los paquetes de moneda virtual disponibles para la compra:
   • Si es preciso, elimine las secciones que se hayan agregado automáticamente o agregue otras nuevas.
   • En el bloque de la sección correspondiente, seleccione el tipo de artículo y el grupo en la lista desplegable para mostrarlos en la página.

Aviso

Si el tipo de artículo y el grupo seleccionados no se visualizan en el creador, asegúrese de que los grupos de artículos y los paquetes de moneda virtual requeridos tengan el estado Enabled; es decir, que puedan visualizarse en la tienda, y que los artículos estén incluidos en esos grupos. Para verificar o editar el estado de los artículos, vaya a Items catalog y abra una sección para el tipo de artículo que haga falta.

Ejemplo de bloque de Store:

6. Configure el bloque Footer (Pie de página) que contiene información legal y los ajustes de privacidad. Puede:
   • Elegir un diseño: columnas o filas.
   • Agregar un fondo personalizado.
   • Agregar enlaces a redes sociales.
   • Agregar restricciones de edad.

Ejemplo de bloque del Pie de página:

7. Vaya a la sección Cart settings (Configuración de la cesta) para configurar las funciones adicionales. Active los conmutadores correspondientes:
   • Show promo code field: permite a los usuarios aplicar un código promocional o un cupón en la interfaz de la cesta.
   • Login before shopping cart: abre la ventana de inicio de sesión cuando se accede a la cesta si el usuario no está autorizado.
8. Si es necesario, agregue páginas adicionales a su tienda, p. ej., con las últimas noticias sobre juegos. Para ello, haga lo siguiente:

1. 1. Añada las páginas necesarias siguiendo las instrucciones.
   2. En el bloque donde desea añadir un enlace a la página; p. ej., Header:
      1. Agregue un nuevo botón o vaya a editar uno existente.
      2. En la sección de configuración del botón, escoja una acción de clic: Open page.
      3. En la lista desplegable, seleccione una página que se abrirá al pulsar el botón.

Establecer la autenticación de usuarios

La autenticación permite a los usuarios comprar artículos en la tienda y ver ofertas personalizadas en el catálogo. La configuración de la autenticación a través de Xsolla Login brinda a los usuarios una amplia gama de métodos de autorización: mediante redes sociales y códigos o enlaces de un solo uso, o introduciendo un nombre de usuario y una contraseña. Además, puede personalizar el widget de Xsolla Login y establecer restricciones de edad para la autenticación.

Para establecer la autenticación del usuario mediante Xsolla Login:

1. Abra su proyecto en Cuenta del editor y vaya a la sección Storefronts > Websites.
2. Haga clic en Open Site Builder en el panel del sitio web requerido.
3. En el creador de sitios web, vaya al bloque Login settings.
4. Elijja Xsolla Login.
5. En la lista desplegable, seleccione New Login. Como consecuencia, se creará automáticamente el proyecto de Login con autenticación de usuario mediante correo electrónico y contraseña. Para establecer otro método de inicio de sesión, siga las instrucciones.

6. Conecte el almacenamiento de datos de usuario. En función de la opción de almacenamiento de datos del usuario, dispondrá de diferentes funciones del producto (consulte la sección Comparación de opciones de almacenamiento de datos de usuario).

Transferir la compra al usuario

Implemente la transferencia de compras al usuario en su aplicación usando la información sobre los detalles de la transacción y los artículos comprados recibidos en los webhooks de Xsolla. Si se registró en Cuenta del editor después del 22 de enero de 2025, para que la tienda y la gestión de pagos funcionen plenamente, implemente el procesamiento de los siguientes webhooks:

Probar el sitio web en modo aislador de proceso (sandbox)

Para probar el funcionamiento del sitio web en modo aislador de proceso (sandbox):

1. Abra su proyecto en Cuenta del editor y vaya a la sección Storefronts > Websites.
2. Haga clic en Open Site Builder en el panel del sitio web requerido.
3. Haga clic en Preview.

4. Seleccione un artículo y pulse en el botón de compra.
5. Elija el grupo de métodos de pago Card.
6. Introduzca los datos de la tarjeta bancaria de prueba. Introduzca cualquier valor en los campos restantes. También puede especificar datos incorrectos (número de tarjeta, fecha de caducidad o código CVV) para generar un error.

Publicar sitio web

1. Para mejorar el rendimiento de su sitio web:

1. 1. En el bloque SEO Settings, establezca los parámetros que usarán los motores de búsqueda y para la vista previa de la página en redes sociales: suba un favicon, especifique el título y la descripción de la tienda, añada una imagen de vista previa.
   2. Configurar la localización del sitio web.
   3. Haga los cambios necesarios en el dominio (opcional). Para ello, vaya a la sección Storefronts > Websites y haga clic en Configure en el panel de su sitio web. En la sección Domain, edite el valor Xsolla domain o configure su propio dominio.

2. Cuando haya hecho todos los cambios necesarios y su tienda web esté lista para el lanzamiento, pulse en Publish.

Configuración de tienda extendida

Puede utilizar las siguientes funciones extendidas para su tienda:

• Establecer precios regionales. Puede aumentar las ventas ajustando los precios a las distintas normativas de precios regionales.
• Cree y aplique campañas promocionales. Aumente sus ventas con descuentos, bonificaciones, códigos promocionales, ofertas por tiempo limitado y otras promociones.
• Aumente la fidelidad y la retención de los usuarios con funciones como recompensas diarias, un sistema de recompensas o cadenas de ofertas. Estas funciones incentivan a los usuarios para que vuelvan al juego con regularidad, que interactúen más con el contenido, y les ofrecen recompensas.
• Cree ofertas personalizadas para determinados usuarios autorizados; por ejemplo, un lote de bienvenida para nuevos usuarios.