jQuery:Rastreamento de cliques com PHP

Question

Sim, EU SEI sobre o Google Analytics.Nós o usamos para as métricas gerais do site e sei que podemos rastrear links individuais.No entanto, precisávamos de uma solução de rastreamento para links muito específicos e precisamos desses dados de rastreamento disponíveis para nosso aplicativo da web em tempo real, então escrevi minha própria solução:

jQuery:

  $.fn.track = function () {
    var source, url, name, ref, $this;
    $this = $(this);
    if (window.location.search.substring(1) != '') {
      source = window.location.pathname + "?" + window.location.search.substring(1);
    } else {
      source = window.location.pathname;
    }
    url = jQuery.URLEncode($this.attr('href'));
    name = $this.attr('name');
    ref = jQuery.URLEncode(source);
    $this.live('click', function (click) {
      click.preventDefault();
      $.post('/lib/track.php', {
        url: url,
        name: name,
        ref: ref
      }, function () { window.location = $this.attr('href'); });
    });
  };

...usando o plug-in jQuery URLEncode (http://www.digitalbart.com/jquery-and-urlencode/).

Agora, esse código funciona bem com meu back-end PHP e na minha máquina, mas não parece funcionar de maneira confiável para todos os outros.Às vezes os parâmetros passados ​​via jQuery NÃO são passados, resultando em um registro no banco de dados sem name, url ou ref.

Pela minha vida, não consigo entender por que isso pode estar acontecendo;eu sei o $.post está disparando, pois existem registros no banco de dados (no PHP também gravo o IP da requisição junto com o timestamp), mas em muitos casos o script PHP está recebendo em branco $_POST variáveis ​​do jQuery.

Eu testei ao vivo em todos os navegadores aos quais tenho acesso no meu local de trabalho e todos funcionam bem para mim;no entanto, cerca de 75% de todos os registros criados (não pelos meus computadores) aparecem em branco (a maioria deles usa os mesmos navegadores que eu).

Por que isso poderia estar acontecendo?

Answer 1

Acho que, no final das contas, meu problema acabou sendo que estava demorando muito para a solicitação ser analisada pelo jQuery, e sou bastante inflexível em não querer tornar os links "dependentes" de javascript (ou que eles fariam não funcionaria sem ele ou o usuário teria que esperar a conclusão da solicitação de rastreamento antes de acessar a nova página).

Depois de navegar por muitas outras soluções online - pegando algumas emprestadas e me inspirando em outras - cheguei à solução abaixo em javascript nativo:

if (document.getElementsByClassName === undefined) { // get elements by class name, adjusted for IE's incompetence
    document.getElementsByClassName = function(className) {
      var hasClassName, allElements, results, element;

        hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        allElements = document.getElementsByTagName("*");
        results = [];

        for (var i = 0; (element = allElements[i]) !== null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) {
                results.push(element);
            }
        }

        return results;
    };
}

function addTracker(obj, type, fn) { // adds a tracker to the page, like $('xxx').event
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
  } else if (obj.addEventListener) {
    obj['e' + type + fn] = fn;
    obj[type + fn] = function() {
      obj['e' + type + fn]( window.event );
    };
    obj.attachEvent('on' + type, obj[type + fn]);
  }
}

function save_click(passed_object) { // this function records a click
  var now, then, path, encoded, to, from, name, img;

  now = new Date();
  path = '/lib/click.php';
  from = (window.decode) ? window.decodeURI(document.URL) : document.URL;
  to = (window.decodeURI) ? window.decodeURI(passed_object.href) : passed_object.href;
  name = (passed_object.name && passed_object.name != '') ? passed_object.name : '[No Name]';

  // timestamp the path!
  path += '?timestamp=' + now.getTime();

  path += '&to=' + escape(to) + '&from=' + escape(from) + '&name=' + name; // compile the path with the recorded information
  img = new Image();
  img.src = path; // when we call the image, we poll the php page; genius!

  while (now.getTime() < then) {
    now = new Date(); // resets the timer for subsequent clicks
  }
}

function get_targeted_links(target) { // finds targeted elements and wires them up with an event handler
  var links, link;
  if (document.getElementsByClassName) {
    links = document.getElementsByClassName(target);
    for (var i = 0; i < links.length; i++) {
      link = links[i];
      if (link.href) {
        addTracker(links[i], 'mousedown', save_click(links[i])); 
      }
    }
  }
}

addTracker(window, 'load', get_targeted_links('trackit'));

...que parece ser muito mais rápido do que o plugin jQuery que escrevi acima e até agora tem sido rápido o suficiente para rastrear todas as solicitações que fiz nele.

Espero que ajude outra pessoa!

Answer 2

Esses "cliques" podem vir de bots ou de alguém com JS desativado.Se os links clicados devem ser rastreados, por que você não considera links apenas JS, ou seja.coloque o URL em um atributo diferente de href, use seu manipulador de cliques para processá-lo e adicione verificação de referência em seu track.php

Você também verificou se todos os elementos são links?

Answer 3

Talvez isso ajude você: http://www.digitalistic.com/2009/09/16/click-tracking-with-jquery/Dê uma olhada neste também: http://think2loud.com/use-jquery-with-google-analytics-to-track-clicks-on-outgoing-links-from-your-site/