web-dev-qa-db-fra.com

Comment faire en sorte que Google Analytics trace les pages appelées par AJAX?

J'appelle une page de mon site Web à l'aide de AJAX mais, pour une raison quelconque, Google Analytics n'enregistre pas la visite de la page. Dois-je faire quelque chose pour le forcer à enregistrer les pages déclenchées AJAX?

J'utilise le dernier code Universal Anaytics comme suit:

<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','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-1', 'mywebsite.ext');
  ga('send', 'pageview');

</script>

J'utilise un appel JQuery AJAX vers la page contenant l'extrait de code ci-dessus, comme suit:

<script>
//<![CDATA[             
$(document).ready(function(){

        $.ajax({
                url : "http://www.mywebsite.ext",
                type: "GET",
                async: false,
                data : { fromajax : "y" },
                success: function(data, textStatus, jqXHR)
                {
                        // alert("success - Data: " + data + "\ntextStatus: " + textStatus);
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                        alert("error \ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown + "\njqXHR: " + jqXHR);
                }
        });

});
//]]>

Je suis certain que la page est appelée car j'ai des instructions de journalisation écrivant dans une base de données. Je sais également que le code analytique fonctionne, car je le teste à l'aide de la vue d'ensemble en temps réel.

Donc, pour résumer, j'ai une page qui appelle http: //www.mywebsite.ext using AJAX et la page de destination ( http: //www.mywebsite.ext ) contient des informations universelles. Code d'analyse qui ne semble pas suivre la page. Si vous visitez la page normalement à partir de votre navigateur, la page est suivie correctement.

Depuis, j'ai découvert depuis le fil que je peux appeler la fonction "ga" avec un dossier virtuel. J'ai donc supprimé l'appel AJAX et modifié Universal Analytics comme suit:

<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','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-1', 'mywebsite.ext');
ga('send', 'pageview', '/localfolder/page');
ga('send', 'pageview');

</script>

Le problème que j'ai maintenant est qu'il appelle ga ('send', 'pageview', '/ localfolder/page'); mais pas ga ('send', 'pageview');

Mais je comprends qu’il existe un intervalle minimal entre les événements: Suivi des événements Google Analytics - Intervalle minimal entre les événements

J'ai donc ajouté un setTimeout (function () {}, 2000); entre les événements et le dernier événement n'est toujours pas appelé. Je suis même allé jusqu'à 9 secondes.

16
user2599927

Old standard pour le chargement de Google Analytics était la méthode asynchrone:

var _gaq=[["_setAccount","UA-#######-#"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));

Ce bit suit le chargement initial de la page mais pas les appels AJAX suivants. Chaque fois que vous souhaitez suivre un chargement de page, ajoutez l'extrait suivant:

// "_trackEvent" is the pageview event, 
_gaq.Push(['_trackPageview', '/some-page']);

_trackPageview est à nouveau utilisé, mais cette fois-ci, nous fournissons l'URL de l'adresse AJAX chargée. L'utilisation du petit fragment de code JavaScript ci-dessus vous permet de garder une trace des pages vues comme vous le feriez si la page entière était rechargée. Je recommanderais d'utiliser cet extrait avec le plugin Historique de MooTools.

Combiné avec Ajax, votre code devrait ressembler à ceci:

jQuery(document).ajaxComplete(function(e, xhr, settings){
  var d = document.location.pathname + document.location.search + document.location.hash;
  _gaq.Push(['_trackPageview', d]);
});

Si vous souhaitez utiliser le code Universal Analytics, la syntaxe des pageloads virtuels est différente.

Voici la syntaxe de suivi des consultations de page virtuelles dans UA: 

ga(‘send’, ‘pageview’, ‘path to your virtual page’);

Exemples:

<a href=”http://www.example.com/gu/dw/seo-beginners-guide.pdf” onClick=”ga(‘send’, ‘pageview’, ‘/virtual/guides/download/seo-beginners-guide.pdf’);”> Download SEO Beginners Guide</a> 

Ainsi, lorsqu'un utilisateur clique sur le lien "Télécharger le guide de débutant dans le référencement", UA génère une page virtuelle appelée "/virtual/guides/download/seo-beginners-guide.pdf".

Sources:
http://davidwalsh.name/ajax-analytics
https://stackoverflow.com/a/7762559/3582159
http://www.optimizesmart.com/event-tracking-guide-google-analytics-simplified-version/

20
GlabbichRulz

Html

<a class="ajax-load" href="home.html" >Home</a>

Javascript

jQuery(document).ready(function($) {
    $(".ajax-load").click(function(event) {
        event.preventDefault();
        var href = $(this).attr("href");
        $.ajax({
            url: href,
            type: 'post',
            dataType: 'html',

        })
        .done(function(response) {
            $(".somediv").html(response);
            // now send page view
            ga('send','pageview','/virtual/....');
        })
        .fail(function() {
            // show error dialog
        })
    });
});
1
Ilyas karim

Vous pouvez avoir des problèmes parce que ceux qui reçoivent Ajax ne attendent pas ou ne traitent pas Javascript.

Google a ce protocole comme solution:

POST/collect HTTP/1.1 Hôte: www.google-analytics.com

payload_data

les détails sont ici:

https://developers.google.com/analytics/devguides/collection/protocol/v1/devguide#proxy-server-tracking

Vous devrez utiliser une méthode POST ou GET à l'aide de votre langage de script. Si vous trouvez une réponse et une solution de travail, faites-le moi savoir! Je fais tout ce que je peux pour que cela fonctionne.

0
user3313824

Cette réponse concerne uniquement les nouveaux extraits GA

La réponse votée ne fonctionnait pas pour moi, voici une version légèrement modifiée de cette réponse qui fonctionne pour moi

if ("ga" in window) {
    tracker = ga.getAll()[0];
    if (tracker) {
        tracker.set("page", '/some-page');
        tracker.send("pageview");
    }
}
0
dav