JQuery: отслеживание кликов с помощью PHP

Да, я ЗНАЮ о Google Analytics. Мы используем его для общих показателей нашего сайта, и я знаю, что мы можем отслеживать отдельные ссылки. Однако нам нужно было решение для отслеживания очень специфических ссылок, и нам нужны эти данные для отслеживания, доступные нашему веб-приложению в режиме реального времени, поэтому я написал свое собственное решение:

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'); });
    });
  };

... используя плагин jQuery URLEncode ( http://www.digitalbart.com/jquery-and-urlencode/).

Теперь этот код прекрасно работает с моим бэкэндом PHP и на моей машине, но, похоже, он не работает надежно для всех остальных. Иногда параметры, передаваемые через jQuery, НЕ передаются, что приводит к записи в базе данных без name, url или же ref,

Что касается жизни, я не могу понять, почему это может происходить; Я знаю $.post запускается, поскольку в базе данных есть записи (в PHP я также записываю IP-адрес запроса вместе с отметкой времени), но во многих случаях сценарий PHP получает пустое значение $_POST переменные из jQuery.

Я тестировал его вживую на каждом браузере, к которому у меня есть доступ на рабочем месте, и все они отлично работают для меня; однако около 75% всех записей, созданных (не на моих компьютерах), показываются пустыми (большинство из них используют те же браузеры, что и я).

Почему это может происходить?

3 ответа

Решение

Я думаю, в конце концов, моя проблема закончилась тем, что jQuery потребовал слишком много времени для анализа запроса, и я довольно непреклонен в том, что не хочу делать ссылки "зависимыми" от javascript (либо от того, что они не будет работать без этого или из-за того, что пользователю придется ждать завершения запроса на отслеживание, прежде чем он перейдет на новую страницу).

После просмотра многих других решений в Интернете - одалживая у одних и вдохновляясь другими - я пришел к решению ниже в нативном javascript:

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'));

... который, кажется, намного быстрее, чем плагин jQuery, который я написал выше, и до сих пор был достаточно быстрым, чтобы отслеживать все запросы, которые я бросил на него.

Надеюсь, что это помогает кому-то еще!

Эти "клики" могут исходить от ботов или от кого-то с отключенным JS. Если вы нажали ссылки, то должны быть отслежены, почему бы вам не рассмотреть только ссылки JS, т.е. поместите URL в другое значение атрибута, отличное от href, затем используйте обработчик кликов для его обработки, добавьте проверку рефералов в track.php

Также вы проверили, являются ли все элементы ссылками?

Другие вопросы по тегам