Supposons que vous souhaitiez configurer un système d’alerte par e-mail rudimentaire dans votre implémentation de Google Tag Manager. Supposons, par exemple, que vous souhaitiez recevoir un e-mail chaque fois qu’une erreur non détectée se produit sur votre site Web. Ce n’est pas un très bon cas d’utilisation, car un grand site Web peut générer des centaines d’exceptions non interceptées en peu de temps, mais faisons comme si pour l’instant.
Si vous connaissez votre JavaScript, vous saurez que vous ne pouvez pas envoyer de courrier en utilisant du code côté client. C’est une question de sécurité du navigateur, et je le comprends parfaitement. Cependant, une grande majorité de sites Web sont créés à l’aide d’un CMS qui peut fournir une fonction de messagerie ou un crochet que vous pouvez utiliser. Et même si vous n’avez pas de serveur Web coopératif (ou si vous ne pouvez pas convaincre vos développeurs de vous aider), vous pouvez utiliser l’une des API de messagerie en ligne disponibles.
Dans cet article, je vais vous montrer deux façons simples d’envoyer votre courrier : en utilisant le courrier() fonction en PHP, et en utilisant l’API de Mandrill. Mon cas d’utilisation sera simple : chaque fois qu’une exception non détectée se produit sur le site Web, un e-mail est envoyé à mon adresse avec des détails sur l’erreur. J’utiliserai l’écouteur d’erreurs JavaScript pour détecter l’erreur et la pousser dans le mailer.
Mot d’avertissement: Les exemples de cet article sont très rudimentaires et servent simplement à vous montrer les bases de l’envoi de vos e-mails avec GTM. Avant de commencer à coder votre propre système de messagerie, assurez-vous de vous familiariser avec la documentation afin de ne pas ouvrir accidentellement ou involontairement une porte aux spammeurs.
Avant de commencer
Pour que cela fonctionne, vous aurez besoin de l’écouteur d’erreurs JavaScript GTM opérationnel, avec quelques macros prêtes à collecter des données sur les erreurs non interceptées.
Alors d’abord, configurez l’écouteur d’erreur avec une règle de déclenchement de votre choix. Je l’ai exécuté sur toutes les pages, mais si vous souhaitez surveiller uniquement une page spécifique, n’hésitez pas à modifier la règle.
Ensuite, vous aurez besoin de trois macros : une pour le message d’erreur, une pour l’URL défectueuse et une pour le numéro de ligne où le code défectueux a été trouvé.
{{Erreur – MSG}}
Type de macro : Variable de couche de données
Nom de la variable de la couche de données : gtm.errorMessage
{{Erreur – URL}}
Type de macro : Variable de couche de données
Nom de la variable de la couche de données : gtm.errorUrl
(REMARQUE: Au moment de l’écriture, cette macro renverra une chaîne vide. Cependant, je suis sûr que ce sera bientôt corrigé. En attendant, vous pouvez utiliser la macro {{url}} par défaut à la place.)
{{Erreur – LIGNE}}
Type de macro : Variable de couche de données
Nom de la variable de la couche de données : gtm.errorLineNumber
Et puis vous êtes prêt à partir.
Envoyer du courrier avec PHP
Si votre site a été construit avec PHP, vous pouvez utiliser le courrier() fonction pour envoyer vos e-mails. (Si votre site fonctionne sur WordPress, vous devriez également jeter un œil à la fonction wp_mail() qui est un peu plus robuste !)
Pour que cette méthode fonctionne, vous aurez besoin de deux choses :
-
Une balise HTML personnalisée dans votre configuration GTM pour envoyer la charge utile des données au script PHP
-
Un script PHP qui traite les données et les envoie
La balise HTML personnalisée ci-dessous utilise jQuery pour envoyer la requête POST, vous devrez donc vous assurer que jQuery est chargé avant que le code HTML personnalisé est exécuté. Je ne suis pas un grand fan de jQuery ou de n’importe quel framework JS empilé sur GTM, mais pour faire des requêtes POST en utilisant AJAX, c’est une aide énorme.
Quoi qu’il en soit, voici à quoi ressemble la balise HTML personnalisée :
<script> var data = { errorUrl: {{Error - URL}}, errorLine: {{Error - LINE}}, errorMsg: {{Error - MSG}} }; jQuery.ajax({ type: "POST", url: "/wp-content/uploads/email.php", data: data }); </script>Comme je l’ai dit, c’est vraiment dépouillé. Vous devriez ajouter un code de validation, peut-être utiliser le Succès, Erreur et Achevée rappels et ainsi de suite.
Le premier concerne la construction de la charge utile. Je fais cela en créant un littéral d’objet, qui est rempli par les valeurs récupérées par les macros d’erreur créées précédemment. Ainsi, lorsqu’une erreur se produit, l’objet Les données peut avoir les paires clé-valeur suivantes :
erreurUrl : https://www.simoahava.com/
ligne d’erreur : “3”
errorMsg : “Erreur de référence non interceptée : ma fonction n’est pas définie”
Le bit suivant concerne l’utilisation de la fonction ajax() de jQuery pour envoyer les données avec une requête POST au script PHP personnalisé. Vous devrez spécifier l’emplacement du script pour que cela fonctionne.
j’ai écrit un très script de courrier simple, que vous pouvez trouver ci-dessous. Enregistrez ceci sous email.php et stockez-le dans un emplacement auquel vous pouvez vous référer dans la requête POST.
<?php if($_POST){ $message = 'Uncaught exception on page ' . $_POST['errorUrl'] . ', line ' . $_POST['errorLine'] . ': ' . $_POST['errorMsg']; mail("[email protected]", "[GTM simoahava.com] Uncaught error", $message); } ?> Encore une fois, très simple. Le PHP attend essentiellement une requête POST, après quoi il remplit une variable $message avec les données de charge utile. Ensuite, il utilise la fonction mail () pour envoyer un courrier à mon courrier électronique avec le sujet [GTM simoahava.com] Uncaught erroret les données d’erreur dans le corps du message.
Ta-da ! Vous venez de créer votre système d’alerte par e-mail en utilisant quelques simples jQuery et PHP. Voici à quoi ressemble un exemple d’e-mail :
Envoyer des e-mails avec l’API Mandrill
Mandrill est un système de messagerie en ligne, qui fournit un cadre assez flexible pour envoyer du courrier à l’aide de son API JSON. Je l’ai choisi simplement parce qu’il est gratuit (vous devez payer si vous envoyez plus de 12 000 mails par mois avec Mandrill), et parce qu’il a l’air assez simple à mettre en place.
Pour que tout soit opérationnel, vous aurez besoin de deux choses :
-
Clé API Mandrill
-
Une balise HTML personnalisée pour envoyer les données utiles à l’API
Pour obtenir la clé API, accédez à http://mandrill.com/signup/ et inscrivez-vous pour y accéder. Une fois que vous vous connectez pour la première fois, vous devez cliquer sur le bouton “Get API Keys”.
Dans l’écran suivant, choisissez “+ Nouvelle clé API” pour générer une nouvelle clé API pour vous. Vous devriez immédiatement voir votre clé nouvellement générée dans la liste ci-dessous.
Et c’est tout pour la configuration de votre compte Mandrill. Ce que vous devez faire ensuite est de créer la balise HTML personnalisée qui négocie avec l’API Mandrill pour envoyer votre courrier. Voici à quoi cette balise devrait ressembler :
<script> var data = { "key": "IVrVuUMfhLFbY97Rjjp1ug", "message": { "text": "Uncaught exception on page " + {{Error - URL}} + ", line " + {{Error - LINE}} + ": " + {{Error - MSG}}, "subject": "[GTM simoahava.com] Uncaught error", "from_email": "[email protected]"OB, "from_name": "GTM Simo", "to": [ { "email": "[email protected]", "name": "Simo Ahava", "type": "to" } ] }, "async": true }; jQuery.ajax({ type: "POST", url: "https://mandrillapp.com/api/1.0/messages/send.json", dataType: "json", data: data }); </script>Comme vous pouvez le voir, vous devez ajouter un peu plus d’informations dans l’objet de charge utile pour satisfaire aux exigences de l’API Mandrill.
Le code lui-même est assez similaire au moment où nous avons envoyé la requête POST au script PHP, à l’exception notable de devoir déclarer explicitement le paramètre dataType comme “json”.
Lorsque le courrier est envoyé avec succès, vous devriez à nouveau voir un e-mail assez hideux dans votre boîte de réception. Au fait, jetez un œil aux rapports de Mandrill. Vous verrez des données assez intéressantes sur votre utilisation de l’API, donc si vous voulez intégrer cela dans un système de messagerie complet, vous pouvez utiliser les puissantes fonctionnalités de Mandrill pour diagnostiquer votre trafic de messagerie.
conclusion
L’envoi d’e-mails via Google Tag Manager ne se fait pas d’un simple clic sur un bouton. Étant donné que la sécurité du navigateur vous empêche d’envoyer des e-mails directement avec JavaScript (c’est-à-dire GTM), vous devrez accéder à des méthodes côté serveur ou à une API externe. Cet article a fourni des exemples très rudimentaires des deux scénarios.
Si vous souhaitez développer cette idée, assurez-vous de rendre votre code aussi étanche que possible. Le détournement du script de messagerie de quelqu’un est un moyen très simple de causer beaucoup de dégâts sous forme de spam. De plus, je n’aime pas le fait que vous deviez fournir la clé de l’API Mandrill “à l’air libre”, donc vous voudrez peut-être regarder le client PHP de Mandrill comme un moyen d’utiliser l’API de Mandrill pour envoyer le courrier côté serveur.
Et avant d’essayer quoi que ce soit, la clé API que j’ai créée était juste à des fins de test, elle n’existe plus.
Quoi qu’il en soit, peut-être qu’à un moment donné, GTM prendra en charge l’envoi de courrier via les propres protocoles de GTM, ce qui rendra ce message agréable et obsolète, mais jusque-là : amusez-vous !
