Blog de marketing digital y SEO

Añadir Google Analytics con jQuery Mobile

gravatar
Por Héctor Rovira
Post publicado en Analítica web
COMPARTIR

Fácil de usar, rápido y nos permite desarrollar aplicaciones web (webapps) con la apariencia de una aplicación nativa de smartphone. Estoy hablando, claro está, de jQuery Mobile.

Las ventajas de usar esta librería son varias:

  • Desarrollo ágil usando los estándares web modernos (HTML5, Javascript)
  • Apariencia nativa imitando la interfaz del sistema (CSS 3)
  • Carga dinámica de las secciones según se va navegando (AJAX)
  • Animaciones y efectos que mejoran la usabilidad y la experiencia de usuario
  • Compatibilidad con los principales sistemas operativos móbiles (iOS, Android, Windows Phone)

Antes de entrar en más detalles, daremos por asumido que el lector tiene un mínimo conocimiento del funcionamento del jQuery Mobile y de Google Analytics. Si no estás familiarizado o quieres repasar conceptos, te aconsejo que le eches un vistazo a la página oficial de JQuery Mobile.

Bien, el siguiente es un ejemplo de una página básica HTML5 preparada para jQuery Mobile:

...
<body>
	
<div data-role="page">
		
<div data-role="header">
			
<h1>¡Hola mundo!</h1>

		</div>

		
<div data-role="content">
			<a href="/pagina2.html" data-role="button">Ir a la página 2</a>
		</div>

	</div>

</body>
...

y este es el aspecto que tiene:

jquey mobile web

Al pulsar en el botón, se carga dinámicamente la página enlazada (pagina2.html) y se cambia a ésta con una transición.

Más de uno se estará preguntando en estos momentos a qué viene todo este rollo, y por qué no voy directamente al grano. Bien, voy a ello.

Este sistema de navegación mediante AJAX de jQuery Mobile tiene una limitación: el código javascript de la página cargada no se evalúa. No podemos tener estructurado el código javascript en diferentes ficheros del estilo pagina1.js, pagina2.js (o inline en cada página), pues será ingorado.

Efectivamente, el código de Google Analytics también.

Por suerte, hay una solución, como para casi todo en el mundo de la programación, y pasa por tener todo el código en un fichero que cargaremos en la página principal. En el código HTML asignaremos el atributo id a cada página, y ejecutaremos un código u otro en función de éste. Veamos cómo:

Página 1:

...

<div data-role="page" id="pagina1">
  ...
</div>

...

Página 2:

...

<div data-role="page" id="pagina2">
  ...
</div>

...

Y el código javascript:

$('div').live('pageshow', function(event, ui){
	var pageId = $(this).attr('id');
	if (pageId == 'pagina1') {
		init_pagina1();
	} else if (pageId == 'pagina2) {
		init_pagina2();
	}
});
function init_pagina1() {
	// código página 1
}
function init_pagina2() {
	// código página 2
}

Gracias a esta técnica salvamos la limitación comentada, amén de mantener una cierta coherencia en nuestro código.

Por último, queda añadir nuestro código de analítica, y ya se puede intuir por dónde irán los tiros.

Sin más dilaciones, veamos un ejemplo completo:

pagina1.html

...
<head>
...
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%09%09var%20_gaq%20%3D%20_gaq%20%7C%7C%20%5B%5D%3B%0A%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22analytics.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22application.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />…
</head>
<body>
	
<div data-role="page" id="pagina1">
		
<div data-role="header">
			
<h1>¡Hola mundo!</h1>

		</div>

		
<div data-role="content">
			<a href="/pagina2.html" data-role="button">Ir a la página 2</a>
			<a href="http://www.google.es/intl/en_com/images/srpr/logo3w.png" id="googleLogo">Ver imagen</a>
		</div>

	</div>

</body>
...

analytics.js

$('[data-role=page]').live('pageshow', function (event, ui) {
	_gaq.push(['_setAccount', 'UA-XXXXXX-1']);
	_gaq.push(['_setDomainName', '.domain.com']);
	_gaq.push(['_trackPageview']);
	_gaq.push(['_trackPageLoadTime']);
	(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(ga, s);
	})();
});

El motivo por el que declaramos la variable _gaq de forma global, no es otro que poder usarla de forma independiente, por ejemplo para hacer el tracking de un evento personalizado. En el siguiente ejemplo se contabilizarán las veces que se ha visitado la imagen enlazada.
application.js

$('div').live('pageshow', function(event, ui){
	var pageId = $(this).attr('id');
	if (pageId == 'pagina1') {
		init_pagina1();
	} else if (pageId == 'pagina2) {
		init_pagina2();
	}
});
function init_pagina1() {
	$('#pagina1 #googleLogo').click(function(){
		_gaq.push(['_trackEvent', 'ImageView', 'XXX']);
	});
}
function init_pagina2() {
	// código página 2
}

Y esto es todo. Cada vez que se navegue por la aplicación, se contabilizarán las visitas, y se ejecutará el código que queramos, como en los ejemplos init_pagina1() e init_pagina2().

newsletter 3 comentarios

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  • Gran artículo!! Muchas gracias por compartir. Estoy haciendo la versión móvil de mi blog con jqm y tengo una duda.
    He leído que la mejor opción es hacerla en subdominio m.dominio.com, Mi duda es respecto al sitemap, al robot.txt y al htaccess.
    En primer lugar, como las páginas están en una sola, se deben poner todas en el sitemap?
    dominio.es
    dominio.es#categorias

    sabes de alguna herramienta para crear direcciones más amigables como dominio.es/categorias ???
    en el robot.txt debo permitir el acceso de robots pero luego tengo que utilizar rel=»external» para indicar la página original y que google no penalice por duplicidad de contenidos. Se podría hacer de una manera parecida a lo que explicas?
    La verdad es que cualquier consejo me iría bien ya que por más que lo intento no mejoro posicionamiento en la web normal y quería comenzar con buen pie la versión móvil.
    Gracias otra vez!

Mejora tu posicionamiento web

Empieza hoy
BCN
Calle Sancho de Ávila 52, 4º 2º
08018, Barcelona - Tel. 933 686 411
MAD
Calle Ribera de Loira 46, Edificio 2 Bajos
28042, Madrid - Tel. 910 052 175