¿Cómo usar Google Analytics con HTML 5 History?

Question

Estoy usando el historial de HTML 5 para mi sitio, por lo tanto, para los usuarios cuyos navegadores lo admiten, al hacer clic en un enlace no se vuelve a cargar toda la página, sino solo el área principal.

Google Analytics no hace un seguimiento de estas cargas parciales de página. ¿Cómo puedo hacer para rastrearlo igual que para los usuarios que no tienen soporte de historial HTML 5?

Answer 1

Solo necesita registrar las vistas de página adicionales llamando a la función _trackPageview nuevamente cada vez que se carga su nuevo contenido. Esto se llama una 'Página virtual', pero está registrado en Google Analytics de la misma manera que uno real. Para establecer la ruta de la página es necesario agregar un parámetro adicional a la función:

 _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); 
     _gaq.push(['_trackPageview', '/new/content']); 

Answer 2

Esto es para el más nuevo código de seguimiento de Universal.

Recientemente, tuve que volver a visitar mi propia respuesta para un nuevo proyecto. Noté algunos problemas que debo limpiar.

Para enviar una página vista programáticamente, solo desea enviar la ruta de acceso y la consulta, por ejemplo. para http://example.com/path/to/resource?param=1 enviaremos /path/to/resource?param=1.

Algunos SPA utilizan HashBangs (#!) para sus direcciones URL. Entonces, tenemos que enviar algo después del Hashbang. p.ej. http://example.com#!path/to/resource enviaremos /path/to/resource?param=1.

La versión anterior de mi solución era errónea y fallaba en todas las URL que tenían un hash en la url. Además, como estaba usando el plugin jQuery + History.js, mi solución fue escuchar statechange desde allí.

Utilice este nuevo código para enviar una vista de página. Es más resistente y atiende tanto a hashbangs como a historia.

var loc = window.location, 
     hashbang = "#!", 
     bangIndex = location.href.indexOf(hashbang), 
     page = bangIndex != -1 ? loc.href.substring(bangIndex).replace(hashbang, "/") : loc.pathname + loc.search; 

    ga('send', 'pageview', page); 

Si no se utiliza Hashbangs específicamente, sólo tiene que cambiar para que coincida con hashbang = "#!", por ejemplo, hashbang = "#@",

---

La segunda parte de este está detectando cuando cambia la URL. Para esto, necesitará averiguar de los documentos de la biblioteca que esté utilizando.

para jQuery + History.js plug-in, el código de abajo funciona

$(window).on('statechange', function() { 
    //put code here 
}); 

Más información se puede encontrar en https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

---

$(window).on('statechange', function() { 
    var loc = window.location, 
    page = loc.hash ? loc.hash.substring(1) : loc.pathname + loc.search; 
    ga('send', 'pageview', page); 
}); 

Answer 3

Como ya dijo Ewan, debe enviar la vista de página a análisis en el evento window.popstate. Así, en javascript llano, si han llamado:

history.pushState({'statedata':''}, 'title', '/new/page/url'); 

simplemente debe añadir:

window.addEventListener('popstate', function(event) { 
    ga('send', 'pageview'); 
}); 

En realidad el nuevo código de seguimiento de Universal obtiene automáticamente la dirección URL actual, por lo que realmente no necesita pasar el parámetro extra