# Como mostrar uma oferta no site com Web Placement

Um journey pode mostrar uma oferta diretamente no seu site para os usuários que chegam a uma etapa, por exemplo um banner de frete grátis no carrinho de um usuário que deixou itens nele. Este guia monta esse journey do início ao fim: a oferta aparece no carrinho, os usuários que não clicam nela nem fazem um pedido em um dia recebem um push, e todo pedido feito depois da oferta conta como conversão.

O journey pronto fica assim:

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-1.webp" alt="Tela do journey: entrada Cart abandoned, Web Placement Free shipping in the cart, Wait for Trigger Clicked the offer? com as ramificações Clicked, Ordered e Not triggered, um push na ramificação Not triggered e três saídas" width="928"/>

## Antes de criar

* **Site.** Seus desenvolvedores [prepararam o site](/pt/product/customer-journey/journey-elements/channels/web-placement/#prepare-your-website): Web SDK 3.108.1 ou posterior, `setUserId` para visitantes conectados e o elemento em que a oferta é inserida, por exemplo `<div id="pw-cart-slot"></div>` no carrinho.
* **Eventos.** Seu site ou backend envia um evento quando um usuário deixa itens no carrinho e quando ele faz um pedido. Este guia usa `PW_AbandonedCart` e `PW_OrderCreated`. Envie os dois eventos com o mesmo User ID que o site passa para `setUserId`: a oferta é exibida e removida por User ID, então com outro ID ela nunca aparece no site ou nunca desaparece depois do pedido.
* **Conteúdo.** Você tem um [conteúdo web](/pt/product/content/web-popup-content/web-content/) com a oferta e um botão ou link, por exemplo **Free shipping nudge with cart items**. Sem um botão ou link, os usuários não conseguem clicar na oferta, e a ramificação de clique nunca é acionada.

## 1. Iniciar o journey quando um carrinho é abandonado

1. Acesse **Campaigns > Customer Journey Builder**.
2. Clique em **Create campaign** e depois em **Build a journey from scratch**.
3. Clique duas vezes no elemento **Trigger-based Entry**, que já está na tela.
4. Em **Event**, selecione `PW_AbandonedCart`.
5. Clique em **Save**.

Para mais detalhes, consulte [Como enviar uma campanha baseada em gatilho](/pt/tutorials/product-guides/how-to-create-campaigns-in-pushwoosh/how-to-send-a-triggered-campaign/).

## 2. Mostrar a oferta no carrinho

1. Conecte um elemento **Web Placement** à entrada.
2. Clique duas vezes nele e defina:
   * **Web pop-up content:** sua oferta, por exemplo **Free shipping nudge with cart items**.
   * **Inline** em vez de **Popup**.
   * **CSS selector of the element:** o elemento no carrinho, por exemplo `#pw-cart-slot`.
   * **Lifetime:** quanto tempo a oferta espera pelo usuário, por exemplo 2 dias.
   * **Hide after an event:** ative essa opção e selecione `PW_OrderCreated`, para que a oferta desapareça assim que o usuário fizer um pedido.
3. Em **Preview**, selecione um **Test device**: um navegador com seu site aberto.
4. Clique em **Show on test device**.
5. Nesse dispositivo, abra a página do carrinho e clique no botão da oferta. Isso envia `PW_WebPlacementClick` para o seu aplicativo. A lista de eventos mostra um evento somente depois que o aplicativo o recebe, então sem esse clique você não consegue selecionar o evento na próxima etapa.
6. Clique em **Save**.

Para todas as configurações, consulte [Web Placement](/pt/product/customer-journey/journey-elements/channels/web-placement/#configure-the-placement).

O usuário avança para o próximo elemento assim que a oferta entra na fila para ele, e não depois que ele a vê ou clica nela.

## 3. Ramificar pelo que o usuário fez

1. Conecte um elemento **Wait for Trigger** ao **Web Placement**.
2. Em **Waiting period**, digite 1 dia.
3. Em **Branch 1**, digite `Clicked` como nome da ramificação e selecione o evento `PW_WebPlacementClick`.
4. Clique em **Add branch**. Em **Branch 2**, digite `Ordered` como nome da ramificação e selecione o evento `PW_OrderCreated`.
5. Clique em **Save**.

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-2.webp" alt="Configurações do Wait for Trigger com período de espera de 1 dia, a ramificação Clicked aguardando PW_WebPlacementClick, a ramificação Ordered aguardando PW_OrderCreated e a ramificação Not triggered" width="584"/>

Os usuários que clicam na oferta em até um dia vão para **Clicked**, e os usuários que fazem um pedido sem clicar vão para **Ordered**. Todos os demais vão para **Not triggered** quando o dia termina. Sem a ramificação **Ordered**, um usuário que fez um pedido sem clicar ainda receberia o lembrete: **Hide after an event** remove apenas a oferta do site e não move o usuário no journey.

6. Conecte **Exit** às ramificações **Clicked** e **Ordered**.
7. Conecte um elemento **Push** à ramificação **Not triggered**, com um lembrete como "O frete grátis do seu carrinho termina em breve", e depois conecte **Exit** a ele. Usuários sem um dispositivo com push ativado não recebem o lembrete.

## 4. Contar os pedidos como conversões

1. Clique em **Settings** e depois em **Conversion goals**.
2. Em **Conversion period**, digite 3 dias. Os pedidos feitos dentro desse período depois que o usuário sai do journey também contam.
3. Em **Event**, selecione `PW_OrderCreated`.
4. Clique em **Apply**.

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-3.webp" alt="Conversion goals com período de conversão de 3 dias e PW_OrderCreated como evento-alvo" width="616"/>

Para contar os cliques na oferta em vez dos pedidos, selecione `PW_WebPlacementClick`.

## 5. Iniciar e verificar os resultados

1. Clique em **Launch campaign**.
2. Nas estatísticas do journey, verifique o elemento **Web Placement**: **Shown** é quantas vezes a oferta foi exibida, **Interactions** é quantas vezes ela foi clicada. Consulte [Estatísticas do placement](/pt/product/customer-journey/journey-elements/channels/web-placement/#placement-statistics).