안녕하세요 😀

이번에 포스팅 내용은 브라우저 개발자 도구를 이용해서 3rd Party Tool에 전달되는 데이터를 확인해보려고 합니다!!

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

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

먼저 아래의 [사진 1] 과 같이 [도구 > 도구 더보기 > 개발자 도구] 선택하면 사이트를 구성하고 있는 HTML과 Java Script, CSS를 확인 할 수 있습니다. 또는 Windows에서는 [Ctrl + Shift + i] 단축키를 사용하신다면 개발자 도구를 손쉽게 확인 할 수 있습니다.

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

[사진 1. 개발자 도구 열어보기]

개발자 도구를 열었다면 기본적으로는 Elements 라는 탭의 내용을 확인합니다.

다만, 이번에 저희가 사용할 탭은 Network 탭을 이용할 것입니다.

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

[사진 2. 개발자 도구 > Network]

이번 포스팅에서 확인하고자하는 데이터는 GA & Facebook 입니다!!

GA와 Facebook은 API를 이용하여 데이터를 전달합니다. 그렇기 때문에 Network에서 데이터를 확인할 수 있습니다.

어떤 구조로 이루어져 있는지는 나중에 포스팅으로 알려드릴께요 😀

자 !

먼저 필터 영역에 collect라고 작성해보겠습니다.

그리고 페이지 새로고침(F5)을 해보시면…..!!

[사진 3. GA 데이터 확인하기]

[사진 3]과 같이 어떤 목록들이 확인되는 것을 볼 수 있습니다.

저기 보여지는 것들은 데이터가 전달되는 순서(위 -> 아래) 입니다.

그렇다면 위에서 세번째에 위치하고 있는 데이터를 확인해보겠습니다.

[사진 4. GA로 전달되는 데이터(pageview)]

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

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

- dl : 현재 페이지 URL

–> http://opinno.co.kr/

- dt : 현재 페이지의 제목

–> 오피노

- t : 데이터 유형

–> pageview

- tid : Google Analytics의 데이터 속성 ID

–> UA-109940245-1

- cid : 현재 사이트에 접속한 GA의 사용자 구분 ID

–> 1460399957.1603960879

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

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

마지막으로 Facebook의 데이터 또한 확인해보도록 하겠습니다.

페이지를 새로고침 할 필요 없이 필터 영역에 facebook을 작성하면 다른 목록을 확인 할 수 있습니다.

[사진 5. Facebook으로 전달되는 데이터(pageview)]

[사진 5]를 보시면 GA와 크게 다른 것은 없습니다.

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

- id : 페이스북 픽셀 ID

–> 1196134733861887

- ev : 데이터 유형 (이벤트 이름)

–> PageView

- dl : 현재 페이지 URL

–> http://opinno.co.kr

- fbp : 현재 사이트에 접속한 Facebook의 사용자 구분 ID

–> fb.2.1603960880864.1201389409

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

[16039로 시작하는 사용자가 http://opinno.co.kr URL을 가진 페이지를 보았습니다. 이 내용을 페이스북의 1196134733861887로 전달합니다.] 와 같이 해석 할 수 있습니다.

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

Chrome을 사용하실 경우에는 WASP나 다른 툴을 통해서 확인 할 수 있습니다.

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

이제는 그럴 필요 없습니다.

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

이번 포스팅은 브라우저 개발자 도구를 이용하는 방법을 알아보았습니다 😀

조금이라도 도움이 되셨으면 좋겠습니다!!

감사합니다.