Automatiser les tickets WISMO sur Shopify grâce à un widget de suivi sur mesure

Dans l'écosystème e-commerce, l'acronyme WISMO (Where Is My Order ?) représente souvent le cauchemar silencieux des équipes de support. Il s'agit des demandes récurrentes de clients qui souhaitent simplement savoir où se trouve leur colis. Sur une boutique Shopify générant un volume de commandes significatif, ces tickets peuvent représenter jusqu'à 50 % du volume total du service client.

Plutôt que d'installer une application tierce lourde et coûteuse issue de l'App Store, j'ai choisi de concevoir et déployer une solution sur mesure : un widget de suivi dynamique, rapide et parfaitement intégré à l'architecture existante.

Pourquoi éviter les applications tierces conventionnelles ?

L'App Store de Shopify regorge d'outils de tracking, mais ils présentent souvent trois inconvénients majeurs :

• Impact sur les Core Web Vitals : Les scripts tiers injectent souvent des bibliothèques lourdes qui dégradent le temps de chargement et le score de performance.
• Coût récurrent disproportionné : Les modèles de tarification SaaS montent rapidement en flèche dès que le volume de commandes augmente.
• Manque de contrôle : Personnaliser l'expérience utilisateur ou adapter les flux de données aux spécificités des transporteurs locaux devient rapidement un casse-tête.

L'architecture technique : Serverless et ultra-légère

L'objectif était de construire une solution résiliente, sécurisée et économique. Pour y parvenir, j'ai articulé l'architecture autour de trois briques fondamentales :

1. Le frontend (Widget Web Component) : Développé en Vanilla JavaScript et encapsulé via le Shadow DOM, le widget pèse moins de 6 Ko une fois compressé. Il s'intègre nativement dans le thème Shopify via une simple balise Liquid. L'interface demande le numéro de commande et l'adresse email ou le code postal du client.

2. Le backend intermédiaire (Edge API) : Pour ne jamais exposer de clés API sensibles côté client, les requêtes transitent par une fonction serverless déployée sur Cloudflare Workers. Cette fonction valide le couple commande/email, interroge l'API GraphQL de Shopify pour récupérer les identifiants d'expédition (fulfillments), puis appelle les endpoints des transporteurs concernés (Colissimo, DHL, Mondial Relay).

3. La couche de cache (Upstash Redis) : Les données de suivi n'évoluant pas à la seconde près, les réponses de l'API de transport sont mises en cache pendant 45 minutes. Cela permet d'absorber les pics de requêtes répétés d'un même utilisateur tout en respectant les quotas des API de livraison.

La gestion des cas limites

L'automatisation ne se résume pas à afficher un statut « En cours de livraison ». Il a fallu gérer proprement plusieurs cas de figure complexes : les commandes expédiées en plusieurs colis distincts, les transporteurs non pris en charge nativement et les erreurs de saisie client.

En normalisant la réponse JSON en amont, le widget affiche toujours une chronologie claire et lisible, complétée par un lien direct vers la plateforme officielle du transporteur si une anomalie majeure est détectée.

Des résultats concrets

Dès les premières semaines de mise en production, l'impact a été immédiat :

• Chute de 65 % des tickets support entrants liés au statut d'expédition.
• Temps de réponse moyen sous la barre des 250 ms grâce à la proximité du réseau Edge et au cache Redis.
• Impact nul sur les performances de la boutique, préservant ainsi le taux de conversion.

Conclusion

Ce projet illustre parfaitement l'intérêt de développer des micro-outils ciblés plutôt que de se tourner systématiquement vers des solutions SaaS génériques. Avec une architecture serverless moderne, quelques lignes de code bien pensées et une intégration API rigoureuse, il est possible de résoudre un problème métier majeur tout en améliorant radicalement l'expérience utilisateur.