{"id":23722,"date":"2026-09-16T09:56:30","date_gmt":"2026-09-16T09:56:30","guid":{"rendered":"https:\/\/www.mailgun.com\/blog\/demo-application-email-meteor-geolocalisation-suivi-ua\/"},"modified":"2026-09-16T09:56:30","modified_gmt":"2026-09-16T09:56:30","slug":"demo-application-email-meteor-geolocalisation-suivi-ua","status":"publish","type":"blog","link":"https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/","title":{"rendered":"D\u00e9mo\u00a0: application d&#8217;emailing bas\u00e9e sur Meteor avec g\u00e9olocalisation et suivi du UA"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">En janvier\u00a0<a href=\"\/?blog_category=native-mailgun-integration-lets-meteor-apps-send-email\" target=\"_tabs\" rel=\"noopener noreferrer\">nous avons annonc\u00e9 notre partenariat avec Meteor\u00a0<\/a>pour propulser le back-end d&#8217;email fourni avec la plateforme Meteor. Pour voir un exemple, consultez\u00a0<a href=\"\/?blog_category=create-a-web-app-from-scratch-in-under-5-minutes-with\" target=\"_tabs\" rel=\"noopener noreferrer\">ce formulaire d&rsquo;inscription \u00e0 un \u00e9v\u00e9nement<\/a> dont nous avons parl\u00e9 r\u00e9cemment sur le blog, mais aujourd&rsquo;hui nous voulons vous faire la d\u00e9mo d&rsquo;un autre exemple d&rsquo;int\u00e9gration de Meteor+Mailgun.<\/p>\n\n\n\r\n    <nav data-content-type=\"longform\" class=\"toc-block longform-spacings px-5 py-6 px-md-6 px-lg-7 py-md-7 bg-light fs-sm rounded-lg\" aria-labelledby=\"toc-title-1565\"><p class=\"h5 m-0\" id=\"toc-title-1565\">Table des mati\u00e8res<\/p><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">01<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#geolocalisation-pour-lemail\">G\u00e9olocalisation pour l&#8217;email<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">02<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#la-demo\">La d\u00e9mo<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">03<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#envoyer-des-emails-avec-meteor\">Envoyer des emails avec Meteor<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">04<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#configuration-pour-lenvoi-via-lapi\">Configuration pour l&rsquo;envoi via l&rsquo;API<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">05<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#cote-ouest-cote-est-cote-serveur\">C\u00f4t\u00e9 ouest\u2026 c\u00f4t\u00e9 est\u2026 c\u00f4t\u00e9 serveur\u2026<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">06<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#configuration-des-webhooks\">Configuration des webhooks<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">07<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#assemblage\">Assemblage<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">08<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#cest-fait\">C&rsquo;est fait\u00a0!<\/a><\/div><\/div><\/nav>\n\n\n<h2 class=\"wp-block-heading\">G\u00e9olocalisation pour l&#8217;email<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Il y a quelques semaines, nous avons d\u00e9ploy\u00e9 de nouveaux param\u00e8tres pour nos\u00a0<a href=\"\/?blog_category=geolocation-and-user-agent-detection-now-available-in-web-hooks\" target=\"_tabs\" rel=\"noopener noreferrer\">webhooks afin de r\u00e9cup\u00e9rer les informations de g\u00e9olocalisation et de user-agent pour vos emails<\/a>\u00a0sans avoir \u00e0 analyser les cha\u00eenes UA ni \u00e0 utiliser de biblioth\u00e8ques de recherche d&rsquo;IP. Nous avons pens\u00e9 qu&rsquo;il serait amusant de cr\u00e9er une petite application sur Meteor pour montrer \u00e0 quel point il est facile d&rsquo;utiliser ces nouveaux param\u00e8tres.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">La d\u00e9mo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cliquez sur la d\u00e9mo ci-dessous pour la voir en action et\u00a0<a href=\"https:\/\/github.com\/mailgun\/mailgun-meteor-demo\" target=\"_tabs\" rel=\"noopener noreferrer\">t\u00e9l\u00e9charger le code source de l&rsquo;application depuis GitHub<\/a>\u00a0pour pouvoir l&rsquo;explorer et cr\u00e9er votre propre application ou rapport. Apr\u00e8s avoir test\u00e9 la d\u00e9mo, revenez ici et nous vous expliquerons plus en d\u00e9tail comment nous l&rsquo;avons con\u00e7ue.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Envoyer des emails avec Meteor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez envoyer des emails avec Mailgun via le standard SMTP ou avec l&rsquo;API HTTP de Mailgun. Si vous souhaitez simplement une fonctionnalit\u00e9 d&rsquo;envoi SMTP classique dans votre application Meteor, commencez par ajouter le package email \u00e0 votre projet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>&gt;&gt; meteor add email<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apr\u00e8s avoir ex\u00e9cut\u00e9 cette commande, un compte Mailgun par d\u00e9faut sera automatiquement configur\u00e9 et Meteor d\u00e9finira automatiquement la variable d&rsquo;environnement MAIL_URL qui stocke la configuration SMTP.<b>\u00a0<\/b>(Consultez la documentation sur l&#8217;email sur le site de Meteor\u00a0<a href=\"http:\/\/docs.meteor.com\/#email\" target=\"_tabs\" rel=\"noopener noreferrer\">ici<\/a>. Comme mentionn\u00e9 dans le dernier paragraphe, vous pouvez tester l&rsquo;envoi m\u00eame sans ajouter le package email\u00a0: par d\u00e9faut, les emails s&rsquo;afficheront directement dans la console).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour cette d\u00e9mo, nous allons aller plus loin que le simple envoi d&#8217;emails, nous utilisons donc directement un compte Mailgun et l&rsquo;API HTTP (d&rsquo;ailleurs, avec l&rsquo;API, Mailgun assemble le type MIME c\u00f4t\u00e9 serveur, c&rsquo;est donc un peu plus simple \u00e0 g\u00e9rer, m\u00eame pour un simple envoi d&#8217;email).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configuration pour l&rsquo;envoi via l&rsquo;API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pour commencer, r\u00e9cup\u00e9rez votre cl\u00e9 API depuis le panneau de configuration de Mailgun\u00a0; vous la verrez lors de votre connexion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L&rsquo;API sera appel\u00e9e via une simple requ\u00eate HTTP POST. Vous devrez ajouter le package http de Meteor \u00e0 votre projet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>&gt;&gt; meteor add http<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Une fois le package http install\u00e9, vous pouvez effectuer n&rsquo;importe quelle requ\u00eate HTTP (GET, POST, PUT, DELETE, etc.) dans votre application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Passons aux choses s\u00e9rieuses\u00a0: voici un exemple de la mani\u00e8re dont vous pouvez envoyer un email avec Mailgun via l&rsquo;API\u00a0:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copier dans le presse-papiers\" data-clipboard-success-label=\"Copi\u00e9\u00a0!\" data-clipboard-error-label=\"Impossible de copier\" data-tooltip=\"Copier dans le presse-papiers\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copier dans le presse-papiers\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                                <code id=\"code_0_content\" class=\"language-PHP\">\r\n\r\n                                    Meteor.http.post(&#039;https:\/\/api.mailgun.net\/v2\/your-api-domain\/messages&#039;,  \r\n    {auth:&quot;api:&quot; + process.env.MAILGUN_API_KEY,\r\n    params: {&quot;from&quot;:&quot;Dev McCool  &quot;,\r\n                     &quot;to&quot;:[to],\r\n                      &quot;subject&quot;:&quot;Behold: the power of Meteor and Mailgun&quot;,\r\n                      &quot;html&quot;:\u201dA &lt;b&gt;bold&lt;\/b&gt; greeting goes here\u201d,\r\n                      &quot;h:X-Mailgun-Variables&quot;:JSON.stringify({tracking_id:my_tracking_var}),\r\n                      &quot;o:tracking&quot;:&#039;True\u2019 }}, function(error, result) {\r\n                      \/\/handle error, result (should be 200 OK)\r\n                     }\r\n           }\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p class=\"wp-block-paragraph\">Passons en revue quelques d\u00e9tails.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez voir que nous configurons un en-t\u00eate d&rsquo;authentification avec cette requ\u00eate en utilisant une variable d&rsquo;environnement appel\u00e9e MAILGUN_API_KEY. Vous ne pouvez pas encore d\u00e9finir de variables d&rsquo;environnement sur la plateforme d&rsquo;h\u00e9bergement Meteor (par ex. meteor deploy), mais si vous ex\u00e9cutez votre application Meteor sur Heroku ou sur votre propre infrastructure, il est conseill\u00e9 de conserver les identifiants comme votre cl\u00e9 API en toute s\u00e9curit\u00e9 dans une variable d&rsquo;environnement. Si vous souhaitez d\u00e9finir une variable d&rsquo;environnement avec Meteor, proc\u00e9dez comme suit\u00a0:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>process.env['MAILGUN_API_KEY'] = \"my-mailgun-key\";<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remarquez \u00e9galement que nous ajoutons ici des valeurs de suivi personnalis\u00e9es.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00e9finir l&rsquo;option de suivi sur \u00ab\u00a0true\u00a0\u00bb pour indiquer \u00e0 Mailgun de d\u00e9clencher le webhook \u00e0 l&rsquo;ouverture de l&#8217;email.<\/li>\n\n\n\n<li>D\u00e9finir une valeur JSON pour le champ d&rsquo;en-t\u00eate X-Mailgun-Variable. Cela d\u00e9montre la puissance des webhooks\u00a0: nous pouvons glisser des informations importantes ou des valeurs uniques dans ce champ d&rsquo;en-t\u00eate et les r\u00e9cup\u00e9rer lorsque Mailgun envoie le webhook \u00e0 notre serveur.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Dans cet exemple pr\u00e9cis, l&rsquo;envoi de l&#8217;email est d\u00e9clench\u00e9 par un simple bouton HTML c\u00f4t\u00e9 client. Nous avons encapsul\u00e9 la fonctionnalit\u00e9 d&rsquo;envoi d&#8217;email dans une m\u00e9thode Meteor afin qu&rsquo;elle soit accessible depuis le client.\u00a0<a href=\"\/?blog_category=native-mailgun-integration-lets-meteor-apps-send-email\" target=\"_tabs\" rel=\"noopener noreferrer\">Voir le code d&rsquo;envoi d&#8217;email ici<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N&rsquo;oubliez pas de conserver les \u00e9l\u00e9ments importants tels que les identifiants API dans le dossier serveur de votre application Meteor. Les fichiers du dossier serveur ne sont pas envoy\u00e9s au client. En revanche, les autres fichiers, qu&rsquo;ils se trouvent dans le dossier client ou \u00e0 la racine du dossier de l&rsquo;application, peuvent se retrouver dans le navigateur du client.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f4t\u00e9 ouest\u2026 c\u00f4t\u00e9 est\u2026 c\u00f4t\u00e9 serveur\u2026<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lorsque Mailgun d\u00e9tectera que notre email a \u00e9t\u00e9 ouvert, il nous enverra une requ\u00eate POST. Comme pour tout invit\u00e9, nous voulons que le webhook soit bien accueilli et sache qu&rsquo;il est arriv\u00e9 \u00e0 la bonne destination\u00a0: pas d&rsquo;erreurs 404 ici\u00a0! Le routage c\u00f4t\u00e9 serveur n&rsquo;est pas encore int\u00e9gr\u00e9 \u00e0 Meteor, mais ne vous inqui\u00e9tez pas, gr\u00e2ce \u00e0 la flexibilit\u00e9 de la plateforme, nous pouvons ajouter une route simple pour le webhook Mailgun sans avoir \u00e0 tout d\u00e9monter. La configuration d&rsquo;une route c\u00f4t\u00e9 serveur implique un peu plus de code\u00a0:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copier dans le presse-papiers\" data-clipboard-success-label=\"Copi\u00e9\u00a0!\" data-clipboard-error-label=\"Impossible de copier\" data-tooltip=\"Copier dans le presse-papiers\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copier dans le presse-papiers\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                                <code id=\"code_0_content\" class=\"language-PHP\">\r\n\r\n                                    if (Meteor.isServer) {\r\n\r\n  var app = __meteor_bootstrap__.app\r\n  var connect = Npm.require(&#039;connect&#039;);\r\n  var Fiber = Npm.require(&#039;fibers&#039;);\r\n  var crypto = Npm.require(&#039;crypto&#039;);\r\n\r\n  var router = connect.middleware.router(function(route)\r\n  {\r\n    route.post(&#039;\/mailgun\/receive&#039;, function(req, res)\r\n    {\r\n      var raw_post_body = &quot;&quot;;\r\n      var post_data = [];\r\n\r\n      req.on(&#039;data&#039;, function (chunk) {\r\n        raw_post_body += chunk.toString();\r\n      });\r\n\r\n      req.on(&#039;end&#039;, function () {\r\n          pairs = raw_post_body.split(&#039;&amp;&#039;);\r\n          for(var i = 0; i &lt; pairs.length; i++) {\r\n            kv = pairs[i].split(&#039;=&#039;);\r\n            post_data[kv[0]]=decodeURIComponent((kv[1]+&#039;&#039;).replace(\/+\/g, &#039;%20&#039;));\r\n          }\r\n\r\n          \/\/Verify sender is Mailgun\r\n          var sig = crypto.createHmac(&#039;sha256&#039;, process.env.MAILGUN_API_KEY).update(post_data[&#039;timestamp&#039;]+post_data[&#039;token&#039;]).digest(&#039;hex&#039;);\r\n          if(sig !== post_data[&#039;signature&#039;]) {\r\n            res.writeHead(403);\r\n            res.end();\r\n          }\r\n          else {\r\n            Fiber(function() {\r\n                Meteor.call(&quot;publishGeo&quot;, post_data);\r\n                res.writeHead(200);\r\n                res.end();\r\n            }).run();\r\n          }\r\n      });\r\n    });\r\n  });\r\n\r\n  app.use(router);\r\n\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p class=\"wp-block-paragraph\">Vers le milieu, vous verrez o\u00f9 nous effectuons un calcul HMAC rapide pour confirmer l&rsquo;identit\u00e9 de l&rsquo;exp\u00e9diteur. Mailgun fournit un jeton de signature avec chaque webhook et nous pouvons v\u00e9rifier la validit\u00e9 de cette signature en hachant le jeton et l&rsquo;horodatage fournis avec notre cl\u00e9 API. Ce n&rsquo;est pas une exigence, mais c&rsquo;est recommand\u00e9 pour toute application publique. C&rsquo;est tr\u00e8s simple \u00e0 r\u00e9aliser en utilisant la m\u00e9thode HMAC pr\u00e9sente dans la biblioth\u00e8que crypto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Avec cette route en place et activ\u00e9e sur notre serveur, nous pouvons pr\u00e9parer le c\u00f4t\u00e9 Mailgun pour nos webhooks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configuration des webhooks<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous vous connectez \u00e0 Mailgun, vous verrez l&rsquo;onglet de suivi en haut de votre tableau de bord. En bas de la page de suivi, vous verrez un champ pour saisir la destination des requ\u00eates POST que Mailgun enverra \u00e0 chaque ouverture d&#8217;email.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Assemblage<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dans cette application de d\u00e9mo, nous attribuons \u00e0 chaque session de navigateur un identifiant unique que nous incluons dans l&rsquo;appel \u00e0 l&rsquo;API de Mailgun (dans cet en-t\u00eate HTTP X-Mailgun-Variables que nous avons envoy\u00e9 plus t\u00f4t). Lorsque le webhook d&rsquo;ouverture revient, nous pouvons inspecter non seulement les d\u00e9tails de g\u00e9olocalisation, mais \u00e9galement analyser ce code d&rsquo;identifiant de session unique. C&rsquo;est ainsi que nous saurons \u00e0 quelle session de navigateur appartient le webhook et que nous pourrons afficher le bon emplacement sur la carte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gr\u00e2ce \u00e0 la puissance du framework Meteor, le navigateur (le client) peut observer toute modification dans l&rsquo;ensemble de donn\u00e9es des webhooks re\u00e7us. En utilisant l&rsquo;\u00e9v\u00e9nement de collection added c\u00f4t\u00e9 client, le client est mis \u00e0 jour imm\u00e9diatement lorsque nous avons ajout\u00e9 un nouvel \u00e9v\u00e9nement webhook \u00e0 notre base de donn\u00e9es. Dans l&rsquo;\u00e9v\u00e9nement added, il nous suffit de g\u00e9n\u00e9rer un marqueur de localisation Google Maps en utilisant les valeurs de la ville, de la r\u00e9gion et du pays figurant dans le webhook. C&rsquo;est \u00e9galement ici que nous allons v\u00e9rifier l&rsquo;identifiant unique par rapport \u00e0 notre identifiant de session actuel\u00a0; s&rsquo;ils correspondent, ce marqueur est plac\u00e9 au premier plan sur la carte (avec un z-index) et signal\u00e9 par une ic\u00f4ne rouge.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La derni\u00e8re partie du code c\u00f4t\u00e9 client consiste \u00e0 s&rsquo;assurer que chaque marqueur sur la carte comporte une fen\u00eatre pop-up contenant quelques autres d\u00e9tails sur le navigateur que Mailgun inclut \u00e9galement dans les donn\u00e9es du webhook. Les webhooks de suivi de Mailgun incluent \u00e9galement des donn\u00e9es tr\u00e8s utiles, telles que le syst\u00e8me d&rsquo;exploitation, le client de messagerie utilis\u00e9 pour ouvrir ou lire le message et le type d&rsquo;appareil (id\u00e9al pour analyser l&rsquo;utilisation mobile par rapport \u00e0 l&rsquo;utilisation sur ordinateur\u00a0!).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C&rsquo;est fait\u00a0!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Et voil\u00e0\u00a0: votre application Meteor est maintenant pr\u00eate \u00e0 recevoir les webhooks de suivi et d&rsquo;ouverture de Mailgun, de mani\u00e8re fiable et s\u00e9curis\u00e9e.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour voir tout cela en action, visitez le site de d\u00e9monstration et le code source sur\u00a0<a href=\"https:\/\/github.com\/mailgun\/mailgun-meteor-demo\/\" target=\"_tabs\" rel=\"noopener noreferrer\">GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En janvier, nous avons annonc\u00e9 notre partenariat avec Meteor pour propulser le back-end d&#8217;email fourni avec la plateforme Meteor. En savoir plus&#8230;<\/p>\n","protected":false},"author":13,"featured_media":4555,"menu_order":0,"template":"","meta":{"_acf_changed":true,"footnotes":""},"blog_category":[22],"class_list":["post-23722","blog","type-blog","status-publish","has-post-thumbnail","hentry","blog_category-product"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>D\u00e9mo\u00a0: emailing bas\u00e9 sur Meteor avec g\u00e9olocalisation et suivi UA - Transactional Email API Service For Developers | Mailgun<\/title>\n<meta name=\"description\" content=\"En janvier, nous avons annonc\u00e9 notre partenariat avec Meteor pour propulser le back-end d&#039;email fourni avec la plateforme Meteor. En savoir plus...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"D\u00e9mo\u00a0: emailing bas\u00e9 sur Meteor avec g\u00e9olocalisation et suivi UA - Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"og:description\" content=\"En janvier, nous avons annonc\u00e9 notre partenariat avec Meteor pour propulser le back-end d&#039;email fourni avec la plateforme Meteor. En savoir plus...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/\" \/>\n<meta property=\"og:site_name\" content=\"Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Product.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"448\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/product\\\/demo-application-email-meteor-geolocalisation-suivi-ua\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/product\\\/demo-application-email-meteor-geolocalisation-suivi-ua\\\/\",\"name\":\"D\u00e9mo\u00a0: emailing bas\u00e9 sur Meteor avec g\u00e9olocalisation et suivi UA - Transactional Email API Service For Developers | Mailgun\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/product\\\/demo-application-email-meteor-geolocalisation-suivi-ua\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/product\\\/demo-application-email-meteor-geolocalisation-suivi-ua\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Product.png\",\"datePublished\":\"2026-09-16T09:56:30+00:00\",\"description\":\"En janvier, nous avons annonc\u00e9 notre partenariat avec Meteor pour propulser le back-end d'email fourni avec la plateforme Meteor. En savoir plus...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/product\\\/demo-application-email-meteor-geolocalisation-suivi-ua\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/product\\\/demo-application-email-meteor-geolocalisation-suivi-ua\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/product\\\/demo-application-email-meteor-geolocalisation-suivi-ua\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Product.png\",\"contentUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Product.png\",\"width\":720,\"height\":448},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/product\\\/demo-application-email-meteor-geolocalisation-suivi-ua\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"D\u00e9mo\u00a0: application d\u2019emailing bas\u00e9e sur Meteor avec g\u00e9olocalisation et suivi du UA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"description\":\"Des API d\u2019emails transactionnels puissantes qui vous permettent d'envoyer, de recevoir et de suivre des emails, con\u00e7ues pour les d\u00e9veloppeurs. En savoir plus d\u00e8s aujourd'hui !\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/#organization\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/cropped-android-chrome-512x512-1.png\",\"contentUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/cropped-android-chrome-512x512-1.png\",\"width\":512,\"height\":512,\"caption\":\"Transactional Email API Service For Developers | Mailgun\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"D\u00e9mo\u00a0: emailing bas\u00e9 sur Meteor avec g\u00e9olocalisation et suivi UA - Transactional Email API Service For Developers | Mailgun","description":"En janvier, nous avons annonc\u00e9 notre partenariat avec Meteor pour propulser le back-end d'email fourni avec la plateforme Meteor. En savoir plus...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/","og_locale":"fr_FR","og_type":"article","og_title":"D\u00e9mo\u00a0: emailing bas\u00e9 sur Meteor avec g\u00e9olocalisation et suivi UA - Transactional Email API Service For Developers | Mailgun","og_description":"En janvier, nous avons annonc\u00e9 notre partenariat avec Meteor pour propulser le back-end d'email fourni avec la plateforme Meteor. En savoir plus...","og_url":"https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/","og_site_name":"Transactional Email API Service For Developers | Mailgun","og_image":[{"width":720,"height":448,"url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Product.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/","url":"https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/","name":"D\u00e9mo\u00a0: emailing bas\u00e9 sur Meteor avec g\u00e9olocalisation et suivi UA - Transactional Email API Service For Developers | Mailgun","isPartOf":{"@id":"https:\/\/www.mailgun.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/#primaryimage"},"image":{"@id":"https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Product.png","datePublished":"2026-09-16T09:56:30+00:00","description":"En janvier, nous avons annonc\u00e9 notre partenariat avec Meteor pour propulser le back-end d'email fourni avec la plateforme Meteor. En savoir plus...","breadcrumb":{"@id":"https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/#primaryimage","url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Product.png","contentUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Product.png","width":720,"height":448},{"@type":"BreadcrumbList","@id":"https:\/\/www.mailgun.com\/fr\/blog\/product\/demo-application-email-meteor-geolocalisation-suivi-ua\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mailgun.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.mailgun.com\/fr\/blog\/"},{"@type":"ListItem","position":3,"name":"D\u00e9mo\u00a0: application d\u2019emailing bas\u00e9e sur Meteor avec g\u00e9olocalisation et suivi du UA"}]},{"@type":"WebSite","@id":"https:\/\/www.mailgun.com\/fr\/#website","url":"https:\/\/www.mailgun.com\/fr\/","name":"Transactional Email API Service For Developers | Mailgun","description":"Des API d\u2019emails transactionnels puissantes qui vous permettent d'envoyer, de recevoir et de suivre des emails, con\u00e7ues pour les d\u00e9veloppeurs. En savoir plus d\u00e8s aujourd'hui !","publisher":{"@id":"https:\/\/www.mailgun.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mailgun.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.mailgun.com\/fr\/#organization","name":"Transactional Email API Service For Developers | Mailgun","url":"https:\/\/www.mailgun.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.mailgun.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/06\/cropped-android-chrome-512x512-1.png","contentUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/06\/cropped-android-chrome-512x512-1.png","width":512,"height":512,"caption":"Transactional Email API Service For Developers | Mailgun"},"image":{"@id":"https:\/\/www.mailgun.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/blog\/23722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/users\/13"}],"version-history":[{"count":1,"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/blog\/23722\/revisions"}],"predecessor-version":[{"id":23723,"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/blog\/23722\/revisions\/23723"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/media\/4555"}],"wp:attachment":[{"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/media?parent=23722"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/blog_category?post=23722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}