Supongamos que desea configurar un sistema de alerta por correo electrónico rudimentario en su Administrador de etiquetas de Google implementación. Digamos, por ejemplo, que desea recibir un correo electrónico cada vez que se produzca un error no detectado en su sitio net. No es un caso de uso muy bueno, ya que un sitio net grande puede generar cientos de excepciones no detectadas en un corto período de tiempo, pero pretendamos por ahora.
Si conoce JavaScript, sabrá que no puede enviar correo utilizando el código del lado del cliente. Eso es una cuestión de seguridad del navegador y lo entiendo completamente. Sin embargo, la gran mayoría de los sitios net se crean utilizando un CMS que puede proporcionar alguna función de correo o enlace para su uso. E incluso si no tiene un servidor net cooperativo (o no hay forma de convencer a sus desarrolladores para que le ayuden), puede utilizar cualquiera de los siguientes API de correo electrónico en línea que hay por ahí.
En esta publicación, mostraré dos formas sencillas de enviar su correo: usando el correo() funcionar en PHP y usar MandrilAPI de. Mi caso de uso será easy: cada vez que ocurre una excepción no detectada en el sitio net, se envía un correo electrónico a mi dirección con detalles sobre el error. estaré usando el Escucha de errores de JavaScript para detectar el error y enviarlo al correo.
palabra de advertencia: Los ejemplos en esta publicación son muy rudimentarios y sirven simplemente para mostrarle cuáles son los conceptos básicos para enviar sus correos electrónicos usando GTM. Antes de comenzar a codificar su propio sistema de correo, asegúrese de familiarizarse con la documentación para no abrir, unintentional o involuntariamente, una puerta a los spammers de correo.
incógnita
El boletín a fuego lento
Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.
Antes de empezar
Para que esto funcione, necesitará el detector de errores de JavaScript de GTM en funcionamiento, con un par de macros listas para recopilar datos sobre los errores no detectados.
Primero, configure el detector de errores con una regla de activación de su elección. Lo tengo ejecutándose en todas las páginas, pero si desea monitorear solo una página específica, no dude en cambiar la regla.
A continuación, necesitará tres macros: una para el mensaje de error, otra para la URL defectuosa y otra para el número de línea donde se encontró el código defectuoso.
{{Error – MSG}}
Tipo de macro: variable de capa de datos
Nombre de variable de capa de datos: gtm.errorMessage
{{Error – URL}}
Tipo de macro: variable de capa de datos
Nombre de variable de capa de datos: gtm.errorUrl
(NOTA: En el momento de escribir este artículo, esta macro devolverá una cadena vacía. Sin embargo, estoy seguro de que se solucionará pronto. Hasta entonces, puedes usar la macro predeterminada {{url}} en su lugar).
{{Error – LÍNEA}}
Tipo de macro: variable de capa de datos
Nombre de variable de capa de datos: gtm.errorLineNumber
Y entonces estarás listo para comenzar.
Enviar correo con PHP
Si su sitio ha sido creado con PHP, puede utilizar el programa integrado correo() función para enviar sus correos electrónicos. (Si su sitio funciona con WordPress, también debería echar un vistazo a wp_correo() función que es un poco más robusta!)
Para que este método funcione, necesitarás dos cosas:
-
Una etiqueta HTML personalizada en su configuración de GTM para enviar la carga de datos al script PHP
-
Un script PHP que procesa los datos y los envía.
La etiqueta HTML personalizada a continuación utiliza jQuery para enviar la solicitud POST, por lo que deberá asegurarse de que jQuery esté cargado antes Se ejecuta el HTML personalizado. No soy un gran admirador de jQuery ni de ningún marco JS apilado sobre GTM, pero para realizar solicitudes POST usando AJAX, es de gran ayuda.
De todos modos, así es como se ve la etiqueta HTML personalizada:
<script>
var knowledge = {
errorUrl: {{Error - URL}},
errorLine: {{Error - LINE}},
errorMsg: {{Error - MSG}}
};
jQuery.ajax({
sort: "POST",
url: "/wp-content/uploads/e-mail.php",
knowledge: knowledge
});
script>Como dije, es realmente básico. Debería agregar algún código de validación, tal vez utilizar el éxito, error y completo devoluciones de llamada, and many others.
La primera parte trata sobre la construcción de la carga útil. Lo hago creando un objeto literal, que se completa con los valores recuperados por las macros de error creadas anteriormente. Entonces, cuando ocurre un error, el objeto datos podría tener los siguientes pares clave-valor:
URL de error: https://www.simoahava.com/
línea de error: “3”
errorMsg: “Error de referencia no detectado: myFunction no está definida”
El siguiente paso trata sobre el uso de la función ajax() de jQuery para enviar los datos con una solicitud POST al script PHP personalizado. Deberá especificar la ubicación del script para que esto funcione.
escribí un muy script de correo easy, que puede encontrar a continuación. Guarda esto como correo electrónico.php y guárdelo en una ubicación a la que pueda consultar en la solicitud POST.
if($_POST){
$message = 'Uncaught exception on web page ' . $_POST('errorUrl') .
', line ' . $_POST('errorLine') .
': ' . $_POST('errorMsg');
mail("(e-mail protected)", "(GTM simoahava.com) Uncaught error", $message);
}
?>
De nuevo, muy easy. Básicamente, PHP espera una solicitud POST, después de lo cual completa una variable $message con los datos de la carga útil. A continuación, utiliza la función mail() para enviar un correo a mi correo electrónico con el asunto (GTM simoahava.com) Uncaught errory los datos de error en el cuerpo del mensaje.
¡Ta-da! Acaba de crear su sistema de alerta por correo electrónico utilizando jQuery y PHP simples. Así es como se ve un correo electrónico de muestra:
Enviar correo con la API de Mandrill
Mandrill es un sistema de correo en línea que proporciona un marco bastante versatile para enviar correo utilizando su API JSON. Lo elegí simplemente porque es free of charge (tienes que pagar si envías más de 12.000 correos por mes usando Mandrill) y porque parece bastante sencillo de configurar.
Para que todo esté en funcionamiento, necesitará dos cosas:
-
Clave API de mandril
-
Una etiqueta HTML personalizada para enviar los datos de carga útil a la API
Para obtener la clave API, vaya a http://mandrill.com/signup/y regístrate para acceder. Una vez que inicie sesión por primera vez, debe hacer clic en el botón “Obtener claves API”.
En la siguiente pantalla, elija “+ Nueva clave API” para generar una nueva clave API para usted. Debería ver inmediatamente su clave recién generada en la lista a continuación.
Y eso es todo para configurar tu cuenta Mandrill. Lo que debe hacer a continuación es crear la etiqueta HTML personalizada que negocia con la API de Mandrill para enviar su correo. Así es como debería verse esta etiqueta:
<script>
var knowledge = {
"key": "IVrVuUMfhLFbY97Rjjp1ug",
"message": {
"textual content": "Uncaught exception on web page " + {{Error - URL}} +
", line " + {{Error - LINE}} +
": " + {{Error - MSG}},
"topic": "(GTM simoahava.com) Uncaught error",
"from_email": "(e-mail protected)"OB,
"from_name": "GTM Simo",
"to": (
{
"e-mail": "(e-mail protected)",
"identify": "Simo Ahava",
"sort": "to"
}
)
},
"async": true
};
jQuery.ajax({
sort: "POST",
url: "https://mandrillapp.com/api/1.0/messages/ship.json",
dataType: "json",
knowledge: knowledge
});
script>Como puede ver, necesita agregar un poco más de información al objeto de carga útil para satisfacer el requisitos de la API de Mandrill.
El código en sí es bastante related a cuando enviamos la solicitud POST al script PHP, con la notable excepción de tener que declarar el parámetro dataType explícitamente como “json”.
Cuando el correo se envíe correctamente, debería volver a ver un correo electrónico bastante horrible en su bandeja de entrada. Por cierto, echa un vistazo a los informes de Mandrill. Verá algunos datos bastante interesantes sobre el uso de su API, por lo que si desea integrar esto en un sistema de correo electrónico completo, puede usar las potentes funciones de Mandrill para diagnosticar su tráfico de correo.
Conclusiones
El envío de correo a través del Administrador de etiquetas de Google no se realiza con solo hacer clic en un botón. Debido a que la seguridad del navegador le impide enviar correo electrónico directamente con JavaScript (es decir, GTM), deberá acceder a métodos del lado del servidor o a alguna API externa. Esta publicación proporcionó ejemplos muy rudimentarios de ambos escenarios.
Si desea desarrollar esta thought, asegúrese de que su código sea lo más impermeable posible. Secuestrar el script de correo de alguien es una manera realmente fácil de causar mucho daño en forma de spam. Además, no me gusta el hecho de que tengas que proporcionar la clave API de Mandrill “al aire libre”, por lo que quizás quieras considerar el cliente PHP de Mandrill como una forma de utilizar la API de Mandrill para enviar el correo del lado del servidor.
Y antes de que intentes algo, la clave API que creé fue solo para fines de prueba, ya no existe.
De todos modos, tal vez en algún momento GTM admita el envío de correo a través de los protocolos propios de GTM, lo que hará que esta publicación sea agradable y obsoleta, pero hasta entonces: ¡diviértete!