{"id":221,"date":"2025-08-14T21:30:19","date_gmt":"2025-08-15T03:30:19","guid":{"rendered":"https:\/\/www.mariatech.com.mx\/blog\/?p=221"},"modified":"2026-05-31T16:40:12","modified_gmt":"2026-05-31T23:40:12","slug":"detectar-clic-en-botones-con-google-tag-manager-y-ga4","status":"publish","type":"post","link":"https:\/\/www.mariatech.com.mx\/blog\/marketing\/detectar-clic-en-botones-con-google-tag-manager-y-ga4\/","title":{"rendered":"Detectar clic en botones con Google Tag Manager Y GA4"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Para este tutorial vamos a suponer que ya tienes lo siguiente:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Google Analytics<\/strong><\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Cuenta creada en Google Analytics.<\/li>\n\n\n\n<li>Propiedad GA4 creada para recoger los datos de tu sitio web. <\/li>\n\n\n\n<li>C\u00f3digo instalado en tu sitio web.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Google Tag Manager<\/strong><\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Cuenta creada en Google Tag Manager.<\/li>\n\n\n\n<li>Contenedor creado para tu sitio web.<\/li>\n\n\n\n<li>C\u00f3digo instalado en tu sitio web.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Pasos<\/h3>\n\n\n\n<h5 class=\"wp-block-heading\">Configuraci\u00f3n de la etiqueta de Google Analytics 4<\/h5>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ingresa a Google Tag Manager.<\/li>\n\n\n\n<li>Selecciona el contenedor con el vas a trabajar.<\/li>\n\n\n\n<li>Del men\u00fa de la izquierda selecciona &#8220;Etiquetas&#8221;.<\/li>\n\n\n\n<li>Crea una nueva etiqueta de tipo &#8220;Google Analytics: evento de GA4&#8221;.\n<ul class=\"wp-block-list\">\n<li>ID DE MEDICI\u00d3N: Este valor lo encuentras en Google Analytics, debe comenzar con &#8220;G-&#8221; si comienza con &#8220;UA-&#8221; debes migrar a GA4.<\/li>\n\n\n\n<li>En la activaci\u00f3n selecciona &#8220;Initialization All Pages&#8221;.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Publica o env\u00eda el contenedor para que tome los cambios.<\/li>\n<\/ol>\n\n\n\n<h5 class=\"wp-block-heading\">Configuraci\u00f3n del evento a detectar en Google Tag Manager<\/h5>\n\n\n\n<h6 class=\"wp-block-heading\">BOT\u00d3N<\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">El bot\u00f3n o elemento al cual quieres detectar el clic debe tener un identificador para trabajar mejor puede ser la propiedad &#8220;id&#8221; o la clase (&#8220;class&#8221;), por ejemplo <strong><em>id = &#8220;btn-whatsapp&#8221;<\/em><\/strong> o <strong><em>class=&#8221;btn-call&#8221;<\/em><\/strong>.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Activador<\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a crear nuestro disparador del evento.<br>Nosotros vamos a trabajar con el ID del elemento a detectar, en este ejemplo &#8220;btn-whatsapp&#8221;.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Del men\u00fa izquierdo seleccionamos &#8220;Activadores&#8221;.<\/li>\n\n\n\n<li>Seleccionamos la opci\u00f3n de &#8220;Nuevo&#8221; y le ponemos el nombre que queramos &#8220;Bot\u00f3n WhatsApp&#8221;.<\/li>\n\n\n\n<li>Configuramos el activador:\n<ul class=\"wp-block-list\">\n<li>Tipo de activador: Todos los elementos.<\/li>\n\n\n\n<li>Este activador se activa en: Algunos clics.<\/li>\n\n\n\n<li>Ejecute este activador cuando tenga lugar un evento y se cumplan todas estas condiciones: {{Click ID}} , es igual a , btn-whatsapp.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Guardamos.<\/li>\n<\/ol>\n\n\n\n<h6 class=\"wp-block-heading\">etiqueta<\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora vamos relacionar la etiqueta al activador.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Del men\u00fa izquierdo seleccionamos &#8220;Etiquetas&#8221;.<\/li>\n\n\n\n<li>Seleccionamos la opci\u00f3n de &#8220;Nueva&#8221;  y le ponemos el nombre que queramos &#8220;Clic Bot\u00f3n WhatsApp&#8221;.<\/li>\n\n\n\n<li>Configuraci\u00f3n de la etiqueta:\n<ul class=\"wp-block-list\">\n<li>Tipo de etiqueta: Google\u00a0Analytics: evento de GA4.<\/li>\n\n\n\n<li>ID\u00a0de medici\u00f3n:  Este valor lo encuentras en Google Analytics, debe comenzar con &#8220;G-&#8221; si comienza con &#8220;UA-&#8221; debes migrar a GA4 (es el mismo que usamos la vez pasada).<\/li>\n\n\n\n<li>Nombre del evento: click_boton_whatsapp.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Activicaci\u00f3n: Seleccionamos el activador que creamos anteriormente &#8220;Bot\u00f3n WhatsApp&#8221;.<\/li>\n\n\n\n<li>Guardamos.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez que tenemos todos estos pasos publicamos o enviamos de nuevo nuestro contenedor para que sea tomados los cambios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pruebas<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para comprobar que todo ha ido bien vamos hacer lo siguiente:<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Modo Vista Previa de Google Tag Manager (Tag Assistant)<\/h5>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Activa el modo vista previa.<\/li>\n\n\n\n<li>Coloca la URL de tu sitio web.<\/li>\n\n\n\n<li>Da clic en el bot\u00f3n de WhatsApp.<\/li>\n\n\n\n<li>En el Tag Assistan:\n<ul class=\"wp-block-list\">\n<li>En la parte izquierda del lado del resumen se debe mostrar el evento de &#8220;clic&#8221;.<\/li>\n\n\n\n<li>En el bloque de resultado en la pesta\u00f1a de &#8220;Etiquetas&#8221; debe aparecer <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h5 class=\"wp-block-heading\">Confirmar en Google Analytics 4 (GA4)<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ingresa a Google Anatycs y selecciona la propiedad de donde tomaste el ID DE MEDICI\u00d3N.<\/li>\n\n\n\n<li>Del men\u00fa  selecciona &#8220;Informes&#8221;.<\/li>\n\n\n\n<li>Seguido de &#8220;Resumen en tiempo real&#8221;.<\/li>\n\n\n\n<li>En el bloque de eventos te tendr\u00e1 que aparecer el evento &#8220;click_boton_whatsapp&#8221; que es el de la etiqueta que creaste.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Si tienes m\u00e1s botones sigue los pasos desde &#8220;Configuraci\u00f3n del evento a detectar en Google Tag Manager&#8221;, espero est\u00e1 informaci\u00f3n te sea de ayuda.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si necesitas ayuda para crear un proyecto de marketing en <strong>Maria Tech <\/strong>contamos con los expertos para apoyarte.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wa.me\/523414305984\" target=\"_blank\" rel=\"noreferrer noopener\">(+52) 341-430-59-84<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"mailto:info@mariatech.com.mx\">info@mariatech.com.mx<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>C\u00f3mo configurar Google Tag Manager y Google Analytics 4 para detectar clic en botones sin morir en el intento&#8230;<\/p>\n","protected":false},"author":1,"featured_media":280,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48],"tags":[43,44,45,46,47],"class_list":["post-221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","tag-ga4","tag-gtm","tag-google-tag-manager","tag-google-analytics","tag-marketing"],"_links":{"self":[{"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/posts\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":0,"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/posts\/221\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/media\/280"}],"wp:attachment":[{"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}