Cliquez sur Connexion avec JavaScript

Question

Je souhaite enregistrer tous les clics sur un lien.

J'ai écrit un petit enregistreur, qui peut être appelé par une URL (renvoie une page vide). Cette URL est appelée avec une méthode jquery-ajax. Mais malheureusement, tous les clics ne sont pas enregistrés si l’utilisateur utilise firefox (tout semble aller dans IE).

J'ai essayé beaucoup de choses mais je n'ai pas de solution à ce problème, est-ce que quelqu'un a un problème?

Code HTML:

<a href="http://google.com" onclick="return loggClick();">Click</a>

JS-jQuery-Skript:

function loggClick(){
   $.ajax({
        type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
            sid: 'abc123' //random data
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false
    });
    return true;
}

EDIT: J'ai oublié dans l'exemple que je devais passer des paramètres dynamiques dans l'appel js, donc c'est & "pas possible &"; pour supprimer l'événement onclick: (

Answer 1

Je commencerais par supprimer le code «onclick» en ligne et lier l'événement ultérieurement:

  <a href="http://google.com" rel="outbound" >Click</a>


   $("a[rel=outbound]").click(function(){ 
        var url = this.href; 
        $.ajax({
        async: false,
        type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
                sid: 'abc123' //random data
                clicked: url
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false
     });
     return true; 
  }); 

De plus, vous pourriez avoir une & "Condition de concurrence &"; se produisant . Dans mon exemple, a défini async sur false .

Ceci arrêtera la fonction retournant et suivant le lien avant que la demande ait été effectuée.

À propos d'Async

Si j’utilise async: false ici, c’est qu’avec la valeur par défaut, aync est true, ce qui signifie que la demande AJAX ne peut être que partiellement transmise au moment où le navigateur voit return: true et quitte la page.

C’est cette " condition de concurrence " Je parlais. Ici, c’est une astuce peu coûteuse qui l’évite en arrêtant le navigateur jusqu’à ce que la demande soit complétée, puis en permettant au navigateur de cliquer sur le lien.

Une réponse plus sophistiquée consisterait à lui renvoyer & "faux &"; (ce qui tuerait le comportement natif des navigateurs & "; suivez le lien &"; comportement), puis à redirection real effectuée dans la complete fonction.

Cela ne va pas sans poser problème, et cela pourrait ralentir le comportement de navigation pendant le traitement des demandes, laissant ainsi aux utilisateurs le temps de cliquer sur d’autres liens, ce qui semble ne rien faire, puis de passer au une redirection apparemment aléatoire se produit.

Par conséquent, les solutions avancées incluent le blocage du reste de la page et l’indication de l’avancement pendant le traitement de la demande.

(Et par conséquent, la complexité de cette solution est un ordre de grandeur plus difficile à obtenir dans un exemple simple que <=>)

Answer 2

Je pense que si FF vous donne des résultats médiocres, c'est parce que vous quittez la page avant que l'action prenne du temps. Comme le lien de mhartman le mentionne, si vous utilisez une cible sur votre lien externe, cela devrait fonctionner correctement. Si vous ne pouvez pas le faire, vous devrez peut-être attendre la fin du journal, mais vous constaterez peut-être des retards dans la navigation.

code HTML

<a href="http://google.com" onclick="return loggClick(event);">Click</a>

le

function loggClick(e) {
  if (!e) e = window.event;

  e.preventDefault();  // cancels the link

  var theLink = this.href;  // stores the link for later

  $.ajax({
     async: false,
     type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
            sid: 'abc123' //random data
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false,
         complete: function() {
           // navigate when the log completes
           this.location.href = theLink;
         }
    });
    return true;
  }
}

Answer 3

Une autre approche plus côté serveur à laquelle vous n’auriez peut-être pas pensé serait d’avoir une page qui gérera vos redirections et enregistrera les données.

Par exemple:

<a href="LoggerRedirect.ff?url=http://google.com">Click</a>

Answer 4

L’affiche ci-dessus est correcte, elle n’est pas fiable car vous quittez la page avant qu’elle ait la possibilité de la consigner.

Vous pouvez faire ceci:

1) renvoie false, le href n'est donc pas actif. 2) enregistrer le clic 3) utilisez location.href pour rediriger vers l’URL vers laquelle il aurait été redirigé

vous constaterez peut-être un léger retard si l'exécution de votre gestionnaire onclick prend beaucoup de temps.

Answer 5

Cet exemple déclenchera une publication ajax avant que le clic sur le lien ne soit traité. J'ai trouvé que je devais appeler ajax de façon synchrone, sinon le POST ne serait pas exécuté. Dans cet exemple, ma publication ajax est destinée à une page PHP qui ajoute un fichier journal. Cet exemple est efficace car il attache uniquement un événement de clic à la fenêtre. Cela n'interférera pas non plus si un utilisateur clique sur un lien.

//attach click event to window
attachClickEvent = function() {
    $(document).on('click', function(e) { //document for IE8 compatibility
        var element = $(e.target);
        var tag = element.prop('tagName');

        if (tag === 'A') {
            var data = {'title':document.title, 'URL':element.attr('href'), 'origin':location.href};
            logData(data);
        }
    });
}

logData = function(data) {
    $.ajax({
        async: false,
        cache: false,
        type: "POST",
        data: data,
        url: 'logger.php',
        success: function(msg) { 
            //debugging
        },
        error: function() {
            //debugging
        }
    });
}