Cómo insertar el código de seguimiento de Google Analytics en nuestro WordPress, con código

Para insertar el código de seguimiento de Google Analytics tenemos muchas opciones, desde instalar un plugin específico para ello, hasta modificar el header.php de nuestro theme, pasando por insertar un snippet de código en nuestro plugin de funcionalidades.

Lo que voy a mostrar en esta entrada es precisamente este último, esto nos evita tener que instalar un plugin que, igual hace muchas más cosas de las que yo necesito y también evita que nuestro código cuelgue de un archivo del propio theme que tengamos instalado y, por tanto, pueda desaparecer si eliminamos dicho theme.

El código de seguimiento de Google Analytics que tenemos que insertar, y que obtenemos de la propiedad correspondiente de nuestra cuenta, tiene el siguiente aspecto:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-XX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-XX');
</script>

Y siguiendo las recomendaciones del propio Google, conviene que lo insertemos justo delante de la etiqueta </header> de nuestro sitio web.

Como sabemos, en la mayoría de los themes de WordPress la cabecera de todas las páginas se renderiza a través de la plantilla header.php que en el caso del theme Twenty-Twenty (por ejemplo) comienza tal que así:

<?php
...
<!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

	<head>

		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" >

		<link rel="profile" href="https://gmpg.org/xfn/11">

		<?php wp_head(); ?>

	</head>

Observa que la función que, justo delante de la etiqueta </head> encontramos que se hace una llamada a la función wp_head() y esta función no hace más que insertar un hook en el punto en el que se ejecuta. Esto lo vemos en el código de dicha función:

<?php

function wp_head() {
    /**
     * Prints scripts or data in the head tag on the front end.
     *
     * @since 1.5.0
     */
    do_action( 'wp_head' );
}

En definitiva ya tenemos todo lo que se necesita para insertar el código de seguimiento de Google Analytics ya que bastará con que nos «enganchemos» a ese hook para insertarlo.

El snippets de código que debemos insertar en nuestro plugin de funcionalidades será:

<?php

/*
 * INSERCIÓN DEL CÓDIGO DE SEGUIMIENTO DE GOOGLE ANALYTICS
*/

add_action('wp_head','du_google_analytics');
	function du_google_analytics() {

		echo '<!-- Global site tag (gtag.js) - Google Analytics -->';
		echo '<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-XX"></script>';
		echo '<script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}';
  		echo "gtag('js', new Date());";
		echo "gtag('config', 'UA-XXXXXXXX-XX');</script>";

	}

Por cierto, se debe sustituir UA-XXXXXXXX-XX por el ID de seguimiento que te proporcione Google en la propiedad correspondiente de tu cuenta de Analytics.

Ir arriba