Cómo añadir eventos de Google Analytics en los botones sociales de WordPress

Cómo añadir eventos de Google Analytics en los botones sociales de WordPress

JetPack es un versatil plugin para WordPress distribuido por Autommatic, que integra diversas funciones que anteriormente había que hacer con varios plugins. Una de estas funciones son los botones para compartir en Facebook, Twitter y otras redes sociales. Por ser un plugin tan versatil, y por ser de los mismos creadores de WordPress, JetPack se utiliza mucho, pero si quieres exprimir la analítica web de tu blog, tiene una gran carencia: no permite configurar estos botones para que lancen eventos de Google Analytics con los que poder medir cuantas veces se comparte un post.

Por supuesto dispondrás de las estadísticas de cada red social, pero es mucho mejor tener todos los datos juntos en Google Analytics, así que vamos a ver como hacer para poder añadir estos eventos. Además, vamos a hacerlo sin modificar los archivos originales del plugin, para permitir que en el futuro se pueda actualizar con normalidad.

Como los botones sociales de JetPack se insertan dinámicamente en el contenido del post, vamos a modificarlos también dinámicamente con el “gancho” add_filter().

En primer lugar observamos el código fuente de un post para identificar una cadena que podamos emplear para reconocer cada uno de los botones, y que esté dentro de las etiquetas del enlace.

<a class="hiddenSpellError">class="hiddenSpellError"&gt;class="hiddenSpellError"&gt;class="hiddenSpellError"&gt;class="hiddenSpellError"&gt;class="hiddenSpellError"&gt;class="hiddenSpellError"&gt;class="hiddenSpellError"&gt;class="hiddenSpellError"&gt;class="hiddenSpellError"&gt;class="hiddenSpellError"&gt;rel="nofollow" class="share-facebook sd-button share-icon" href="http://tudominio.com/blog/titulo_del_post?share=facebook" target="_blank title="Compartir en Facebook" id="sharing-facebook-5798"&gt;Facebook</a>

En el código anterior vemos el ejemplo del botón de Facebook, que se repetirá de forma similar para las demás redes. A la vista de este código lo mejor será utilizar la de definición de las clases:

class="share-facebook sd-button share-icon"

Lo que haremos es construir una función que para cada definición de clase de los botones, le añada al lado el evento correspondiente, que será un código similar a este:

onclick="javascript:_gaq.push(['_trackEvent','Compartir','Facebook','/blog/titulo_del_post']);"

En el se lanza un evento de la categoría “Compartir”, con el nombre de la red social como acción, y la URI del post como etiqueta, de manera que podremos analizar cuanto se comparten los artículos, en que redes sociales, y que artículos.

La función tendremos que crearla en el archivo functions.php de nuestro tema, y en su forma más básica, sólo para el botón de Facebook, será como esta:

/*Añade eventos de Google Analytics en los botones sociales de JetPack*/
function eventos_sociales($content) {
	global $post;
	$original = 'class="share-facebook sd-button share-icon"';
	$withevents = 'class="share-facebook sd-button share-icon" onclick="javascript:_gaq.push(['_trackEvent','Compartir','Facebook',''.$_SERVER['REQUEST_URI'].'']);"';
	$content = str_replace($original, $withevents, $content);
	return $content;
}
add_filter('the_content', 'eventos_sociales',100);

En la variable $original almacenamos código que hemos empleado para identificar el botón y el punto de inserción del código. En la variable $withevents copiamos el mismo contenido y le añadimos la llamada con javascript al evento de Google Analytics. Para capturar la URI del post he usado $_SERVER[‘REQUEST_URI’] de PHP que la devuelve directamente sin el protocolo ni el dominio, con lo que simplificaremos los informes. Si prefieres la URL completa puedes sustituirlo por la función the_permalink() de WordPress. Después basta con sustituir una por la otra en el contenido y añadir el filtro. Para asegurarnos de que esta función se ejecuta después de que Jetpack haya añadido los botones, le pondremos una prioridad baja (número alto) a la función add_filter().

Pero no tenemos sólo el botón de Facebook sino bastantes más, de manera que las variables $original y $withevents las vamos a convertir en un array de cadenas que nos permitan hacer todos los cambios simultáneamente. Además, vamos a extraer las partes comunes que se repetirán en cada cadena, para simplificar.

Así, en el código del evento lo único que cambia es el nombre de la red, de modo que definimos en dos variables lo que va antes y después de dicho nombre:

$before_name = ' onclick="javascript:_gaq.push([\'_trackEvent\',\'Compartir\',\'';
$after_name = '\',\''.$_SERVER['REQUEST_URI'].'\']);"';
$original = array ('class="share-facebook sd-button share-icon"');
$withevents = array ($original[0].$before_name.'Facebook'.$after_name);

En este código además capturamos el valor de referencia del array $original, de manera que evitaremos posibles errores tipográficos.

Si añadimos a los arrays todos los botones que vienen por defecto en JetPack tenemos el código definitivo:

/*Añade eventos de Google Analytics en los botones sociales*/
/*Si se modifican los botones en el plugin hay que añadirlos manualmente aquí*/
function eventos_sociales($content) {
	global $post;
	$before_name = ' onclick="javascript:_gaq.push(['_trackEvent','Compartir','';
	$after_name = '',''.$_SERVER['REQUEST_URI'].'']);"';
	$original = array (
		'class="share-facebook sd-button share-icon"',
		'class="share-twitter sd-button share-icon"',
		'class="share-google-plus-1 sd-button share-icon"',
		'class="share-linkedin sd-button share-icon"',
		'class="share-pinterest sd-button share-icon"',
		'class="share-tumblr sd-button share-icon"',
		'class="share-email sd-button share-icon"',
		'class="share-print sd-button share-icon"',
		'class="share-digg sd-button share-icon"',
		'class="share-reddit sd-button share-icon"',
		'class="share-stumbleupon sd-button share-icon"',
		'class="share-pocket sd-button share-icon"'
	);
	$withevents = array (
		$original[0].$before_name.'Facebook'.$after_name,
		$original[1].$before_name.'Twitter'.$after_name,
		$original[2].$before_name.'Google+'.$after_name,
		$original[3].$before_name.'LinkedIn'.$after_name,
		$original[4].$before_name.'Pinterest'.$after_name,
		$original[5].$before_name.'Tumblr'.$after_name,
		$original[6].$before_name.'email'.$after_name,
		$original[7].$before_name.'Imprimir'.$after_name,
		$original[8].$before_name.'Digg'.$after_name,
		$original[9].$before_name.'Reddit'.$after_name,
		$original[10].$before_name.'StumbleUpon'.$after_name,
		$original[11].$before_name.'Pocket'.$after_name
	);
	$content = str_replace($original, $withevents, $content);
	return $content;
}
add_filter('the_content', 'eventos_sociales',100);

En caso de añadir algún otro botón manualmente a JetPack, habrá que recordar añadir aquí su correspondiente código. Igualmente conviene hacer una revisión cuando actualicemos la versión de JetPack, pues si cambiase la forma de definir las clases que hemos tomado como identificadores, el código dejaría de funcionar.

En realidad el no poder configurar el seguimiento con eventos no es un problema sólo de JetPack sino que la mayoría de plugins para añadir botones sociales lo padecen. Este mismo código servirá no sólo para JetPack, sino para cualquier otro plugin similar que añada los botones dentro del post. Simplemente habrá que elegir el código adecuado para identificar el punto de inserción del evento, y reemplazarlo por el indicado aquí.

Después de unos días vemos como han empezado a recogerse los clics en los diferentes botones sociales de los artículos.

Después de unos días vemos como han empezado a recogerse los clics en los diferentes botones sociales de los artículos.

Sobre Oscar G. Peinado

Ingeniero Técnico Industrial. Máster en Analítica Web por KSchool. Posgrado en SEO & SEM por INESDI. Certificado en Google Analytics (GAIQ). Vinculado al medio online desde 2006. Más de 17 años como analista para revistas como MacWorld y PC World, de la que fue director del laboratorio, y responsable de contenidos, analítica web y SEO de PC World Digital.

Trackbacks/Pingbacks

  1. @ogpeinado - RT @la_metrica: Cómo añadir eventos de Google Analytics en los botones so http://t.co/ZtzGDH1B2e
  2. @ElarmariodeCloe - Cómo añadir eventos de Google Analytics en los botones sociales de Wordpress http://t.co/WOuXGSRWfT #mamasblogueras
  3. @Txetxu_perDibLe - Cómo añadir eventos de Google Analytics en los botones sociales de Wordpress http://t.co/8atkdP2YEA
  4. @ruben_community - Cómo añadir eventos de Google Analytics en los botones sociales de WordPress http://t.co/E67CO11rSL
  5. @jmlametrica - RT @la_metrica: Cómo añadir eventos de Google Analytics en los botones so http://t.co/ZtzGDH1B2e
  6. José Manuel Escudero (@piyayo5) - RT @la_metrica: Cómo añadir eventos de Google Analytics en los botones so http://t.co/ZtzGDH1B2e
  7. Cómo incluir eventos de Google Analytics en los Widgets de Wordpress | La Métrica - […] un artículo anterior explicábamos la manera de añadir eventos de Google Analytics para medir el uso de los botones…
  8. @RaulMayoCES - Deseas saber cuantos visitantes hacen clic en los botones sociales de tu web de Wordpress?? http://t.co/PObienAPDo #Analiticaweb
  9. @recuerdadiseno - Cómo añadir eventos de Google Analytics en los botones sociales de WordPress https://t.co/QiexZ98d4J vía @la_metrica

Deja un comentario