# Comment afficher une offre sur un site web avec Web Placement

Un journey peut afficher une offre directement sur votre site web aux utilisateurs qui atteignent une étape, par exemple une bannière de livraison gratuite dans le panier d'un utilisateur qui y a laissé des articles. Ce guide construit un tel journey de bout en bout : l'offre apparaît dans le panier, les utilisateurs qui ne cliquent pas dessus et ne commandent pas dans la journée reçoivent un push, et chaque commande passée après l'offre compte comme une conversion.

Le journey terminé se présente ainsi :

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-1.webp" alt="Canevas du journey : entrée Cart abandoned, Web Placement Free shipping in the cart, Wait for Trigger Clicked the offer? avec les branches Clicked, Ordered et Not triggered, un push sur la branche Not triggered et trois sorties" width="928"/>

## Avant de construire

* **Site web.** Vos développeurs ont [préparé le site web](/fr/product/customer-journey/journey-elements/channels/web-placement/#prepare-your-website) : Web SDK 3.108.1 ou ultérieur, `setUserId` pour les visiteurs connectés, et l'élément dans lequel l'offre est insérée, par exemple `<div id="pw-cart-slot"></div>` dans le panier.
* **Événements.** Votre site ou votre backend envoie un événement lorsqu'un utilisateur laisse des articles dans le panier et lorsqu'il passe une commande. Ce guide utilise `PW_AbandonedCart` et `PW_OrderCreated`. Envoyez les deux événements avec le même User ID que celui que le site web transmet à `setUserId` : l'offre est affichée et retirée par User ID, donc avec un autre ID elle n'apparaît jamais sur le site ou ne disparaît jamais après la commande.
* **Contenu.** Vous disposez d'un [contenu web](/fr/product/content/web-popup-content/web-content/) avec l'offre et un bouton ou un lien, par exemple **Free shipping nudge with cart items**. Sans bouton ni lien, les utilisateurs ne peuvent pas cliquer sur l'offre, et la branche du clic ne se déclenche jamais.

## 1. Démarrer le journey lorsqu'un panier est abandonné

1. Accédez à **Campaigns > Customer Journey Builder**.
2. Cliquez sur **Create campaign**, puis sur **Build a journey from scratch**.
3. Double-cliquez sur l'élément **Trigger-based Entry**, déjà présent sur le canevas.
4. Dans **Event**, sélectionnez `PW_AbandonedCart`.
5. Cliquez sur **Save**.

Pour plus de détails, voir [Comment envoyer une campagne déclenchée](/fr/tutorials/product-guides/how-to-create-campaigns-in-pushwoosh/how-to-send-a-triggered-campaign/).

## 2. Afficher l'offre dans le panier

1. Connectez un élément **Web Placement** à l'entrée.
2. Double-cliquez dessus et définissez :
   * **Web pop-up content :** votre offre, par exemple **Free shipping nudge with cart items**.
   * **Inline** au lieu de **Popup**.
   * **CSS selector of the element :** l'élément du panier, par exemple `#pw-cart-slot`.
   * **Lifetime :** combien de temps l'offre attend l'utilisateur, par exemple 2 jours.
   * **Hide after an event :** activez-le et sélectionnez `PW_OrderCreated`, pour que l'offre disparaisse dès que l'utilisateur passe une commande.
3. Dans **Preview**, sélectionnez un **Test device** : un navigateur avec votre site ouvert.
4. Cliquez sur **Show on test device**.
5. Sur cet appareil, ouvrez la page du panier et cliquez sur le bouton de l'offre. Cela envoie `PW_WebPlacementClick` à votre application. La liste des événements n'affiche un événement qu'après que l'application l'a reçu : sans ce clic, vous ne pouvez pas sélectionner l'événement à l'étape suivante.
6. Cliquez sur **Save**.

Pour tous les paramètres, voir [Web Placement](/fr/product/customer-journey/journey-elements/channels/web-placement/#configure-the-placement).

L'utilisateur passe à l'élément suivant dès que l'offre est mise en file d'attente pour lui, et non après l'avoir vue ou avoir cliqué dessus.

## 3. Créer des branches selon ce que l'utilisateur a fait

1. Connectez un élément **Wait for Trigger** à **Web Placement**.
2. Dans **Waiting period**, saisissez 1 jour.
3. Dans **Branch 1**, saisissez `Clicked` comme nom de branche et sélectionnez l'événement `PW_WebPlacementClick`.
4. Cliquez sur **Add branch**. Dans **Branch 2**, saisissez `Ordered` comme nom de branche et sélectionnez l'événement `PW_OrderCreated`.
5. Cliquez sur **Save**.

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-2.webp" alt="Paramètres de Wait for Trigger avec une période d'attente de 1 jour, la branche Clicked qui attend PW_WebPlacementClick, la branche Ordered qui attend PW_OrderCreated, et la branche Not triggered" width="584"/>

Les utilisateurs qui cliquent sur l'offre dans la journée passent dans **Clicked**, et ceux qui passent une commande sans cliquer passent dans **Ordered**. Tous les autres passent dans **Not triggered** à la fin de la journée. Sans la branche **Ordered**, un utilisateur qui a commandé sans cliquer recevrait quand même le rappel : **Hide after an event** retire seulement l'offre du site et ne fait pas avancer l'utilisateur dans le journey.

6. Connectez **Exit** aux branches **Clicked** et **Ordered**.
7. Connectez un élément **Push** à la branche **Not triggered**, avec un rappel comme « La livraison gratuite de votre panier se termine bientôt », puis connectez-y **Exit**. Les utilisateurs sans appareil avec les push activés ne reçoivent pas le rappel.

## 4. Compter les commandes comme conversions

1. Cliquez sur **Settings**, puis sur **Conversion goals**.
2. Dans **Conversion period**, saisissez 3 jours. Les commandes passées pendant cette période après la sortie de l'utilisateur du journey comptent aussi.
3. Dans **Event**, sélectionnez `PW_OrderCreated`.
4. Cliquez sur **Apply**.

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-3.webp" alt="Conversion goals avec une période de conversion de 3 jours et PW_OrderCreated comme événement cible" width="616"/>

Pour compter les clics sur l'offre plutôt que les commandes, sélectionnez `PW_WebPlacementClick`.

## 5. Lancer et vérifier les résultats

1. Cliquez sur **Launch campaign**.
2. Dans les statistiques du journey, vérifiez l'élément **Web Placement** : **Shown** indique combien de fois l'offre a été affichée, **Interactions** combien de fois elle a été cliquée. Voir [Statistiques du placement](/fr/product/customer-journey/journey-elements/channels/web-placement/#placement-statistics).