Integrando el Código de Seguimiento de Google Analytics en tu Sitio Web

Bueno, toda vez que Creamos una cuenta en Google Analytics  y que entendimos el Código de Seguimiento de Analytics, debemos proceder a incluirlo en nuestro sitio web.

Debemos tener en cuenta que, dependiendo del tipo de sitio que tengamos será la forma en la que vamos a incluir nuestro código de seguimiento de analytics. Vamos a ver 3 tipos de sitios y como integrarlo en cada uno.

Sitio HTML puro.

Este es el caso más trabajoso de todos, ya que si tenemos un sitio web construido en HTML puro y duro ya sea de una plantilla que compramos o de un diseño propio, tendremos que incluir el código de seguimiento manualmente en todas y cada una de las páginas que deseemos medir. Idealmente en todas.

Bien, dentro de tu sitio web en todas las páginas encontrarás la etiqueta <head>, el lugar ideal para incluir el código de seguimiento de Google analytics sería justo antes de </head>

<!DOCTYPE html>
<html lang="es-MX" class="no-js">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="profile" href="http://gmpg.org/xfn/11">

<!-- Facebook OpenGraph tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Curso Analytics" />
<meta property="og:description" content="Google Analytics y Facebook Web Analytics. Pronto!" />
<meta property="og:url" content="http://www.cursoanalytics.online/" />
<meta property="og:site_name" content="Curso Analytics" />
<meta property="og:image" content="https://s0.wp.com/i/blank.jpg" />
<meta property="og:locale" content="es_LA" />
<!-- /Facebook Opengraph Tags -->

<!-- Google Analytics Tracking Code -->
<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 ga('create', 'UA-XXXXXXX-X', 'auto');
 ga('send', 'pageview');
</script>
<!-- /Google Analytics Tracking Code -->
</head>

Antiguamente se decía que lo pusieras antes del cierre del <body> porque si no podías ralentizar tu sitio. Eso es cosa que actualmente ya no sucede ya que el código de seguimiento se carga de forma asíncrona.

Sitio Web programado con php.

Si tienes un sitio web alojado en un servidor linux con apache – tip: la mayoría de los hostings compartidos son así – entonces podrías considerar hacer tu sitio en php. Tener tu sitio en php te permitirá integrar tu código de seguimiento de una manera mucho más sencilla.

Lo primero que haremos será crear un nuevo archivo en nuestro sitio, que se llame scripts.php El contenido de nuestro sitio scripts.php será el código de seguimiento de google.

<!-- Google Analytics Tracking Code -->
<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 ga('create', 'UA-XXXXXXX-X', 'auto');
 ga('send', 'pageview');
</script>
<!-- /Google Analytics Tracking Code -->

Dependiendo de la estructura de nuestro sitio, debemos asegurarnos de incluir una llamada a este archivo antes del cierre de </head>

<!DOCTYPE html>
<html lang="es-MX" class="no-js">
<head>
 <link rel="profile" href="http://gmpg.org/xfn/11">
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Facebook OpenGraph tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Curso Analytics" />
<meta property="og:description" content="Google Analytics y Facebook Web Analytics. Pronto!" />
<meta property="og:url" content="http://www.cursoanalytics.online/" />
<meta property="og:site_name" content="Curso Analytics" />
<meta property="og:image" content="https://s0.wp.com/i/blank.jpg" />
<meta property="og:locale" content="es_LA" />
<!-- /Facebook Opengraph Tags -->

<?php include 'scripts.php' ?>
</head>

Deben considerar que esto solo funcionará si el archivo donde está el header y scripts.php se encuentran en la misma carpeta. en caso contrario: deberás incluir la ruta completa – absoluta o relativa, sugiero que sea relativa para evitar conflictos como que tu servidor interprete que estás llamando a ese archivo de una fuente externa. Me ha pasado – al archivo scripts.php

De esta forma: podrás incluir en tu archivo scripts todos los trackings o scripts adicionales que quieras y solo tendrás que hacer la modificación una vez y aplicará para todo tu sitio web.

Estoy seguro que este principio de include aplica también para asp pero no tengo la forma correcta de hacerlo.

Integrando Google Analytics en WordPress.

Esto puede ser lo más sencillo del mundo, vamos a hablar de 2 formas principales de hacerlo.

Integrar Google Analytics en WordPress manualmente.

Esta forma tiene sus ventajas, principalmente que vamos a tener oportunidad de modificar el código de analytics como queramos a través del hardcoding!!!

ADVERTENCIA:

Hardcodear tu sitio en wordpress – o sea, modificar el código fuente de tu tema o plugins – puede ocasionar que tu sitio deje de funcionar correctamente. Sigue esto bajo tu propio riesgo.

En la actualidad, los temas de wordpress y los plugins no son recursos estáticos, se actualizan cada cierto tiempo. Es por esto que no te recomiendo que hardcodees el código de seguimiento de analytics directamente en tu tema. Si lo haces, cada vez que se actualice el tema deberás recordar incrustar el código de analytics – y cualquier otro código adicional que hayas incluído – porque será borrado cuando se actualicen los archivos.

Así que mejor haremos uso de la funcion include de php. Nuevamente.

Lo primero que debemos hacer es ubicar el archivo header.php – presente en todos los temas de wordpress – y editarlo, ya sea a través del ftp o del editor integrado de wordpress que encontramos en Apariencia – Editor

captura-de-pantalla-2016-10-18-a-las-5-49-31-pm

captura-de-pantalla-2016-10-18-a-las-5-50-15-pm

WordPress es un sitio en php así que aquí procederemos a ubicar la misma etiqueta </head> dentro de header.php e incluiremos una llamada al archivo que crearemos y donde escribiremos nuestro código de seguimiento. Te recomiendo que no lo llames scripts.php porque puede que ya exista en tu tema, llámalo trackingcode.php, así pues, en este sitio, el <head> quedaría de la siguiente forma:

<?php
/**
 * The template for displaying the header
 *
 * Displays all of the head element and everything up until the "site-content" div.
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
 <meta charset="<?php bloginfo( 'charset' ); ?>">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="profile" href="http://gmpg.org/xfn/11">
 <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
 <?php endif; ?>
 <?php wp_head(); ?>

<?php include 'trackingcode.php'; ?>

</head>

Ahora, creamos un archivo llamado trackingcode.php y lo subimos a través del ftp a nuestra carpeta del tema, en este caso la ruta sería /cursoanalytics.online/wp-content/themes/twentysixteen/

Ten cuidado, algunos hostings incluyen una carpeta llamada /html/ debajo del nombre del dominio.

La estructura del archivo trackingcode.php sería igual a la estructura de scripts.php en el ejemplo anterior.

Integrar Google Analytics en WordPress con Monster Insights.

Monster Insights le compraron su plugin de Google analytics a los chavos de Yoast que también hacen Yoast SEO. El plugin es muy completo y permite integrar google analytics a través del panel de wordpress de una forma muy sencilla. Si deseas hacerlo así, solamente entra a la sección de plugins de tu wordpress y da click en Agregar Nuevo. Procede a buscar Monster Insights, instálalo, actívalo y voilá!

Deberás iniciar sesión en google con la cuenta que creaste tu propiedad de analytics para autorizar al plugin a acceder a tus datos.

En un post futuro daremos detalles de configuración y uso de Monster Insights.

Author: Cristóbal Galindo

Biólogo por educación, músico por pasión, analytics junkie por necedad y community Manager por necesidad

Leave a Reply