브라우저 개발자 도구를 이용해 전달되는 데이터 확인하기

오늘은 브라우저 개발자 도구를 이용해서 3rd Party Tool에 전달되는 데이터를 확인해보려고 합니다.

꼭 개발자 도구를 사용하지 않더라도 데이터를 확인할 수 있는 방법은 많습니다. 하지만 가장 원초적인 내용을 이해하고 다른 도구를 사용한다면 어떠한 원리를 통해서 작동하는지 쉽게 이해 할 수 있습니다.

※ 브라우저 환경 : Chrome (ver. 88.0.4324.190)

먼저 아래의 [이미지 1] 과 같이 [도구 > 도구 더보기 > 개발자 도구] 선택하면, 사이트를 구성하고 있는 HTML과 Java Script, CSS를 확인 할 수 있습니다.

또는 윈도우에서는 [Ctrl + Shift + i] 단축키를 사용하신다면 개발자 도구를 손쉽게 확인 할 수 있습니다.

여기까지 오셨다면 절반은 끝났습니다.

개발자 도구를 열었다면 기본적으로는 Elements 라는 탭의 내용을 확인합니다. 다만, 이번에 저희가 사용할 탭은 Network 탭을 이용할 것입니다.

Network 탭을 선택하신다면 아래의 [이미지 2]와 같이 아무것도 없는 화면을 확인 할 수 있습니다.

이번에 확인하고자하는 데이터는 가장 많이 사용되는 Google Analytics & Facebook 입니다. 그렇기 때문에 Network에서 데이터를 확인할 수 있습니다.

먼저 필터 영역에 collect라고 작성해보겠습니다. 그리고 페이지 새로고침(F5)을 해보시면,

[이미지 3]과 같이 어떤 목록들이 확인되는 것을 볼 수 있습니다. 저기 보여지는 것들은 데이터가 전달되는 순서(위 -> 아래) 입니다. 그렇다면 위에서 세번째에 위치하고 있는 데이터를 확인해보겠습니다.

위 [이미지 4]를 확인하시면 여러가지 내용을 확인할 수 있습니다.

꼭 확인해야하는 몇가지만 골라서 설명을 드리겠습니다.

전달된 데이터를 해석한다면,

"14603"으로 시작하는 사용자가 "http://opinno.co.kr" URL과 "오피노"라는 제목을 가진 "페이지"를 보았습니다. 이 내용을 GA의 "UA-109940245-1"로 전달합니다.

로 해석할 수 있습니다.

마지막으로 페이스북의 데이터 또한 확인해보도록 하겠습니다. 페이지를 새로고침 할 필요 없이 필터 영역에 페이스북을 작성하면, 다른 목록을 확인할 수 있습니다.

[이미지 5]를 보시면 GA와 크게 다른 것은 없습니다.

그래도 다시 한번 중요한 몇가지만 골라서 설명드리겠습니다.

전달된 데이터를 해석한다면,

"16039"로 시작하는 사용자가 "http://opinno.co.kr" URL을 가진 "페이지"를 보았습니다. 이 내용을 페이스북의 "1196134733861887"로 전달합니다.

와 같이 해석할 수 있습니다.

이처럼 현재 페이지에서 어떤 데이터가 전달 되는지 가장 원초적인 방법인 브라우저의 개발자 도구를 통해서 확인했습니다.

크롬을 사용하실 경우에는 확장프로그램을 통해서 확인할 수 있습니다.

하지만, Edge, Safari, Firefox 등 다른 브라우저를 사용하는 경우에는 3rd Party Tool의 실시간 기능으로 확인하거나 다음날 수집된 데이터를 확인했습니다.

이제는 그럴 필요 없습니다. 모든 브라우저는 개발자 도구를 포함하고 있고 Network 탭과 같은 기능을 반드시 가지고 있습니다.

오피노마케팅 다른기사 보기