CSS를 사용하여 웹사이트 방문자 추적하기

프로그래밍에 관심이 있는 독일의 물리학과 학생인 Jan Brömer 는 JavaScript의 기능을 사용하지 않고 CSS만 사용하여 사이트 방문자의 움직임을 추적하는 예제를 GitHub 에 게시했습니다. Ian이 제공하는 코드를 사용하면 공식 언어를 사용하여 문서의 모양을 설명하고 사용자에 대한 특정 정보(기기의 화면 해상도, 브라우저(또는 엔진) 유형, 지정된 글꼴의 존재 여부 등)를 수집할 수 있습니다. 더. 사용자가 따라갔거나 커서를 이동한 링크를 추적하는 것도 가능합니다. 페이지 배경에 있는 보이지 않는 필드 테이블을 사용하면 화면에서 마우스를 움직이는 특성을 식별할 수 있습니다. 그러나 위의 방법을 사용하면 사용자가 해당 페이지를 처음 방문하거나 숨겨진 테이블의 특정 셀 위에 마우스를 올려놓은 경우에만 반복되는 작업이 고려되지 않으므로 추적에 사용할 수 있습니다. 여기서 메소드의 작동을 확인할 수 있습니다 . 이 방법을 사용하려면 URL(“foo.bar”)을 사용하여 외부 소스의 이미지를 CSS에 추가할 수 있습니다. 이미지 대신 리소스가 필요할 때만 로드되므로 컬렉터 스크립트에 대한 링크를 지정하고 링크를 클릭하거나 링크 위로 마우스를 이동하는 등의 이벤트에 바인딩할 수 있습니다. 따라서 사용자가 링크를 클릭할 때 특정 URL을 트리거하는 선택기를 CSS에서 만들 수 있습니다.

# link2 : active :: after {
     content : url ( " track.php? action = link2_clicked " );
}

브라우저 유형 감지는 @supports 규칙을 기반으로 합니다 . 여기서 -webkit-appearance와 같은 브라우저의 일부 CSS 속성을 확인해야 합니다.

@supports ( -webkit-appearance : none ) {
     #chrome_detect :: after {
         content : url ( " track.php? action = browser_chrome " );
    }
}

OS마다 다른 글꼴(예: Windows의 "Calibri")을 전송하므로 글꼴을 사용하여 사용자의 OS를 확인할 수 있습니다. 글꼴을 정의하려면 데이터 수집 스크립트가 될 로드 소스인 새 글꼴 모음을 만들어야 합니다. 다음으로, 텍스트 블록에서 테스트 중인 글꼴이 먼저 표시되고 새 계열의 글꼴이 두 번째로 표시됩니다. 다음으로 텍스트는 글꼴의 스타일을 지정하려고 시도합니다. 첫 번째 글꼴이 있으면 두 번째 글꼴은 무시됩니다. 그러나 확인할 글꼴이 없으면 브라우저는 대체 글꼴로 더미 글꼴을 사용하려고 시도하고 외부 스크립트에 요청을 보냅니다.

@ font-face {
     font-family : Font1;
    src : url ( " track.php? action = font1 " );
}

# font_detection1 {
     font-family : Calibri, Font1;
}

메서드를 사용한 후 결과가 없거나 PHP 경고가 나타나면 이는 속성 값이 false이거나 사용자가 아직 페이지/링크를 방문하지 않았음을 의미합니다.