# Cómo mostrar una oferta en el sitio web con Web Placement

Un journey puede mostrar una oferta directamente en su sitio web a los usuarios que llegan a un paso, por ejemplo un banner de envío gratuito en el carrito de un usuario que dejó artículos en él. Esta guía construye un journey así de principio a fin: la oferta aparece en el carrito, los usuarios que ni hacen clic en ella ni realizan un pedido en un día reciben un push, y cada pedido posterior a la oferta cuenta como conversión.

El journey terminado tiene este aspecto:

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-1.webp" alt="Lienzo del journey: entrada Cart abandoned, Web Placement Free shipping in the cart, Wait for Trigger Clicked the offer? con las ramas Clicked, Ordered y Not triggered, un push en la rama Not triggered y tres salidas" width="928"/>

## Antes de crear el journey

* **Sitio web.** Sus desarrolladores han [preparado el sitio web](/es/product/customer-journey/journey-elements/channels/web-placement/#prepare-your-website): Web SDK 3.108.1 o posterior, `setUserId` para los visitantes que han iniciado sesión y el elemento en el que se inserta la oferta, por ejemplo `<div id="pw-cart-slot"></div>` en el carrito.
* **Eventos.** Su sitio o backend envía un evento cuando un usuario deja artículos en el carrito y cuando realiza un pedido. Esta guía usa `PW_AbandonedCart` y `PW_OrderCreated`. Envíe ambos eventos con el mismo User ID que el sitio web pasa a `setUserId`: la oferta se muestra y se elimina por User ID, así que con otro ID nunca aparece en el sitio o nunca desaparece después del pedido.
* **Contenido.** Tiene un [contenido web](/es/product/content/web-popup-content/web-content/) con la oferta y un botón o enlace, por ejemplo **Free shipping nudge with cart items**. Sin un botón o enlace, los usuarios no pueden hacer clic en la oferta, y la rama de clic nunca se activa.

## 1. Iniciar el journey cuando se abandona un carrito

1. Vaya a **Campaigns > Customer Journey Builder**.
2. Haga clic en **Create campaign** y luego en **Build a journey from scratch**.
3. Haga doble clic en el elemento **Trigger-based Entry**, que ya está en el lienzo.
4. En **Event**, seleccione `PW_AbandonedCart`.
5. Haga clic en **Save**.

Para más detalles, consulte [Cómo enviar una campaña por disparador](/es/tutorials/product-guides/how-to-create-campaigns-in-pushwoosh/how-to-send-a-triggered-campaign/).

## 2. Mostrar la oferta en el carrito

1. Conecte un elemento **Web Placement** a la entrada.
2. Haga doble clic en él y configure:
   * **Web pop-up content:** su oferta, por ejemplo **Free shipping nudge with cart items**.
   * **Inline** en lugar de **Popup**.
   * **CSS selector of the element:** el elemento del carrito, por ejemplo `#pw-cart-slot`.
   * **Lifetime:** cuánto tiempo la oferta espera al usuario, por ejemplo 2 días.
   * **Hide after an event:** actívelo y seleccione `PW_OrderCreated`, para que la oferta desaparezca en cuanto el usuario realice un pedido.
3. En **Preview**, seleccione un **Test device**: un navegador con su sitio abierto.
4. Haga clic en **Show on test device**.
5. En ese dispositivo, abra la página del carrito y haga clic en el botón de la oferta. Esto envía `PW_WebPlacementClick` a su aplicación. La lista de eventos muestra un evento solo después de que la aplicación lo ha recibido, así que sin este clic no podrá seleccionar el evento en el siguiente paso.
6. Haga clic en **Save**.

Para ver toda la configuración, consulte [Web Placement](/es/product/customer-journey/journey-elements/channels/web-placement/#configure-the-placement).

El usuario pasa al siguiente elemento en cuanto la oferta queda en cola para él, no después de que la vea o haga clic en ella.

## 3. Ramificar según lo que hizo el usuario

1. Conecte un elemento **Wait for Trigger** a **Web Placement**.
2. En **Waiting period**, introduzca 1 día.
3. En **Branch 1**, introduzca `Clicked` como nombre de la rama y seleccione el evento `PW_WebPlacementClick`.
4. Haga clic en **Add branch**. En **Branch 2**, introduzca `Ordered` como nombre de la rama y seleccione el evento `PW_OrderCreated`.
5. Haga clic en **Save**.

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-2.webp" alt="Configuración de Wait for Trigger con un período de espera de 1 día, la rama Clicked que espera PW_WebPlacementClick, la rama Ordered que espera PW_OrderCreated y la rama Not triggered" width="584"/>

Los usuarios que hacen clic en la oferta en un día van a **Clicked**, y los usuarios que realizan un pedido sin hacer clic van a **Ordered**. Todos los demás van a **Not triggered** cuando termina el día. Sin la rama **Ordered**, un usuario que hizo un pedido sin hacer clic seguiría recibiendo el recordatorio: **Hide after an event** solo retira la oferta del sitio y no mueve al usuario en el journey.

6. Conecte **Exit** a las ramas **Clicked** y **Ordered**.
7. Conecte un elemento **Push** a la rama **Not triggered**, con un recordatorio como "El envío gratuito de su carrito termina pronto", y luego conecte **Exit** a él. Los usuarios sin un dispositivo con push habilitado no reciben el recordatorio.

## 4. Contar los pedidos como conversiones

1. Haga clic en **Settings** y luego en **Conversion goals**.
2. En **Conversion period**, introduzca 3 días. Los pedidos realizados dentro de este período después de que el usuario sale del journey también cuentan.
3. En **Event**, seleccione `PW_OrderCreated`.
4. Haga clic en **Apply**.

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-3.webp" alt="Conversion goals con un período de conversión de 3 días y PW_OrderCreated como evento objetivo" width="616"/>

Para contar los clics en la oferta en lugar de los pedidos, seleccione `PW_WebPlacementClick`.

## 5. Lanzar y comprobar los resultados

1. Haga clic en **Launch campaign**.
2. En las estadísticas del journey, compruebe el elemento **Web Placement**: **Shown** es cuántas veces se mostró la oferta, **Interactions** es cuántas veces se hizo clic en ella. Consulte [Estadísticas del placement](/es/product/customer-journey/journey-elements/channels/web-placement/#placement-statistics).