10
votes

Comment utiliser Google Analytics avec HTML 5 Historique?

J'utilise HTML 5 Historique pour mon site, afin que les utilisateurs dont les navigateurs prennent la soutien, en cliquant sur un lien ne rechargez pas la page entière, mais juste la zone principale.

Google Analytics ne suit pas ces charges de page partielle. Comment puis-je l'obtenir pour le suivre comme si cela fait pour les utilisateurs qui n'ont pas de support HTML 5 Historique?

html google-analytics

0 commentaires

3 Réponses :

17
votes

Vous devez simplement enregistrer les vues complémentaires en appelant la fonction _trackpageview code> à chaque fois que votre nouveau contenu est chargé. Ceci s'appelle une «page virtuelle» mais est enregistrée dans Google Analytics de la même manière qu'un réel. Pour définir le chemin de la page, vous devez ajouter un paramètre supplémentaire à la fonction:

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

2 commentaires

Comment l'appellerais-je chaque fois que le contenu se charge? Dois-je recharger l'ensemble du script avec la nouvelle URL remplaçant '/ nouveau / contenu' dans ce qui est retourné via Ajax?

Il suffit de l'appeler sur fenêtre.popstate comme décrit ici ici développeur.mozilla.org/ EN-US / DOCS / DOM / WINDOW.ONPOPSTE - Si vous utilisez History.js Github .Com / Balupton / History.js (recommandé) Vous mettez dans votre rappel d'événement «Statechange». Google a mis en place sa propre méthode 'Push' '- qui appelle une page sur Google en arrière-plan pour transmettre vos données personnalisées.

6
votes

Ceci est pour le nouveau code de suivi universel.

Donc, je devais revisiter ma propre réponse pour un nouveau projet. J'ai remarqué des problèmes que je devrais nettoyer. P>

Envoyer une pageView Programmatiquement, vous souhaitez envoyer uniquement le chemin et la requête, par exemple. Pour http://example.com/path/to/resource?param=1 code> Nous enverrons / chemin / à / ressource? param = 1 code>. p>.

Certains spas utilisent des hashbangs ( #! code>) pour leurs URL. Nous devons donc envoyer n'importe quoi après le hashbang. par exemple. http: //example.com#! chemin / à / à / ressource code> Nous allons envoyer / chemin / à / ressource? param = 1 code>. P>

Le La version antérieure de ma solution était erronée et échouerait pour toutes les URL qui avaient un hachage dans l'URL. Aussi, comme j'utilisais jQuery + History.js Plugin Ma solution était sur l'écoute de statechange code> est venu de là. P>

Utilisez ce nouveau code pour envoyer une pageView. Il est plus résilient et s'adresse aux hachambnbangs et à l'histoire. P> xxx pré>

Si vous n'utilisez pas de hashbangs spécifiquement, changez simplement hashbang = "#!", code> pour correspondre par exemple hashbang = "# @", code> p>

  La deuxième partie de ceci est la détection lorsque l'URL change. Pour cela, vous devrez découvrir des documents de toute la bibliothèque que vous utilisez.  P> 
 pour jQuery + historique.js plugin, le code ci-dessous fonctionne  p>  xxx  pré> 
 Plus d'informations Vous trouverez plus d'informations sur  https: // développeurs. google.com/analytics/devGuides/collection/analytics/Analyticsjs/single-page-Applications   P> 
    P> 
$(window).on('statechange', function() {
    var loc = window.location,
    page = loc.hash ? loc.hash.substring(1) : loc.pathname + loc.search;
    ga('send', 'pageview', page);
});

0 commentaires

0
votes

Comme Ewan déjà indiqué, vous devez envoyer la pageView à Analytics dans l'événement Window.Popstate. Donc, dans JavaScript plain, si vous avez appelé: xxx

Vous devez simplement ajouter: xxx

réellement le nouveau code de suivi universel obtient automatiquement l'URL actuelle, vous n'avez donc pas besoin de passer le paramètre supplémentaire.

1 commentaires

Sauf lorsque vous utilisez des hashbangs.