How to track image banner clicks in Google Tag Manager using CSS selectors. The instructor shows how to inspect elements, create variables with CSS selectors, set up event tags and triggers, then test with debug mode. CSS selector matching works when URL or text-based tracking won't.
오늘은 구글 태그 매니저 클릭 추적 하는데 기존에는 뭐 css나 클릭 url, 클릭 텍스트 이런 변수값을 활용했잖아요 근데 오늘은 그런게 조금 애매할 때 그럴 때 css 선택 도구로 잡는 방법을 알려드리도록 하겠습니다 내가 추적하고 싶은 이런 이미지 변형 형태의 구매하기 버튼 같은거 있죠
검사를 누릅니다
그러면 이제 소스 보기가 나오겠죠 여기 보시면 지금 이제 적용할 수 있는게 이미지 src 는 주소 그 다음에 alt 는 바로구매 요정도를 지금 적용할 수 있단 말이에요 그럼 요 두가지를 다 적용하는 방법을 한번 설명을 해드리도록 하겠습니다 여기 더블 클릭을 하시면요 이제 복사가 되겠죠 자 먼저 복사를 할게요 붙여넣었죠 그리고 이제 만들어 줘야 되는게 여기에서 어 지금 src는이 지금 다 복사가 안됐죠 그래서 src는을 이렇게 하고 쌍따옴표 시작합니다 이렇게 해주셔야 되고 끝에도 쌍따옴표를 이렇게 붙여주셔야 됩니다 그리고 대가로 이렇게 사각형 가로로 이렇게 쳐주셔야 됩니다
앞에도 마찬가지로
이렇게 해서 복사를 할게요. 그리고 이제 구글 태그 매니저로 가보겠습니다. 그럼 여기에서 이제 새로 만들기를 누르고요.
새로 만들기를 누르고 그리고 구매 클릭이라고 할게요.
그 다음에 여기에서 당연히 유니버셜 애널리틱스를 선택을 해주셔야겠죠. 그 다음에 이거는 이벤트고요.
라벨을 여기서 페이지 패스를 해줄게요.
그 다음에 여기에 설정 변수는 이제 이걸로 선택을 해줘야겠죠. 그 다음에 트리그라는 데서 들어와서 새 트리그를 이제 하나 만들고요.
그 다음에 바로 맨클릭이라고 해서 트리그를 하나 만들게요.
그 다음에 여기에서 모든 요소를 선택하시고요.
이제 변수값을 설정을 해줘야겠죠.
일부 클릭을 하고 변수값을 여기에서 이제 뭘로 선택을 해주시면 되냐면 클릭 엘레멘트라는 걸 이렇게 선택을 해주세요 그 다음에 여기는 css 선택도구와 일치라는 것을 그리고 좀 전에 우리가 복사했던 거 요게 이제 css 에 어떤 그런 소스 태그 부분이라고 생각을 하시면 될 것 같습니다 그래서 요 선택도 5와 일치한다라는게 요것과 일치할 때 클릭을 잡겠다 뭐 그런 뜻이 되는 겁니다 자 그래서 저장 버튼을 한번 누를게요 자 그러면 이제 이제 이게 됐고 여기도 이제 저장 버튼을 눌러 줘야겠죠 자 이렇게 또 됐습니다 됐고 이제 들어왔죠 그러면 바로 미리 보기로 한번 해볼게요
자 그러면 자 한번 눌러보도록 하겠습니다.
자 배제문구라는 요런 사이트가 떴고 그러면 아까
바로구매 버튼 바로구매 버튼을 이제 눌러봐야겠죠. 그 다음에 여기서 고티뉴.
자 지금 바로구매 클릭이라는게 지금 not fired로 되어있는 상태죠. 그러면 과연
디버그
모드에서 바로구매 버튼을 한번 클릭을 해보도록 하겠습니다. 자 클릭을 했습니다. 자 클릭을 했죠? 그러면 태그에서 어떻게 됐어요? 바로구매 클릭이 이렇게 올라온게 보이시죠? 태그 파이어드 자 요렇게 하실 수가 있구요. 그 다음에 아까 여기서 우리가 이미지 src 라는걸 이제 css 선택도구로 해서 이렇게 잡았잖아요 src 소스로 근데 이번에는 alt 자 이 alt 를 가지고 한번 잡아 보도록 할게요 이것도 하는 방식은 똑같다고 보시면 돼요 앞에 방식은 똑같구요 제가 여기에서 변수감만 바꿔 볼게요 변수감만 어떻게 바꾸느냐 자 여기에서 아까 우리가 변수값을 여기에서 클리어 엘리멘트 css 선택도구와 인치까지 똑같아요 근데 이제 여기는 이미지 src 이거를 변수값으로 한거고 이번에는 이제 alt 값을 변수값으로 하는겁니다 그래서 이건 지워버릴게요 자 지워버리고요 새로 alt 값을 가져오도록 하겠습니다 그러면 여기에서 alt 더블클릭을 해볼게요 그러면 알트는 바로구메 일단은 더블클릭이 됐죠? 그러면 여기에서 알트는 바로구메 이렇게 붙여넣으시구요. 자 이제 여기에서 요거를 해줘야겠죠?
이제 요렇게 사각형 가로를 요렇게 쳐줘야 됩니다. 쳐주고 요거를 그대로 복사를 하겠습니다.
복사를 한 다음에 들어와서 요렇게 집어넣습니다. 자 그러면 alt는 바로구매라는 이 css 선택도구가 일치되었을 경우에 클릭을 추적하겠다 뭐 이런게 되는거겠죠
자 그러면 저장 버튼을 누르시구요 자 다시 한번 또 해볼게요 자 이번에는 제출을 한번 해볼게요 자, 제출이 됐고요. 그 다음에 이제 작업 공간으로 와서 태그로 와서 미리보기로 다시 한번 들어가볼게요.
이거는 이제 기존의 거는 끄고요.
미리보기로 다시 한번 들어가보도록 하겠습니다. 자, 다시 이렇게 들어오고 자, 그러면 배제문구라는 이 사이트로 이렇게 들어와 볼게요. 자 디버그 모드 상태로 이제 들어오게 되구요 자 그러면 이제 다시 한번 바로 구매하기 버튼을 클릭해보겠습니다. 자 바로 구매를 요렇게 눌렀습니다.
됐죠? 자 그러면 이제 정상적으로 작동을 하는지 한번 보자구요. 지금 정상적으로 작동하는게 보이시죠? 태그 파이어트 자 그래서 지금 css 선택 도구와 일치라는 요걸 사용해서 알아봤습니다.
