jQuery:PHP を使用したクリック追跡
https://stackoverflow.com/questions/1889190
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
はい、Google Analytics については知っています。私たちはこれをサイト全体の指標に使用しており、個々のリンクを追跡できることを知っています。ただし、非常に特殊なリンクに対する追跡ソリューションが必要であり、その追跡データを Web アプリケーションで利用できる必要がありました。 リアルタイムで, 、そこで私は私自身の解決策を書きました：
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 に「依存」させたくないということには断固としてこだわりました。これがないと機能しません。そうしないと、ユーザーは新しいページにアクセスする前に追跡リクエストが完了するまで待つ必要があります)。
他の多くのソリューションをオンラインで参照し、一部から借用したり、他のソリューションからインスピレーションを受けたりした結果、ネイティブ 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 に参照チェックを追加します。
また、すべての要素がリンクであるかどうかも確認しましたか?
