Google Tag Manager es un gestor de etiquetas que nos van a permitir analizar lo que está sucediendo en nuestro sitio web. En este primer tutorial aprenderás porqué usarlo y cómo configurarlo en WordPress.
¿Porqué usar GTM (Google Tag Manager)?
Google Tag Manager nos permite conectar nuestra web con diferentes tipos herramientas de gestión (Google Analytics, Google Ads, etc …) Es una herramienta que nos va a permitir incluir código en nuestro sitio web sin necesidad alguna de alterarlo por lo que algunas de sus ventajas son las siguientes:
- Es muy flexible ya que podemos añadir etiquetas sin escribir ni una sola línea de código ya que muchas de ellas están ya construidas y son de fácil integración.
- Dispone de un control de versiones por lo que podemos retroceder de forma sencilla lo que hemos hecho.
- Al igual que Google Analytics, permite gestionar permisos de usuarios para así controlar que puede ver o hacer.
- Se nos hace más fácil probar las etiquetas al disponer de herramientas de debug.
Las etiquetas que se van creando se irán añadiendo a un contenedor (container) el cual tendremos que incluir en nuestra página web.
Cómo insertar Google Tag Manager
Para empezar tendremos que registrarnos e iniciar sesión en la siguiente URL.Una vez estemos registrados e iniciemos sesión ya podemos empezar a crear nuestro primer contenedor donde nos indica que tenemos que incluir el sitio web y la plataforma donde será usado.
Una vez creado el contenedor, pinchamos en la rueda de configuración y procedemos a Instalar Google Tag Manager. Este nos va a generar unos códigos que tendremos que insertar tanto en el <head> como en el <body> de nuestra página web.
En WordPress podemos insertarlos de forma automática en todas nuestras páginas haciendo uso de los hooks wp_head y wp_footer. Para ello tendremos que incluir los siguientes en el fichero functions.php de nuestro nuestro template. Recuerda que los códigos se pueden comprobar desde el menú Administrador -> Instalar Google Tag Manager.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
if ( !function_exists( 'google_tag_manager_head' ) ) { function google_tag_manager_head() { echo " <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX');</script> <!-- End Google Tag Manager -->"; } } add_action('wp_head', 'google_tag_manager_head'); |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
if ( !function_exists( 'google_tag_manager_body' ) ) { function google_tag_manager_body() { echo ' <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> '; } } add_action('wp_footer', 'google_tag_manager_body'); |
A continuación tendremos que volver a nuestro espacio de trabajo en Google Tag Manager y nos fijamos en la caja verde que pondrá «contenedor no publicado«. Si te fijas en la parte superior hay una barra con las siguientes opciones:
- Un identificador asociado al contenedor en el que estamos actualmente (GTM-XXXXXXX).
- Vista previa del contenedor (será la forma de comprobar que las etiquetas que incluyamos funcionan correctamente).
- Enviar (publica el contenedor).
Con esto ya tenemos configurado Google Tag Manager en nuestro sitio web. La versión del contenedor aún no dispone de etiquetas, activadores ni variables. Lo veremos en siguientes post para ir incluyendo nuevas opciones.
Configuración de Google Tag manager vía Plugin
En caso de no tener mucha idea ni querer trastear con el código tenemos otras opciones de configuración vía Plugins.
Puedes usar Google Tag Manager for WordPress. Esto supondrá que todo sea más fácil de configurar pero penalizará algo el rendimiento de vuestro WordPress al tener que procesar otro Plugin más.
