Deseas añadir Google Tag Manager a WordPress?
Google Tag Manager tiene un montón de beneficios para los sitios de WordPress. Le ayuda a agregar y administrar todos los diversos scripts que utiliza en su sitio. Por ejemplo, en lugar de tener que añadir manualmente código para servicios como:
- Google Analytics
- Seguimiento de eventos
- Google Optimize
Puedes administrarlo todo a través de Google Tag Manager!
Si te encuentras a menudo añadiendo varios scripts a tu sitio de WordPress, Google Tag Manager va a ser mucho más conveniente para ti. Y una vez que lo domine, puede incluso empezar a utilizarlo para recopilar más datos procesables para informar sus esfuerzos de marketing.
En este post, te mostraré paso a paso cómo instalar Google Tag Manager en tu sitio de WordPress, incluyendo dónde añadir el código.
Entonces, te daré una guía rápida de cómo puedes publicar tu primera etiqueta y asegurarte de que funciona.
¡Vamos allá!
Google Tag Manager Tutorial: Instalar en WordPress
Video de Alejandro Terbeck
Paso 1: Regístrese para obtener una cuenta de Google Tag Manager
Si aún no lo has hecho, lo primero que tienes que hacer es registrarte para obtener una cuenta gratuita de Google Tag Manager.
Puede hacerlo al encabezar aquí .
Una vez que se registre, debe estar en la interfaz Agregar una nueva cuenta . Ponga un nombre a su empresa:
Luego, en la sección
Setup Container, introduzca el nombre de su sitio web en el campo Container name y elija Web:
Una vez que acepte las Condiciones de servicio de Google, Google debería llevarle a la interfaz del Administrador de etiquetas de Google y mostrarle dos fragmentos de código. Mantenga esta ventana abierta porque necesitará agregar ambos fragmentos de código a su sitio de WordPress en la siguiente sección :
Paso 2: Añadir fragmentos de código del Administrador de Etiquetas de Google a su sitio web
Esta es la parte una que es un poco complicada. Anteriormente, sólo tenías que añadir un fragmento de código a la sección de tu tema, pero ahora Google Tag Manager quiere que añadas dos fragmentos:
- The first one goes in your <head> section
- La segunda va justo después de la apertura <body> tag
Más allá de editar directamente tu child theme, WordPress no te da una manera fácil de insertar el código after la etiqueta <body> y cada tema funciona un poco diferente, así que no puedo darte un tutorial que se aplique a todos los temas.
- Si ya se siente cómodo editando los archivos del tema de su hijo directamente , puede hacerlo.
- Si no te sientes cómodo trabajando directamente con los archivos de tu tema, te mostraré dos métodos diferentes que puedes usar: un plugin para principiantes y un método de código simplificado.
Opción 1: Usar inyecciones de cabeza, pie de página y posteriores
Si te parece bien dedicar un plugin al Google Tag Manager, la forma más sencilla de añadirlo es utilizando el plugin gratuito Head, Footer and Post Injections plugin.
Para empezar, instale y active este plugin gratuito. Luego, vaya a Configuración → Encabezado y Pie de página en su tablero de WordPress para acceder a la interfaz del plugin.
Ahora:
- Pegue el fragmento de código first Google Tag Manager en la casilla ON EVERY PAGE en la casilla <HEAD> sección PAGE SECTION INJECTION
- Pegue el fragmento de código segundo Google Tag Manager en la casilla DESKTOP* de la sección AFTER THE <BODY> TAG section (no se preocupe – el fragmento de código seguirá cargándose en el móvil. Las inyecciones de cabeza, pie de página y posteriores permiten utilizar fragmentos de código separados si marca la casilla móvil )
Debería tener el siguiente aspecto:
Asegúrate de guardar los cambios y ya está todo hecho!
Opción 2: Use A Functions.php Code Snippet
Permítanme decir que este método es técnicamente no 100% óptimo. Funciona bien para la mayoría de los sitios, pero le explicaré lo que quiero decir después de mostrarle qué hacer.
Para usarlo, todo lo que necesitas hacer es añadir este fragmento de código a tu tema del niñofuntions.php archivo:
add_action('wp_head', 'gtm_head_code');
Función gtm_head_code(){
?
FIRST_SCRIPT_FROM_GTM_INTERFACE
<?php
}
add_action('wp_footer', 'gtm_body_code');
Función gtm_body_code(){
?
SECOND_SCRIPT_FROM_GTM_INTERFACE
<?php
}
Asegúrese de reemplazar los marcadores de posición con los fragmentos de código reales.
Así que, ¿por qué este método no es 100% óptimo?
Debido a que este método pone el segundo fragmento de código en el pie de página, en lugar de después de la apertura de la etiqueta <body>, su etiqueta might not fire si un visitante no carga completamente su página (lo cual es raro, pero posible). Esa es la razón por la que Google recomienda que lo agregue lo más alto posible en el código de su sitio.
¿Pero para la mayoría de los sitios? Este método es totalmente fino.
Paso 3: Pruebe para asegurarse de que sus fragmentos están funcionando
Para asegurarse de que ha instalado correctamente Google Tag Manager:
- Ir al libre GA Checker tool
- Introduzca la URL de su sitio web
- Click Compruebe su sitio
Ir a la pestaña Tag Manager de los resultados y buscar la casilla verde en la columna Tag Manager column:
Si lo ves – ¡enhorabuena! Usted instaló correctamente los scripts de Google Tag Manager en su sitio WordPress.
Ahora, voy a repasar rápidamente cómo usar Google Tag Manager para crear tu primera etiqueta.
Haciendo clic en Configuración de etiquetas, puede elegir el tipo de etiqueta que desea crear. Google incluye todo tipo de opciones predefinidas para cosas como Google Analytics, Google Optimize y muchos servicios de terceros.
Pero también puede usar los tags
Custom HTML o custom Image para insertar any client-side code:
Una vez que elija su Tag Type, tendrá que configurarlo siguiendo los ajustes.
Luego, puede hacer clic en la sección Triggering para elegir cuándo «disparar» su etiqueta.
El valor predeterminado es Todas las páginas , pero también puede ser mucho más específico si lo desea haciendo clic en el botón + icon:
Una vez que termine de configurar las cosas, haga clic en Save.
Paso 5: Publique su contenedor
Ahora, todo lo que necesita hacer para que sus etiquetas estén activas es publicar su Contenedor.
Para ello, haga clic en el botón SUBMIT de la interfaz de Google Tag Manager:
Luego, introduzca un Version Name y Version Description. Le recomiendo que los haga lo más detallados posible para ayudar con el control de versiones más adelante. Es decir, explique exactamente qué etiquetas ha añadido y qué hacen.
Luego, haga clic en PUBLISH:
Y eso es todo! Acabas de publicar tu primera etiqueta.
Cómo probar si las marcas individuales están disparando
Si quieres asegurarte de que las etiquetas individuales de tu contenedor se disparan, Google ofrece una extensión de navegador gratuita para Chrome llamada Asistente de etiquetas
Recursos para ayudarle a convertirse en un Google Tag Manager Pro
En este punto, has añadido con éxito Google Tag Manager a WordPress. Pero Google Tag Manager es bastante profundo en funcionalidad y explicar el gran número de opciones de interfaz va más allá del alcance de este post.
Más información sobre Google Tag Manager
Google Tag Manager es una herramienta tan poderosa que me horrorizó la falta de información al investigar esta entrada.
Bueno, no exactamente una «falta de información» per se, sino la aparente incapacidad de los pocos posts disponibles para explicar qué es Google Tag Manager y qué es lo que hace.
Si buscas más información sobre Google Tag Manager y cómo configurarlo en tu sitio WordPress, no busques más. Porque viniste al lugar correcto.
En este post, esbozamos:
- Qué es el Administrador de Etiquetas de Google
- Por qué necesita usar la herramienta, y
- Cómo instalarlo en tu sitio de WordPress manualmente o usando un plugin
Además, le mostraremos Google Tag Manager en acción para darle una idea de lo que puede conseguir con un sistema de gestión de etiquetas como ningún otro.
Decimos esto porque existen otros sistemas de gestión de etiquetas como Tealium, Qubit y Adobe Experience Platform Launch, por mencionar sólo algunos.
Que fuera del camino, hay mucho que aprender así que vamos a zambullirnos de lleno.
¿Qué es Google Tag Manager?
Google Tag Manager es una herramienta impresionante para sus necesidades de seguimiento digital.
Le permite desplegar etiquetas en su sitio web sin necesidad de editar su código. ¿Muy vago?
Para ofrecerle una imagen más clara, permítanos primero definir una etiqueta en términos de seguimiento digital.
Una etiqueta es simplemente un trozo de código JavaScript que usted agrega a su sitio para que pueda activar funciones de terceros tales como análisis de tráfico, publicidad y chat en vivo, entre otras cosas.
En algunos círculos, las etiquetas también se conocen como web beacons o píxeles de seguimiento.
Un buen ejemplo de una etiqueta es el código de seguimiento de Google Analytics que usted añade a su sitio, para que pueda seguir su tráfico.
El propósito de una etiqueta es recolectar datos de visitantes para análisis y herramientas de marketing digital.
Las empresas que proporcionan estas etiquetas, por ejemplo, Google Analytics, AdWords, Facebook, LinkedIn, etc., son conocidas como proveedores de etiquetas.
¿Por qué Google Tag Manager?
Tradicionalmente, implementar etiquetas en su sitio web de WordPress significaba editar su código manualmente (o más bien directamente).
En WordPress, eso significa editar varios archivos como el header.php y functions.php entre otros.
Ahora, si sigues añadiendo código JavaScript a tus archivos, esto ralentizará tu sitio. Además, abre su sitio a las vulnerabilidades de seguridad, especialmente si obtiene etiquetas de fuentes no confiables.
También está el problema de mantener todo ese código que estás añadiendo a tus páginas.
Por ejemplo, necesitará actualizar las etiquetas si hay cambios y esto significa profundizar en su código.
De nuevo, esto no es para principiantes. También hay mucho margen de error. Ya sabes, errar es humano.
¿Qué hacer?
Si tiene varias etiquetas, puede recurrir a Google Tag Manager para realizar un seguimiento de todas ellas desde una única ubicación central.
Aquí hay un par de beneficios para llevar el punto a casa:
- Con Google Tag Manager, nunca más tendrás que copiar y pegar bloques de código en tus páginas web.
- Puedes migrar todas las etiquetas existentes a Google Tag Manager
- Google Tag Manager te ofrece un único contenedor para desplegar múltiples etiquetas y gestionarlas desde un panel de control intuitivo que simplifica todo el proceso
- Este sistema de gestión de etiquetas le permite desplegar etiquetas rápidamente. Por ejemplo, en lugar de copiar y pegar el código de Google Analytics en su sitio, sólo tiene que añadir su ID de seguimiento de Google Analytics en Google Tag Manager y viola – Google Analytics está activo en su sitio
- Configurar Google Tag Manager en su sitio WordPress es tan fácil como A, B, C – Añadir GTM a WordPress manualmente es fácil. Usar un plugin es aún más fácil. Elija el método que mejor se adapte a sus necesidades.
- Google Tag Manager le ayuda a capturar muchos datos para sus necesidades de marketing. Datos que puede que no pueda capturar utilizando otro software de seguimiento. Esto se traduce en datos oportunos y precisos – el tipo de datos que significa toda la diferencia entre el éxito y el fracaso.
- Haga clic y vaya a añadir etiquetas a su sitio ya que Google Tag Manager incluye muchas integraciones como AdWords, Analytics, Google Optimize, Adometry, Crazzy Egg, LinkedIn y Shareholic, entre otras
- Además, puede crear un número ilimitado de etiquetas gracias a la compatibilidad con HTML personalizado
Y lo único que tienes que hacer es instalar el código de Google Tag Manager en tu sitio manualmente o a través de un plugin.
Google Tag Manager»procesará» el código JavaScript para usted y luego proporcionará la funcionalidad a su sitio a través del contenedor.¿Eso tiene sentido? Espero que así sea.
Por ejemplo, en lugar de añadir el código de Google Analytics a su sitio, sólo tiene que integrar Analytics con GTM y su trabajo está hecho.
Escuchen, escuchen – añadir etiquetas en Google Tag Manager es cosa de niños de cuarto grado, nunca más necesitarán un desarrollador.
Si hay un millón de funciones ya hechas, te preguntarás por qué Google Tag Manager es gratuito.
Sí, lo has leído bien. Es gratis.
Pero también está la versión premium con aún más funciones y soporte las 24 horas del día, los 7 días de la semana.
Aún así, dudo que necesites las funciones premium en un futuro cercano, porque la versión gratuita está repleta de amigos.
Con todas las características que necesita para recopilar datos como los profesionales.
Por ejemplo, puede capturar incluso a usuarios que estén viendo vídeos. Además de eso, puedes ver cuánto tiempo cada usuario vio el video.
Y eso es sólo la punta del iceberg, se pueden recoger muchas métricas.
Desventajas
- La versión gratuita de Google Tag Manager no ofrece soporte Premium
- Hay una curva de aprendizaje, pero de nuevo, YouTube tiene un par de vídeos agradables en Google Tag Manager. Hacia el final de este post, siéntase libre de ver algunos de los videos que le recomendaremos en la sección de recursos
Esta no es una lista exhaustiva de méritos/deméritos, así que seguiremos adelante. Vamos a arremangarnos y a ensuciarnos.
Cómo configurar el administrador de etiquetas de Google en WordPress
En esta sección, instalaremos Google Tag Manager en su sitio WordPress:
- Manualmente y
- A través de un plugin
Sin más preámbulos, vayamos al grano.
En primer lugar, crear una cuenta de Google Tag Manager
El primer paso consiste en crear una cuenta gratuita de Google Tag Manager. Esto desbloquea el famoso panel de control de GTM y las etiquetas (o tracking ID) que necesita para integrar la herramienta con su sitio de WordPress.
Vaya al sitio web de Google Tag Manager. Inicie sesión con su cuenta de Google (o cree una cuenta si aún no la tiene) como se muestra a continuación.
Serás redirigido al hermoso panel de control de administración de Google Tag Manager. A continuación, haga clic en el enlace Crear cuenta, tal y como se muestra en la captura de pantalla que aparece a continuación.
En la siguiente pantalla, introduzca el nombre de su cuenta (puede ser su empresa), seleccione su país y pulse el botón Continuar.
A continuación, introduzca su nombre de dominio en el campo Nombre del contenedor y seleccione Web. Después de eso, pulse el botón Crear como se detalla a continuación.
Acepte las condiciones del contrato de servicio de Google Tag Manager y las condiciones de procesamiento de datos que se muestran en la siguiente imagen.
Aparecerá la siguiente ventana emergente con los códigos de instalación de Google Tag Manager.
Mantenga abierta la pestaña anterior ya que necesitará estos dos códigos para configurar Google Tag Manager en su sitio WordPress manualmente. Como usted notará, GTM ofrece instrucciones sobre dónde pegar los códigos, pero puede ser un reto si usted es el principiante absoluto.
Sin embargo, no se preocupe, le mostraremos exactamente qué hacer en la próxima sección.
Notas importantes antes de proceder:
- Haz una copia de seguridad de tu sitio WordPress antes de hacer cambios en tus archivos de temas
- Mejor aún, cree un tema hijo de WordPress y edítelo en lugar del tema padre
Configuración manual del administrador de etiquetas de Google
En una nueva pestaña, inicie sesión en el panel de control del administrador de WordPress y vaya a Apariencia > Editor.
Note que de la imagen de arriba, estamos usando un tema infantil del tema Elegant WordPress libre en nuestro ejemplo. También hemos copiado un par de archivos, por ejemplo header.php, footer.php, rlt.css y 404.php al tema hijo. Pegaremos los códigos de instalación de Google Tag Manager en el archivo header.php.
Haga clic en el encabezado del tema (header.php) desde el navegador de archivos derecho para iniciar header.php dentro del editor de temas.
Desde nuestra cuenta GTM, las instrucciones dicen que necesita pegar el primer código en la parte superior de la etiqueta <head>, y el segundo código inmediatamente después de abrir la etiqueta <body>.
¿Puede ver las etiquetas <cabeza> y <cuerpo> en el archivo header.php? La etiqueta <body> en WordPress puede parecer un poco diferente. Por ejemplo, los nuestros se parecen a <body <?php body_class(); ?>>. ¿Puedes verlo en la imagen de arriba? Apuesto a que sí, sigamos adelante.
Copia el primer código del Administrador de Etiquetas de Google y pégalo en alto en el elemento <head> como se muestra en la imagen de abajo.
Luego, copie el segundo código y péguelo inmediatamente después de la etiqueta <body> como se muestra a continuación.
Finalmente, pulse el botón Actualizar archivo en la parte inferior de la pantalla para guardar los cambios. Ahora, Google Tag Manager está instalado en su sitio. Bastante fácil, ¿eh?
Pero digamos que no te gusta editar código y que prefieres usar un plugin en su lugar.
Cómo añadir Google Tag Manager a WordPress a través de un plugin
Para esta sección, utilizaremos un ingenioso plugin conocido como Google Tag Manager de DuracellTomi para WordPress. Está disponible en el repositorio de plugins de WordPress, lo que significa que puede instalarlo directamente desde su panel de control de administración de WordPress. Dicho esto, pongámonos a trabajar.
Navegue hasta Plugins > Añadir nuevo en el menú de administración de WordPress.
Introduce el Google Tag Manager de DuracellTomi para WordPress en el campo de búsqueda, y una vez que encuentres el plugin, pulsa el botón Install Now.
Una vez instalado el plugin, haga clic en el botón Activar como se muestra a continuación.
Un aviso en la parte superior de la pantalla le informará de que debe introducir su ID de GTM para empezar a utilizar Google Tag Manager para WordPress. Haga clic en el enlace ingrese su ID de GTM como se muestra a continuación.
Puede encontrar su ID de GTM en su cuenta de Google Tag Manager como se muestra a continuación.
Copia el ID de GTM de tu cuenta de Google Tag Manager y vuelve al panel de control de administración de WordPress. Vuelve a tu sitio de WordPress, pega el ID de GTM, y pulsa el botón Guardar cambios como se muestra a continuación.
Y eso es todo! Acabas de aprender a añadir Google Tag Manager a tu sitio WordPress usando un plugin. Bien hecho amigo, bien hecho. Aprendes rápido.
Ahora que puedes añadir con éxito Google Tag Manager a tu sitio WordPress, déjanos probarlo. Por esta parte, añadiremos Google Analytics a su sitio web sin copiar y pegar el código en su header.php.
Si ya tiene el código de Google Analytics en su sitio, debe eliminarlo primero o capturará los mismos datos dos veces. Y definitivamente no queremos que eso aparezca en sus informes de marketing.
Cómo añadir Google Analytics a su sitio WordPress utilizando Google Tag Manager
Vuelva a su Administrador de Etiquetas de Google y haga clic en las Etiquetas en el menú de navegación de la izquierda.
Después de eso, pulse el botón Nuevo como se muestra a continuación.
En la ventana emergente que aparece, nombre su etiqueta y luego haga clic en Caja de configuración de etiquetas para elegir una etiqueta (Google Analytics en nuestro caso).
Elija Google Analytics – Universal Analytics como se muestra en la siguiente imagen.
Esto le lleva de vuelta a la configuración de las etiquetas. Seleccione Vista de página en Tipo de pista ya que nos gustaría informar de todas las páginas vistas a Google Analytics. Vea la imagen de abajo.
En Configuración de Google Analytics, seleccione Nueva variable. Se abrirá un nuevo cuadro en el que deberás introducir tu ID de seguimiento de Google Analytics. No olvides nombrar tu variable como se muestra en la imagen de abajo.
Para encontrar su ID de seguimiento de Google Analytics, acceda a su cuenta de Google Analytics y seleccione la cuenta de su sitio WordPress (haga esto si tiene varias propiedades web en su cuenta de Google Analytics).
A continuación, haga clic en Admin y vaya a Información de seguimiento > Código de seguimiento. Usted debe ver su ID de rastreo como lo destacamos con el número de artículo. 3 más abajo.
Copie el ID de seguimiento y péguelo en el cuadro de configuración de variables. A continuación, pulse el botón Guardar como se muestra a continuación.
Ahora, sólo tenemos que configurar un disparador para la etiqueta Google Analytics. Haga clic en Disparo para elegir o crear un nuevo disparador.
Ya que queremos seguir el tráfico en todas las páginas, podemos ir con el disparador existente (o crear uno nuevo personalizado). Para ahorrar tiempo, elegí el disparador existente Todas las páginas como se muestra a continuación.
Finalmente, pulse el botón Guardar.
Cómo probar su etiqueta
Tu etiqueta de Google Analytics aún no está activa en tu sitio, pero puedes comprobar si funciona pulsando el botón Vista previa tal y como se muestra en la siguiente imagen.
Una vez que Google Tag Manager entre en el modo de vista previa, recargue su sitio. En la ventana de la consola del Administrador de Etiquetas de Google, en la parte inferior de la ventana de tu navegador, deberías ver la etiqueta activada cuando vuelvas a cargar tu sitio.
Si inicia sesión en su cuenta de Google Analytics y navega hasta Real Time, verá la vista de página que acaba de activar al recargar su sitio.
¡Ahí está! Ciertamente se puede ver en la imagen de arriba? Vamos, agregué una flecha para que sea más fácil para ti. Recuerde, no tuvimos que añadir Google Analytics (código JavaScript) directamente a nuestro sitio para capturar los datos – todos los informes de datos se realizan a través de Google Tag Manager.
Lo mismo se aplica a todas las etiquetas que añadas a través de Google Tag Manager: nunca añadirás ningún código a tu sitio. ¿Cómo de dulce?
Pero nuestra etiqueta de Google Analytics es sólo para nosotros, no para los usuarios a los que queremos seguir. Para hacer que la etiqueta viva en el sitio y comience a grabar datos reales, simplemente presione el botón Submit como se muestra a continuación.
Esto lanzará una ventana emergente que le permitirá nombrar su versión y añadir una descripción. Vea la imagen de abajo.
Finalmente, pulse el botón Publicar como se muestra en la imagen de arriba. Al final de todo esto, tu Google Analytics en vivo debería ser algo así:
Así, damas y caballeros, es como se aprovecha el poder de Google Tag Manager. Usted puede agregar un millón y una etiquetas de manera similar, y su sitio no tendrá que llevar todo el código. Le insto a que explore Google Tag Manager para averiguar cuánto puede lograr con esta herramienta.
Entre tú y yo, estoy vendido y como habrás notado. Esta es la primera vez que instalo la cosa en mi blog en vivo. Planeo usar Google Tag Manager en mis otros blogs también.
Recursos adicionales
Esperamos que nuestro tutorial le haya guiado en la dirección correcta en cuanto a la comprensión e implementación de Google Tag Manager en su sitio WordPress. Si desea obtener más información, aquí tiene un par de recursos adicionales (lo prometimos, ¿no es así?) para que disfrute de su visita.
- Serie de videos de Google Tag Manager de Measureschool
- Soporte de Google Tag Manager
Conclusión de nuestra guía sobre Google Tag Manager para WordPress
Google Tag Manager es una poderosa herramienta que pone mucho poder en sus manos en cuanto a la gestión de etiquetas y la recopilación de datos procesables se refiere.
Puede configurar la herramienta de forma fácil y rápida, lo que significa que tiene más tiempo para planificar cómo utilizar todos los datos que recopile. La recolección de datos a tiempo también es excelente. Entonces, ¿por qué no intentarlo?
¿Tienes ideas o preguntas sobre Google Tag Manager? Aprendamos juntos. Comparta sus ideas en la sección de comentarios a continuación. Salud y feliz minería de datos!