Let\u2019s say you want to set up a rudimentary email alert system in your Google Tag Manager<\/a> implementation. Say, for example, you want to receive an email every time an uncaught error occurs on your website. It\u2019s not a very good use case, since a large website can spawn hundreds of uncaught exceptions in a short period of time, but let\u2019s just pretend for now.<\/p>\n If you know your JavaScript, you\u2019ll know that you can\u2019t send mail using client-side code. That\u2019s a browser security thing, and I completely understand it. However, a vast majority of websites are created using a CMS which might provide some mail function or hook for you to use. And even if you don\u2019t have a cooperative web server (or there\u2019s no way you can persuade your developers to help), you could use any one of the online email APIs<\/a> that are out there.<\/p>\n In this post, I\u2019ll show two easy ways of getting your mail sent: using the mail()<\/strong> function in PHP, and using Mandrill<\/a>\u2019s API. My use case will be simple: every time an uncaught exception occurs on the website, an email is sent to my address with details about the error. I\u2019ll be using the JavaScript Error Listener<\/a> to catch the error and push it into the mailer.<\/p>\n Word of warning<\/strong>: The examples in this post are very rudimentary and serve simply to show you what the basics are of sending your emails using GTM. Before you start coding a mailer system of your own, make sure you familiarize yourself with the documentation so that you don\u2019t accidentally or unintentionally open a door for mail spammers.<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n For this to work, you\u2019ll need the GTM JavaScript Error Listener up and running, with a couple of macros ready to collect data on the uncaught errors.<\/p>\n So first, set up the error listener with a firing rule of your choice. I have it running on all pages, but if you want to monitor just a specific page, feel free to change the rule.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Next, you\u2019ll need three macros: one for the error message, one for the faulty URL, and one for the line number where the faulty code was found.<\/p>\n {{Error – MSG}} {{Error – URL}} (NOTE<\/strong>: At the time of writing, this macro will return an empty string. However, I\u2019m sure it will be fixed soon. Until then, you can use the default {{url}} macro instead.)<\/p>\n {{Error – LINE}} <\/p>\n <\/a><\/p>\n<\/div>\n And then you\u2019re good to go.<\/p>\n If your site has been built with PHP, you can use the built-in mail()<\/a><\/strong> function to send your emails. (If your site runs on WordPress, you should also take a look at the wp_mail()<\/a> function which is a bit more robust!)<\/p>\n For this method to work, you\u2019ll need two things:<\/p>\n A Custom HTML Tag in your GTM setup to send the data payload to the PHP script<\/p>\n<\/li>\n A PHP script which processes the data and sends it<\/p>\n<\/li>\n<\/ol>\n The Custom HTML Tag below uses jQuery<\/a> to send the POST request, so you\u2019ll need to make sure that jQuery is loaded before<\/strong> the Custom HTML is run. I\u2019m not a huge fan of jQuery or really any JS framework stacked on top of GTM, but for making POST requests using AJAX, it\u2019s a huge help.<\/p>\n So anyway, here\u2019s what the Custom HTML Tag looks like:<\/p>\n Like I said, it\u2019s really bare-bones. You should add some validation code, maybe utilize the success<\/em>, error<\/em> and complete<\/em> callbacks and so forth.<\/p>\n The first bit is about building the payload. I\u2019m doing that by creating an object literal, which is populated by the values retrieved by the error macros created earlier. So when an error occurs, the object data<\/strong> might have the following key-value pairs:<\/p>\n errorUrl: The next bit is about using jQuery\u2019s ajax() function to send the data with a POST request to the custom PHP script. You\u2019ll need to specify the location of the script for this to work.<\/p>\n I wrote a very<\/em> simple mail script, which you can find below. Save this as email.php<\/strong> and store it in a location you can refer to in the POST request.<\/p>\n Again, very simple. The PHP basically waits for a POST request, after which it populates a variable $message with the payload data. Next, it utilizes the mail() function to send mail to my email with the subject Ta-da! You\u2019ve just created your email alert system using some simple jQuery and PHP. Here\u2019s what a sample email looks like:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Mandrill is an online mailing system, which provides a pretty flexible framework for sending mail using their JSON API. I chose it simply because it\u2019s free (you have to pay if you send more than 12,000 mails per month using Mandrill), and because it looks pretty simple to set up.<\/p>\n To get things up and running, you\u2019ll need two things:<\/p>\n Mandrill API key<\/p>\n<\/li>\n A Custom HTML Tag to send the payload data to the API<\/p>\n<\/li>\n<\/ol>\n To get the API key, browse to http:\/\/mandrill.com\/signup\/<\/a>, and sign up for access. Once you log in for the first time, you should click on the \u201cGet API Keys\u201d button.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n In the next screen, choose the \u201c+ New API Key\u201d to generate a new API key for you. You should immediately see your newly generated key in the list below.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n And that\u2019s it for setting up your Mandrill account. What you need to do next is create the Custom HTML Tag which negotiates with the Mandrill API to send your mail. Here\u2019s what this tag should look like:<\/p>\n As you can see, you need to add a bit more information into the payload object to satisfy the requirements of the Mandrill API<\/a>.<\/p>\n The code itself is pretty similar to when we sent the POST request to the PHP script, with the notable exception of having to declare the dataType parameter explicitly as \u201cjson\u201d.<\/p>\n When the mail is sent successfully, you should again see a pretty hideous email in your inbox. By the way, take a look at Mandrill\u2019s reports. You\u2019ll see some pretty interesting data on your API use, so if you want to build this into a whole email-system-thing, you can use Mandrill\u2019s powerful features to diagnose your mail traffic.<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nBefore you start<\/h2>\n
![\"JavaScript](\"https:\/\/www.simoahava.com\/images\/2014\/04\/error-listener.jpg#ZgotmplZ\")
<\/p>\n
Macro Type: Data Layer Variable
Data Layer Variable Name: gtm.errorMessage<\/p>\n
Macro Type: Data Layer Variable
Data Layer Variable Name: gtm.errorUrl<\/p>\n
Macro Type: Data Layer Variable
Data Layer Variable Name: gtm.errorLineNumber<\/p>\n![\"Error](\"https:\/\/www.simoahava.com\/images\/2014\/04\/error-macros.jpg#ZgotmplZ\")
<\/p>\nSend mail with PHP<\/h2>\n
\n
script>\n var<\/span> data = {\n errorUrl: {{Error<\/span> - URL}},\n errorLine: {{Error<\/span> - LINE}},\n errorMsg: {{Error<\/span> - MSG}}\n };\n jQuery.ajax({\n type: \"POST\"<\/span>,\n url: \"\/wp-content\/uploads\/email.php\"<\/span>,\n data: data\n });\nscript<\/span>><\/code><\/pre>\n<\/div>\nhttps:\/\/www.simoahava.com\/<\/code>
errorLine: \u201c3\u201d
errorMsg: \u201cUncaught ReferenceError: myFunction is not defined\u201d<\/p>\n\nif<\/span>($_POST<\/span>){\n $message<\/span> = 'Uncaught exception on page '<\/span> . $_POST<\/span>['errorUrl'<\/span>] . \n ', line '<\/span> . $_POST<\/span>['errorLine'<\/span>] . \n ': '<\/span> . $_POST<\/span>['errorMsg'<\/span>];\n mail(\"[email\u00a0protected]<\/a>\"<\/span>, \"[GTM simoahava.com] Uncaught error\"<\/span>, $message<\/span>);\n}\n?><\/span>\n<\/span><\/code><\/pre>\n<\/div>\n[GTM simoahava.com] Uncaught error<\/code>, and the error data in the message body.<\/p>\n![\"Error](\"https:\/\/www.simoahava.com\/images\/2014\/04\/error-mail.jpg#ZgotmplZ\")
<\/p>\nSend mail with the Mandrill API<\/h2>\n
\n
![\"Mandrill](\"https:\/\/www.simoahava.com\/images\/2014\/04\/mandrill-get-keys.jpg#ZgotmplZ\")
<\/p>\n![\"New](\"https:\/\/www.simoahava.com\/images\/2014\/04\/new-api-key.jpg#ZgotmplZ\")
<\/p>\nscript>\n var<\/span> data = {\n \"key\"<\/span>: \"IVrVuUMfhLFbY97Rjjp1ug\"<\/span>,\n \"message\"<\/span>: {\n \"text\"<\/span>: \"Uncaught exception on page \"<\/span> + {{Error<\/span> - URL}} +\n \", line \"<\/span> + {{Error<\/span> - LINE}} +\n \": \"<\/span> + {{Error<\/span> - MSG}},\n \"subject\"<\/span>: \"[GTM simoahava.com] Uncaught error\"<\/span>,\n \"from_email\"<\/span>: \"[email\u00a0protected]<\/a>\"<\/span>OB,\n \"from_name\"<\/span>: \"GTM Simo\"<\/span>,\n \"to\"<\/span>: [\n {\n \"email\"<\/span>: \"[email\u00a0protected]<\/a>\"<\/span>,\n \"name\"<\/span>: \"Simo Ahava\"<\/span>,\n \"type\"<\/span>: \"to\"<\/span>\n }\n ]\n },\n \"async\"<\/span>: true<\/span>\n };\n jQuery.ajax({\n type: \"POST\"<\/span>,\n url: \"https:\/\/mandrillapp.com\/api\/1.0\/messages\/send.json\"<\/span>,\n dataType: \"json\"<\/span>,\n data: data\n });\nscript<\/span>><\/code><\/pre>\n<\/div>\n
![\"Mandrill](\"https:\/\/www.simoahava.com\/images\/2014\/04\/mandrill-features.jpg#ZgotmplZ\")
<\/p>\n