🖖 Inicio

SERVICIOS

Salir

nochedía

4 miserables pasos para instalar Google Tag Manager en Gatsby o WordPress

1500 palabras
6 minutos
October 31, 2019
blogmarketing

Google Tag Manager te permite integrar servicios y monitorear todo lo que quieras de tu web, información que mandará a los servicios que hayas integrado para que puedas estudiar a tu público -> Aquí te cuento cómo instalarlo en GatsbyJS y en WordPress

  1. Qué es GTM?
  2. Labeling
  3. Y su relación con Google Analytics?
  4. Hay algo negativo a comentar?
  5. 4 miserables pasos

Qué es GTM?

Google Tag Manager (GTM), primero lo primero, es una herramienta gratuita de Google

Y gratuita quiere decir que el producto eres tu, esto es, un producto freemium (igual que Analytics) para que te acostumbres a la comodidad de Google, y una vez dentro ya pagarás por sus otros servicios (que básicamente es el negocio de la publicidad)

Esto ya lo sabemos y sarna con gusto no pica, con lo que sigamos

GTM lo que te permite es simplificar la inclusión de código externo

Es un intermediario, en lugar de insertar los códigos de analytics, facebook, hotjar y demás, insertas el GTM y desde su interfaz insertas los otros

Ojo, porque esto quiere decir que puedes insertar los códigos que quieras sin tener que tocar tu página web, que si estás en entornos Gatsby quiere decir que no necesitarás volver a compilar tu sitio

Abro Nota

En Gatsby las compilaciones de tu website pueden venir motivadas de 3 maneras distintas (seguro que hay más)

  1. Cada vez que tienes un nuevo artículo, lo "publicas" en GitHub, Netlify lo detecta y lo compila en sus servidores, y listos, éste es un proceso extremadamente cómodo

  2. Tu contenido no es propio, con lo que programas una compilación (o varias) en horas concretas cada día y en esas compilaciones descargas el contenido de donde venga y fabricas tus webs estáticas

  3. Todas tus páginas son estáticas, pero parte de ellas se descargan parte del contenido online y dinámicamente (por ejemplo contenido restringido), aunque sigues necesitando compilar cada "esqueleto" y por lo tanto terminas como en el caso número 1

Pues con GTM no tendremos una 4rta, no hará falta compilar el sitio si modificamos el GTM

Termino la nota

Pues eso, que con GTM no hace falta tocar nada del website, nos vamos a la interfaz de GTM y desde allí lo controlamos todo

Y como Google es $Dios, hay muchos servicios externos que se han preocupado de proporcionar su código GTM para facilitarte que lo instales desde GTM

En otras palabras, no hay razón para no utilizar GTM, pero es que además con GTM puedes hacer labeling

🤓

Labeling

Vale, la palabra me la he inventado, o no, pero de cualquier manera se ajusta a lo que GTM te vehicula

Esto es, marcar, añadir etiquetas a todo lo que pase en tu página

Es decir, lo primero es tener en cuenta que el código GTM se inserta en todas tus páginas

Por lo tanto cada página se comunicará con Google, con lo que $Dios sabrá qué está haciendo cada usuario en cada momento

Sabrá lo que visita, pero sabrá cuánto tiempo está? Sabrá si baja el scroll? Sabrá si verá ese banner que te lo has currado para que se hipnotice? Sabrá si sus ojos enfocan al banner y sus pupilas se dilatan?

Vale, esto último aún no lo puede saber, pero todos los tracking que las webcam de los portátiles hacen (o quieren hacer) tienen esta potencial aplicación que ya te digo yo que se busca activamente (con fines éticos y bondadosos)

Pero dicho esto, no, Google no sabrá nada de esto porque por defecto GTM no hace nada

Analytics sí que sabe, ese sí que es un monstruo, pero GTM no, y ese es el tema, podemos utilizar GTM para marcarlo todo y hacer a Analytics más inteligente

Y su relación con Google Analytics?

Pues lo dicho, GTM permite dar más ojos a Analytics y a cualquier otro servicio que se preste

Y esos ojos en realidad son un mundo de posibilidades gracias a la capacidad que nos ofrece para marcar eventos y acciones de los usuarios en nuestro web

Porque el tema es éste, GTM no nos permite visualizar nada, sólo marca, lo necesitamos combinar con algo (como por ejemplo con Analytics)

Hay algo negativo a comentar?

Sí, todo esto tiene su reverso oscuro

Cuando algo es fácil de utilizar, corre el riesgo de sobreutilizarse, y esto es lo que pasa

Y luego hay otro problema, y es que si bien GTM es fácil, no es sencillo, es algo complejo y esto complica las cosas

Por qué? Porque si le dedicas algo de tiempo conseguirás publicar tu container con tus triggers y esas cosas

Te habrá costado lo tuyo, y lo dejarás ahí

Y eso es un error, porque te habrás limitado a integrar un servicio, pero no a configurarlo bien, y sentirás esa tentación irrefrenable de integrar otros servicios que tienen muy buena pinta, terminando con toneladas de código a los que no le sacarás provecho

Claro que esto pasa con todo, y como siempre se trata de aplicar el principio sagrado de menos es más

4 miserables pasos

Entonces qué, cómo lo hacemos?

Aquí tienes los 4 miserables pasos para instalar GTM en tu website, tanto para Gatsby como para WordPress

Pero como digo arriba no te pares aquí, esto es sólo para instalarlo y configurar servicios

Que a ver, sólo por esto ya vale la pena utilizarlo, pero te faltará la otra mitad, el monitorear tu website para luego poder tomar decisiones informadas

Dónde continuar? Pues si te suscribes conmigo en kuworking tienes el curso básico de GTM aquí, donde entro un poco más en materia, pero sin pasarse

Lo que se queda en el tintero es aplicar GTM para marcar audiencias y que luego puedas utilizarlas para hacer remarketing, pero por lo demás vemos cómo configurar GTM (una vez ya está instalado)

Entonces, y para instalarlo?

Pues aquí están los 4 miserables pasos

Instalación en GatsbyJS

Podríamos instalar el código JavaScript de GTM (que nos da GTM en su interfaz) en algún elemento común que tengamos en todas las páginas, como un <Header> o un <Layout> (esto no te sonará a chino si te has paseado por los cursos anteriores de Gatsby)

Pero con esto insertaríamos el código en algún lugar dentro de <body>

Y es esto una buena idea?

No si hacemos caso a las recomendaciones, que nos dicen de añadirlo en el <head>, y tiene sentido si por ejemplo queremos implementar una estrategia de test A/B (con GTM)

En estos casos es imprescindible que GTM sea de lo primero que se ejecute, con lo que mejor seguir las recomendaciones y ponerlo en el <head>

Pero hace falta tanto lío?

Quiero decir, para qué poner el código directamente cuando tenemos plugins mágicos?

Con gatsby nos vamos a buscar gatsby-plugin-google-tagmanager, un plugin official (esto siempre tranquiliza) y en la documentación vemos que se comporta como un plugin al uso (lo habitual vamos)

Por lo tanto, lo incluímos en nuestro gatsby-config.js y lo instalamos con npm o yarn

Y la configuración? Tan fácil que se me saltan las lágrimas

js
plugins: [
{
resolve: 'gatsby-plugin-google-tagmanager',
options: {
id: 'YOUR_GOOGLE_TAGMANAGER_ID',
},
},
]

Donde nuestro YOUR_GOOGLE_TAGMANAGER_ID es el código que veremos en la interfaz de GTM

Abro Nota

Claro, tenemos que ir a GTM, aquí, y configurar nuestra cuenta de usuario, con esto tendremos el código que es el que nos pide aquí

Cierro Nota

Luego lo habitual es habilitar en GTM el evento page view que mandará a Analytics información cada vez que se visualice una página nueva

Pero Gatsby no es habitual

Gatsby te permite una navegación ultra-rápida porque se descarga las páginas con antelación

Pero claro, aquí nos genera un problema porque el evento habitual no registrará todas estas páginas (o las registrará todas al principio, un sinsentido)

Necesitamos generar un evento distinto y esto el plugin te lo hace out-of-the-box, te crea una etiqueta custom y nosotros sólo tenemos que configurar en GTM un custom event con el nombre de esta etiqueta gatsby-route-change

Instalación en WordPress

Y para WordPress lo mismo

Podríamos insertar el código directamente con lo que tendremos que tener en cuenta qué tenemos entre manos, un child theme? Un theme normal? Cuando actualicemos estos cambios se mantendrán?

Lo suyo es añadir estos snippets de código bien con un plugin que nos vehicule esta funcionalidad, con lo que cualquier actualización del theme no nos afectará

O directamente fabricarnos nuestro propio plugin que contenga ese snippet de código, cosa que nos permitirá reutilizar esta funcionalidad en los distintos sites que podamos tener

O también directamente lo insertamos en nuestro child theme, con lo que estaremos incorporando esta funcionalidad en el site, algo que nos simplifica la vida a nosotros y a los posibles usuarios de ese child theme (no tendrán que instalar plugins extras) pero nos limita el mantenimiento

Pero como antes, para qué tanto lío?

Tienes el plugin Google Tag Manager for WordPress que instalas como habitualmente en WordPress (desde tu panel), lo activas y le añades allí el código GTM que vemos en la propia interfaz GTM

En resumen, 4 míseros pasos a seguir:

  1. Creas tu cuenta en Google Ads aquí
  2. Instalas el plugin de Gatsby o de WordPress
  3. Añades el código GTM al plugin
  4. Y te vas a GTM a configurar los servicios que quieras

En realidad son sólo 3 miserables pasos con los que ya has instalado GTM

El 4rto paso es el que tiene más chicha, es donde podemos configurar distintos servicios y además, añadir capas de información para luego aprovechar en Analytics

Es un mundo

Porque además cada vez se va sofisticando más

Por lo que si te apetece verlo más en profundidad, en el curso, aquí

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]