# Comment afficher la progression de la livraison sur l'écran de verrouillage Permettez aux clients de suivre le coursier sur l'écran de verrouillage depuis la passation de la commande jusqu'à la livraison. Ce guide explique comment construire ce parcours avec l'[élément Live Activity](/fr/product/customer-journey/journey-elements/channels/live-activity/). ## Prérequis * Votre application iOS prend en charge les Live Activities. Consultez le [guide des Live Activities du SDK iOS](/fr/developer/pushwoosh-sdk/ios-sdk/ios-live-activities/). * Un schéma de widget de livraison est publié pour cette application. Consultez la [configuration des schémas de Live Activity iOS](/fr/developer/first-steps/connect-messaging-services/ios-configuration/ios-live-activity-schemas-configuration/). ## Créer les événements Voici des exemples de noms d'événements pour ce guide. Lorsque votre application ou votre backend envoie un nom pour la première fois, Pushwoosh [crée cet événement automatiquement](/fr/product/audience-data-and-segmentation/events/#implementation). Créez d'abord les événements dans le Control Panel uniquement si vous souhaitez définir vous-même les types d'attributs avant le premier envoi. Créez (ou réutilisez) les événements `OrderPlaced`, `CourierStatusChanged` et `OrderDelivered`. [En savoir plus sur la création d'événements](/fr/product/audience-data-and-segmentation/events/#implementation) ## Construire le parcours Ouvrez le [Customer Journey Builder](/fr/product/customer-journey/pushwoosh-journey-overview/), créez une campagne et construisez tout ce qui suit sur un seul canevas. 1. Allez dans **Campaigns → Customer Journey Builder**. 2. Cliquez sur **Créer une campagne**. 3. Cliquez sur **Construire un parcours de zéro**. ### Définir l'entrée 1. Ajoutez un élément **Trigger-based entry** au canevas. 2. Réglez-le sur `OrderPlaced`. ![Panneau Trigger-based entry avec EVENT réglé sur OrderPlaced](/live-activity-how-to-track-deliveries-with-live-activity-3.webp) ### Démarrer la carte de commande 1. Ajoutez un élément **Live Activity** après l'entrée. 2. Nommez-le `Order card start`. 3. Réglez **Action** sur **Start**. 4. Sélectionnez le **Widget** de livraison et la **Schema version**. ![Début de la carte de commande avec Action réglée sur Start et Widget de livraison et Schema version sélectionnés](/live-activity-how-to-track-deliveries-with-live-activity-1.webp) 5. Réglez **Card key: event** sur `OrderPlaced`. ![Card key: event réglé sur OrderPlaced](/live-activity-how-to-track-deliveries-with-live-activity-4.webp) 6. Remplissez le **Card content** (`courierName`, `eta`, `distanceMeters`) et les champs d'alerte. ![Champs Card content courierName, eta et distanceMeters remplis, avec les champs d'alerte en dessous](/live-activity-how-to-track-deliveries-with-live-activity-5.webp) 7. Cliquez sur **Appliquer**. ### Attendre et mettre à jour la carte Continuez sur le même canevas après l'élément Start. 1. Ajoutez un élément **Wait for Trigger**. 2. Attendez `CourierStatusChanged`. 3. Définissez une période d'attente qui correspond à vos mises à jour de livraison. ![Wait for Trigger réglé sur CourierStatusChanged avec une période d'attente](/live-activity-how-to-track-deliveries-with-live-activity-6.webp) 4. Sur la branche qui se déclenche lorsque l'événement se produit, ajoutez un élément **Live Activity**. 5. Nommez-le `Order card update`. 6. Réglez **Action** sur **Update**. 7. Choisissez les mêmes **Widget** et **Schema version**. ![Mise à jour de la carte de commande avec Action réglée sur Update et les mêmes Widget et Schema version sélectionnés](/live-activity-how-to-track-deliveries-with-live-activity-7.webp) 8. Sélectionnez `Order card start` dans **Card created by**. ![Card created by réglé sur Order card start sur l'élément Update](/live-activity-how-to-track-deliveries-with-live-activity-8.webp) 9. Mettez à jour le **Card content**. ![Champs Card content mis à jour sur l'élément de mise à jour de la carte de commande](/live-activity-how-to-track-deliveries-with-live-activity-9.webp) 10. Cliquez sur **Appliquer**. ### Attendre et terminer la carte Continuez sur le même canevas après l'élément Update. 1. Ajoutez un autre élément **Wait for Trigger**. 2. Attendez `OrderDelivered`. ![Wait for Trigger réglé sur OrderDelivered](/live-activity-how-to-track-deliveries-with-live-activity-10.webp) 3. Sur la branche qui se déclenche lorsque l'événement se produit, ajoutez un élément **Live Activity**. 4. Nommez-le `Order card end`. 5. Réglez **Action** sur **End**. 6. Choisissez les mêmes **Widget** et **Schema version**. 7. Sélectionnez `Order card start` dans **Card created by**. ![Fin de la carte de commande avec Action réglée sur End, les mêmes Widget et Schema version sélectionnés, et Card created by réglé sur Order card start](/live-activity-how-to-track-deliveries-with-live-activity-11.webp) 8. Définissez une alerte et **Dismiss after, min** si nécessaire. ![Champs d'alerte et Dismiss after, min sur l'élément de fin de la carte de commande](/live-activity-how-to-track-deliveries-with-live-activity-12.webp) 9. Cliquez sur **Appliquer**. ![Parcours de livraison complet sur le canevas avec entrée, Start, Wait for Trigger, Update, Wait for Trigger et End](/live-activity-how-to-track-deliveries-with-live-activity-13.webp) ## Ce que le client voit Sur l'écran de verrouillage, le client reçoit une seule carte Live Activity qui change au fur et à mesure de la progression de la livraison. Par exemple : Coursier `Alex M.`, H.A.E. `18:30`, distance `1200` mètres. ![Carte Live Activity sur l'écran de verrouillage après la passation de la commande montrant le coursier Alex M., H.A.E. 18:30, et distance 1200 mètres](/live-activity-how-to-track-deliveries-with-live-activity-14.webp) La même carte se met à jour, par exemple coursier `Alex M.`, H.A.E. `18:15`, distance `400` mètres. ![Carte Live Activity sur l'écran de verrouillage après une mise à jour du coursier montrant H.A.E. 18:15 et distance 400 mètres](/live-activity-how-to-track-deliveries-with-live-activity-15.webp) La carte se ferme et quitte l'écran de verrouillage.