Añadir Analytics en tu WordPress en tan sencillo como añadir un trozo de código que te suministra Google al crear tu cuenta de Analytics. Este trozo de código tenemos que ponerlo justo antes de que termine nuestra etiqueta html head
Para hacer algo tan sencillo a veces recurrimos a complejos plugins que nos aportan demasiadas funciones que no necesitamos ni vamos a usar, penalizando el rendimiento y por tanto la optimización de nuestro sitio web.
En la píldora de hoy vamos a ver cómo crear un sencillo plugin que podremos utilizar en todos nuestros proyectos para instalar Google Analytics en nuestros sitios.
Cómo NO instalar Google Analytics en nuestro WordPress
Cómo sabes hay una plantilla en todos los themes de WordPress llamada header.php que contiene entre otras cosas la etiqueta head. Para instalar Analytics simplemente bastaría con añadir el código facilitado por Google Analytics en este archivo. Esto no te lo recomiendo porque si se actualiza el theme, se sustituyen todos los archivos, incluído el header.php y vas a perder tu instalación de Analytics. De esto ya hablamos en la píldora sobre los child themes, donde veíamos como actualizar un tema de WordPress correctamente.
También podrías usar un hook de WordPress, que tal y como vimos en otra píldora anterior, nos permite añadir código o editarlo en tiempo de ejecución. Para añadir código al final de la etiqueta head, tenemos un hook llamado wp_head.
Podríamos usar este hook para añadir el código de Analytics desde el archivo functions.php, pero tenemos el mismo problema que antes, deberíamos usar un child theme, pero para añadir simplemente esto es un poco de engorro.
Además, Analytics lo vamos a necesitar en todos nuestros proyectos, y no se me ocurre mejor situación para abstraer esta funcionalidad que éste. Así que la forma que te recomiendo es crear un plugin de WordPress que te permita añadir de forma sencilla tu propiedad de Google Analytics de forma independiente del tema de WordPress.
Cómo instalar Google Analytics en nuestro WordPress
A) Creamos un plugin:
- En la carpeta de plugins situada en wp-content añadimos la carpeta de nuestro plugin. Por ejemplo: «PDA-Analytics».
- En el interior de esa carpeta añadimos un archivo PHP con el nombre que quieras. Por ejemplo:
pda-analytics.php
- Abre el archivo que acabas de crear y añade el comentario de cabecera. WordPress va a utilizar estos datos para mostrar la información que añadas en la vista de plugins del panel de administración de WordPress. Por ejemplo:
<?php
/*
Plugin Name: Product Designer Academy Google Analytics Plugin
Plugin URI: https://productdesigner.es
Description: Con este plugin añadimos el código de Google Analytics en la etiqueta <head> de cualquier tema usando el hook wp_head.
Author: Fran Gallardo (Product Designer, @fran__gallardo)
Version: 1.0
*/
?>
B) Obtenemos el código de Google Analytics:
- Ve a tu cuenta de Google Analytics y crea una nueva propiedad. Si ya la tienes creada dirígete al panel de administración de la propiedad.
- En el panel de administración de Google Analytics, dirígete a la columna central donde pone «Tracking info» en cuyo interior está el «Tracking code«. Copia y pega el código similar a éste, incluida la etiqueta
<script>. Debes tener algo similar a esto:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-12345678-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XX-12345678-1');
</script>
C) Preparamos el hook en nuestro plugin:
- En nuestro archivo
pda-analytics.php que creamos anteriormente, justo debajo de los comentarios de cabecera añadimos el siguiente código:
<?php
function pda_google_analytics() { ?>
<?php }
add_action( 'wp_head', 'pda_google_analytics', 10 );
Aquí no estamos haciendo nada nuevo. Simplemente estamos indicando a WordPress, que cuando vaya a crear el head de la página, que llame a una función que hemos nombrado como pda_google_analytics.
D) Añadimos el código de Analytics en nuestro hook:
- Para ello simplemente añadimos el código completo de Analytics en el lugar que hemos preparado en el plugin, esto es, dentro del hook:
<?php
function pda_google_analytics() { ?>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-12345678-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XX-12345678-1');
</script>
<?php }
add_action( 'wp_head', 'pda_google_analytics', 10 );
E) Activar el plugin y comprobar el funcionamiento:
- Una vez creado el plugin nos dirigimos al panel de administración de WordPress y en el apartado de plugins encontraremos el plugin que acabamos de crear con la información que hemos añadido en los comentarios de cabecera. Simplemente tenemos que activarlo.
- Para comprobar que está funcionando correctamente, comprueba el código fuente de la página creada por WordPress en tu sitio web o bien comprueba la etiqueta head usando el inspector de elementos de tu navegador.
- Si todo está correcto ve al panel de administración de Google Analytics, y dirígete al apartado de «Real time», informe de «Overview». Si estás visitando el sitio, aparecerá tu visita localizada.
Conclusión
En esta pequeña píldora hemos visto cómo crear un plugin y de esta forma separar la funcionalidad de un sitio mediante plugins, que es la forma correcta. También hemos repasado lo que es un hook de WordPress y cómo usarlo.
