document.referrer를 통한 유입매체 확인

referrer

콘솔창에 document.referrer를 입력하면 유저가 어디에서 왔는지 알 수 있다.

 

예를들어 코드스테이츠 랜딩페이지에서 지원하기 버튼을 통해 유어클래스 홈페이지에 진입하면

 

다음과 같이 이전 페이지를 확인할 수 있다.

 

document.referrer를 확인할 수 없는 경우가 있는데, 링크를 통해서 진입한 것이 아니라 직접 주소를 입력해서 진입했을때이다.

 

회사에서 무슨일이 있었는가?

 

GM팀에서 document.referrer를 통해 유입매체를 확인하려 했는데, url의 query가 짤린 도메인만 확인가능하다고 문의가 왔다.

 

예를들어 

 

https://www.codestates.com/course/ai?utm_source=Kakao_notify 와 같은 페이지에서 지원하기 버튼을 눌러서 유어클래스에 도달했을때 referrer url에서는 다음과 같이 queryString인 ?utm_source = Kakao_notify 가 빠진 도메인만 확인할 수 있었다.

queryString이 빠진 url

한참을 검색하다가 referrer정책 이란것을 알게 되었다.

 

meta태그로 페이지 전체에 설정하거나, a태그에 개별적으로 설정할 수 있는 것이다.

개발자 도구 element창에서 다음 meta 태그를 추가해주니 referrer url에서 queryString까지 다 확인할 수 있었다.

 

<meta name="referrer" content="unsafe-url">

 

메타태그로 referrer정책을 완화할 수 있다.

가벼운 마음으로 랜딩페이지에 referrer를 unsafe-url로 설정한 메타태그를 설정하려다 위 방법을 쓰지 않게 되었는데

 

통상적으로 url을 통해 민감한 정보가 유출되는것을 방지하기 위해 타 도메인끼리는 referrer공유를 제한하고 있다는 것을 알게 되었기 때문이다.

 

결론

팀원들과 referrer정책에 관해 상의하다가 한 분이 기가막힌 방법을 제시해주셨다.

 

바로 urclass로 향하는 버튼에 모두 queryString을 직접 붙혀주는 것이다.

 

GM분께는 referrer를 이용한 방법은 통상적으로 이용할 수 없다는 것을 알려드리고, 대안으로 urclass로 향하는 모든 링크에 url의 queryString을 붙히는 방법을 말씀드리자 좋은방법이라고 하셨다.