brunch

You can make anything
by writing

C.S.Lewis

by 어디에나 있는 리 Sep 23. 2021

포트폴리오 웹사이트: GA, Gtag 연결하기

데이터를 무료로 보여주겠다는데 봐야죠~~

디자인이 마무리가 거의 다 되었다면 또 진행해야 할 것이 있습니다. 바로 구글 애널리틱스 연결, 그리고 구글 태그매니저의 연결입니다.


당연히 다들 하지 않을까? 라고 생각하기는 하는데 저는 사실 제 이전 홈페이지를 만들었을 때에는 트래킹같은 걸 세세하게 설정할 생각을 하지는 않았었더랩니다. 사실 이게 좀 쉬운 건 아니라서 하다보면 내가 이걸 왜 하고있지?^^; 라는 생각이 들기도 하고둔요. 


그런데 이걸 또 프로덕트의 관점에서 생각해 보자면- 사이트를 오픈해서 트래픽이 유입이 되면 어디에서 어떤 식으로 유입이 되는지를 파악할 수 있죠. 내가 궁금한 건 무엇일까요?


여러 곳에 URL 을 뿌려놨는데 실제로 어디에서 가장 많은 유입이 일어나는지

→ URL builder 를 이용해서 URL에 막 트래킹을 덕지덕지 붙입니다. 다들 이 URL 긴거 어디에서 만드나 했는데 이렇게 빌더를 이용하기도 하고, 뭐 어디에서 유료로 멋지게 생성해주는 툴이 있을 것 같기도 하고요, 또 어떤 곳에서는 내부적으로 생성기를 만들어서 사용하기도 하고, 혹은 스프레드시트로 생성기를 만들기도 합니다.... 저같은 사람들은 그냥 빌더 씁니다.


https://ga-dev-tools.web.app/ga4/campaign-url-builder/


그래서 이걸 실제로 어디에다 썼을까요?

아래와 같이 적용시켰습니다.


https://www.leehyuna.com/?utm_source=brunch&utm_medium=link&utm_campaign=article&utm_id=main-url-from-brunch


브런치에 올리는 저의 URL 에는 브런치라는 소스태그를 달았구요. 블로그에 올리는 URL 에는 네이버 블로그라는 소스태그를 달았습니다.



심지어 제 이력서에서 링크를 클릭해서 유입이 되었다면 그것도 이력서라고 표시될 수 있도록 써 놓았습니다. 궁금하단 말이죠. 링크는 여기저기 심어놨는데 사람들이 실제로 그쪽에서 유입이 되는지가 말입니다(...) 내가 필요한 일을 한건가? 생각하는거죠. 탭 안하면 말고, 한다면? 그들이 원하는 자리에 필요한 것을 제공해 주었구나 하는 생각을 할 수 있겠습니다.


그러면 구글에서 이런 식으로 확인할 수 있습니다. 다이렉트 링크는 그냥 사람들이 링크 달라고 할 때 뿌렸던 링크들이고요. 아니면...네..저겠죠...접니다 단골고객^^;




그런데 구글이 친절하게 응 다 필요없어^^ 하고 알아서 싹둑 잘라줍ㄴ.... 그래도 괜찮습니다. 확인할 수 있으면 된 겁니다...


이렇게 구글 애널리틱스와 구글 태그를 달아서 뭐 하냐고요? 아래와 같은 궁금증이 늘 있지 않으신가요?



내가 버튼이라고 만들어 놨는데 사람들이 실제로 클릭하기는 하나?^^;


→ 이때 구글 태그매니저가 유용하게 쓰입니다. 연결하고 뭐하고 생성하고 하는 작업이 좀 귀찮아서 그렇지 한번 해놓으면 유용합니다. 물론 일반 클릭이벤트로도 잡히기는 합니다만 잡히는 게 좀 미적지근합니다. 클릭했어~^^ 라고만 알려주고 어디의 무슨 버튼을 클릭했다고 알려 주지는 않거든요. 그래서 태그매니저에서 좀 일일이...이긴 하지만 설정을 해 주면 나중에 아 이분이 이때 이버튼을 클릭했구나!!^^ 를 알 수 있습니다.


참고: 디버깅 모드로 테스트할 때 광고 자동차단 크롬 익스텐션 같은 걸 쓰고 있다면 계속 연결이 안된다고 광광거립니다. 한참 머리 쥐어뜯었는데 그냥 방화벽 차단을 꺼주면 됩니다. 이상하다...데자뷰...똑같은 일을 겪었던 기억이 납니다 네 3월에 그랬ㄷ ㅏ...ㅋㅋㅋㅋㅋㅋㅋㅋㅋ


오늘 연결했는데 구글 리얼타임에 안뜨는 걸 보니 24시간 정도 기다려 주어야 하겠습니다....제발 작동 잘 되기만을 바라옵니다 ㅋㅋㅋㅋㅋㅋㅋ


위와 같이 태그들을 만들어 놓았나이다


프로젝트..줄줄이 써 놓긴 했는데...정말 다 읽으셨습니까?


→ 구글 태그매니저에서 스크롤 설정을 할 수 있습니다. 이걸 보면 사람들이 실제로 스크롤을 얼마나 했는지 (퍼센티지 혹은 픽셀로 설정할 수 있습니다) 를 알 수 있죠. 스크롤을 했다면? 일단은 '읽었다' 라고 봐도 무방하겠죠? 네.........ㅎ...그 외에는 질문을 던져서 답을 맞추게 하는 것 이외에는 크게 알아낼 방법은 없사옵니다. 설정을 따로 안 하더라도 기본으로 구글 GA4에서 잡아주기는 합니다. scroll 이벤트가 알아서 떠 있다면 그것은 90% 이상 스크롤을 한 유저들의 수라는 의미입니다. (완독률만을 체크해 주는거죠)



제가..비디오 열심히 제작해 놨는데 실제로 재생하셨습니까?


→ 구글 태그매니저에서 유투브 비디오를 재생했는지를 확인할 수 있습니다. 유투브가 안되면 클래스나 id 클릭을 설정해서 확인하면 되긴 합니다.



그래, 결국 궁금증을 푸는 용도로 쓰는 것이 바로 GA 란 말입니까?


→ 네 맞습니다.^^; 물론 여기서 AB테스트를 한다던지, 구매가 이루어진다던지와 같은 이벤트가 일어난다면 달라지긴 하겠지만, 트래킹을 하는 건 포트폴리오 웹사이트이고, 트래킹의 목적은 제가 궁금한 것들을 해결하고자 하기 위함입니다. 예상치 못한 액션이 발생하거나, 사람들이 클릭을 제대로 못 하고 있는 것 같다거나(...) 한다면, 확인해 보고 왜 작동이 안 되는지를 테스트해서 수정할 수 있겠죠. 더 사용성이 좋은 웹사이트로 발전해나갈 수 있습니다. 예상 외로 이 버튼을 많이 누르네!? 예상 외로 어쩌구저쩌구네? 혹은 예상했던 대로 이러이러하네? 라는 지표를 얻으면 어느정도 이 웹사이트가 괜찮게 / 그렇지 않게 만들어졌구나 라는 지표가 됩니다. 


그리고 재미있기도 하죠. 내 프로덕트에 실제 사람들이 유입되고 인터렉션을 하는 걸 내가 보는 거니까요ㅎㅎㅎㅎㅎㅎㅎㅎ 백문이 불여일견 아니겠습니까. 아무리 말로 웹사이트가 예쁘다 / 못생겼다 / 별로다 / 좋다 라는 의견을 들어도, 실제로 홈페이지에서 어떤 행동을 했는지를 알 수 있다면 좀 더 객관적인 사실을 알 수 있지 않을까요. 


부디 연결이 잘 되어서 트래픽이 막 보였으면 좋겠다아아아아아ㅏ~~~~

매거진의 이전글 네비바 UI/UX, 얼마나 생각하고 디자인하세요?

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari