# Как показать предложение на сайте с помощью Web Placement

Джорни может показать предложение прямо на вашем сайте пользователям, которые дошли до определенного шага, например баннер о бесплатной доставке в корзине пользователя, оставившего там товары. В этом руководстве такой джорни собирается от начала до конца: предложение появляется в корзине, пользователи, которые в течение дня не кликнули на него и не сделали заказ, получают push, а каждый заказ после предложения учитывается как конверсия.

Готовый джорни выглядит так:

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-1.webp" alt="Холст джорни: вход Cart abandoned, Web Placement Free shipping in the cart, Wait for Trigger Clicked the offer? с ветками Clicked, Ordered и Not triggered, push на ветке Not triggered и три выхода" width="928"/>

## Перед началом

* **Сайт.** Ваши разработчики [подготовили сайт](/ru/product/customer-journey/journey-elements/channels/web-placement/#prepare-your-website): Web SDK 3.108.1 или новее, `setUserId` для авторизованных посетителей и элемент, в который вставляется предложение, например `<div id="pw-cart-slot"></div>` в корзине.
* **События.** Ваш сайт или бэкенд отправляет событие, когда пользователь оставляет товары в корзине и когда он оформляет заказ. В этом руководстве используются `PW_AbandonedCart` и `PW_OrderCreated`. Отправляйте оба события с тем же User ID, который сайт передает в `setUserId`: предложение показывается и удаляется по User ID, поэтому с другим ID оно не появится на сайте или не исчезнет после заказа.
* **Контент.** У вас есть [веб-контент](/ru/product/content/web-popup-content/web-content/) с предложением и кнопкой или ссылкой, например **Free shipping nudge with cart items**. Без кнопки или ссылки пользователи не смогут кликнуть на предложение, и ветка клика никогда не сработает.

## 1. Запустите джорни, когда корзина брошена

1. Перейдите в **Campaigns > Customer Journey Builder**.
2. Нажмите **Create campaign**, затем **Build a journey from scratch**.
3. Дважды нажмите на элемент **Trigger-based Entry**, который уже находится на холсте.
4. В поле **Event** выберите `PW_AbandonedCart`.
5. Нажмите **Save**.

Подробнее см. [Как отправить триггерную кампанию](/ru/tutorials/product-guides/how-to-create-campaigns-in-pushwoosh/how-to-send-a-triggered-campaign/).

## 2. Покажите предложение в корзине

1. Подключите к входу элемент **Web Placement**.
2. Дважды нажмите на него и задайте:
   * **Web pop-up content:** ваше предложение, например **Free shipping nudge with cart items**.
   * **Inline** вместо **Popup**.
   * **CSS selector of the element:** элемент в корзине, например `#pw-cart-slot`.
   * **Lifetime:** сколько предложение ждет пользователя, например 2 дня.
   * **Hide after an event:** включите и выберите `PW_OrderCreated`, чтобы предложение исчезало, как только пользователь оформит заказ.
3. В разделе **Preview** выберите **Test device**: браузер с открытым вашим сайтом.
4. Нажмите **Show on test device**.
5. На этом устройстве откройте страницу корзины и нажмите кнопку в предложении. Так в ваше приложение отправится `PW_WebPlacementClick`. Событие появляется в списке событий только после того, как приложение его получит, поэтому без этого клика вы не сможете выбрать событие на следующем шаге.
6. Нажмите **Save**.

Все настройки описаны в статье [Web Placement](/ru/product/customer-journey/journey-elements/channels/web-placement/#configure-the-placement).

Пользователь переходит к следующему элементу, как только предложение поставлено для него в очередь, а не после того, как он его увидит или кликнет на него.

## 3. Разделите пользователей по их действиям

1. Подключите к **Web Placement** элемент **Wait for Trigger**.
2. В поле **Waiting period** введите 1 день.
3. В **Branch 1** введите название ветки `Clicked` и выберите событие `PW_WebPlacementClick`.
4. Нажмите **Add branch**. В **Branch 2** введите название ветки `Ordered` и выберите событие `PW_OrderCreated`.
5. Нажмите **Save**.

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-2.webp" alt="Настройки Wait for Trigger с периодом ожидания 1 день, веткой Clicked, ожидающей PW_WebPlacementClick, веткой Ordered, ожидающей PW_OrderCreated, и веткой Not triggered" width="584"/>

Пользователи, которые кликнули на предложение в течение дня, попадают в **Clicked**, а пользователи, которые оформили заказ без клика, — в **Ordered**. Все остальные по истечении дня попадают в **Not triggered**. Без ветки **Ordered** пользователь, оформивший заказ без клика, все равно получил бы напоминание: **Hide after an event** только убирает предложение с сайта и не перемещает пользователя по джорни.

6. Подключите **Exit** к веткам **Clicked** и **Ordered**.
7. Подключите элемент **Push** к ветке **Not triggered** с напоминанием, например «Бесплатная доставка для вашей корзины скоро закончится», затем подключите к нему **Exit**. Пользователи без устройства с включенными push-уведомлениями напоминание не получат.

## 4. Учитывайте заказы как конверсии

1. Нажмите **Settings**, затем **Conversion goals**.
2. В поле **Conversion period** введите 3 дня. Заказы, оформленные в течение этого периода после выхода пользователя из джорни, тоже учитываются.
3. В поле **Event** выберите `PW_OrderCreated`.
4. Нажмите **Apply**.

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-3.webp" alt="Conversion goals с периодом конверсии 3 дня и целевым событием PW_OrderCreated" width="616"/>

Чтобы вместо заказов учитывать клики на предложение, выберите `PW_WebPlacementClick`.

## 5. Запустите джорни и проверьте результаты

1. Нажмите **Launch campaign**.
2. В статистике джорни проверьте элемент **Web Placement**: **Shown** — сколько раз предложение было показано, **Interactions** — сколько раз на него кликнули. См. [Статистика плейсмента](/ru/product/customer-journey/journey-elements/channels/web-placement/#placement-statistics).