jQuery:PHP를 사용한 클릭 추적
-
19-09-2019 - |
문제
예, 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%는 공백으로 표시됩니다(대부분은 나와 동일한 브라우저를 사용하고 있습니다).
왜 이런 일이 일어날 수 있습니까?
해결책
결국 내 문제는 jQuery에 의해 요청을 받기까지 너무 오래 걸렸다는 것이 결국, 나는 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 전용 링크를 고려해 보는 것이 어떻겠습니까?href가 아닌 다른 속성에 URL을 넣은 다음 클릭 핸들러를 사용하여 처리하고 track.php에 추천 확인을 추가하세요.
또한 모든 요소가 링크인지 확인하셨나요?