2012-02-15 2 views
4

외부 (고객) 사이트에서 회사 제품 사용을 모니터링하는 클릭 추적 시스템을 개발 중입니다. onclick을 사용하여 모든 요소에 자바 스크립트 호출을 넣으라고 고객에게 말하고 싶습니다.새 이미지()를 사용하여 클릭 추적을하는 것이 안전합니까?

현재 내 추적 서버에 요청을 만들려면 Image() 개체를 사용하고 있습니다. 이것은 잘 작동하지만, 이것이 안전한지 의문을 품고 있습니다. 이 링크를 클릭하면 브라우저가 링크를 따라 가기 전에 내 요청이 전송되고 있는지 확인할 수 있습니까? 내 테스트는 내가 할 수 없다고 제안합니다.

그래서 이미지로드가 완료 될 때만 true를 반환하는 onclick = "return MyFunction()"을 사용해 보았습니다. 그러나 MyScript()에서 스레드를 차단하는 동안 이미지를로드 할 수 없습니다. 자바 스크립트는 하나의 스레드에서만 실행되기 때문입니다. 따라서 차단 요청을 차단하는 차단 호출을 사용하여 요청의 위험을 줄일 수 있지만 사이트의 성능은 떨어 뜨릴 수 있습니다.

또 다른 접근법은 이미지가로드 된 후 페이지 전환을 처리하기 위해 콜백 등을 사용하는 것입니다. 다음과 같이하십시오 :

<a href="http://www.google.som" onclick="return MyFunction(this)">Link</a> 

<script type="text/javascript"> 

function MyFunction(theLink) 
{ 
var img = new Image(); 
img.onload = function(){ location.href=theLink.href; } 
img.src = "http://www.myserver.com/trackclick"; 

return false; 

} 

</script> 

이렇게하면 고객이 위의 요구 사항에 따라 기능을 구현해야합니다. 또한, 어떤 이유로 든 이미지가로드되지 않으면 (내 서버가 다운 된 경우) 고객 사이트가 중단됩니다.

Google의 ga.js를 확인한 결과 이벤트 처리 및 콜백 대신 일종의 차단 기능을 사용하고 있음을 알았습니다. 그러나 다시, 그들의 코드는 의도적으로 이해하기가 어렵습니다. .

  1. 내가 브라우저가 링크를 따라하기 전에 새로운 이미지를 사용하여 요청()를 온 클릭 이벤트에서 SRC 해고되어 있는지 확인 할 수있다, 또는 나는 지연을 사용해야합니다 :

    내 질문이 있습니다 ?

  2. 브라우저와 브라우저 버전에 따라이 동작이 달라 집니까?

  3. 내가 아직 발견하지 못한 클릭 추적을 수행하는 "모범 사례"방법이 있습니까?

편집 : 4. 누구든지 Google Analytics의 기능을 알고 있습니까? 그들은 return 문이나 콜백없이 onclick = "MyFunction()"접근법을 사용하는 것 같습니다.

+0

게시 한 코드를 사용하면 캐시에서 다시로드되지 않도록 링크를 고유하게 만들 수 있는지 확인할 수 있습니다. 사용자 사이트가 손상되지 않도록 'onerror' 이벤트도 처리해야합니다. –

+0

@Gaby 모든 브라우저에서 onerror를 사용할 수 있는지 알고 계십니까? onload를 사용하면 브라우저에 안전하지 않다는 것을 읽었습니다. 필자가 테스트했을 때 모든 최신 브라우저에서 정상적으로 작동하는 것으로 보입니다 (정확하게 기억하는 경우 IE7 이상) – DukeOf1Cat

답변

5

@ Gaby의 의견에 따라 캐시 된 요청을 피하기 위해 어떤 방법을 사용해야합니다. Date 개체를 사용할 수 있습니다. 같은 방식으로 작동하는 오류를 구현해야하므로 사이트를 손상시키지 않습니다. 코드는 같은 보일 것입니다 :

function MyFunction(theLink){ 
    var img = new Image(); 
    img.onload = img.onerror = function(){ location.href=theLink.href; } 
    img.src = "http://www.myserver.com/trackclick?d=" + new Date().getTime(); 
    setTimeout(function{location.href=theLink.href; }, 350); 
    return false; 
} 

이 방법으로, 서버가 다운되면, 사용자의 클릭을 기록하지 않습니다,하지만 사이트가 정상적으로 작동합니다. 이미지의 URL에 고유 한 쿼리 문자열을 추가하면 캐시 된 요청이 차단됩니다.

브라우저가 호환되지 않아 onload 또는 onerror가 실행되지 않으면 setTimeout을 사용하여 페이지를 원하는 URL로 리디렉션 할 수도 있습니다. 그런 식으로 예상되는 시간에 이벤트가 발생하지 않으면 궁극적 인 후퇴를 경험할 수 있습니다.

+1

아, 그래, 내 URL은 좀 더 복잡하고 캐시를 방지합니다. 나는 예제를 위해 단순화했다. 그러나 그것을 지적 해 주셔서 감사합니다! – DukeOf1Cat

+0

당신의 공포 의심의 답장으로 내 대답을 편집했습니다. –

+0

고맙습니다.이 문제를 해결할 수있는 해결책입니다. 나는 여전히 Google이 return 문이나 콜백없이 그것을 처리하는 방법에 관심이있다. 어쩌면 클릭 이벤트를 첨부 한 다음 이벤트 또는 다른 것을 취소 할 수 있습니까? – DukeOf1Cat

관련 문제