구글태그매니저 클릭이벤트 다양한 변수로 설정하는 방법 동영상

자 이번에는 구글 태그 매니저를 이제 우리가 세팅을 다 했으니까요. 구글 태그 매니저를 사용하는 가장 큰 목적 중에 하나가 내 구매 플랫폼인 사이트나 쇼핑몰 같은데 와서 사용자들이 어떤 버튼을 클릭하는지 이런거를 측정하는 부분에 있어서 굉장히 유용한 역할을 하고 있거든요. 자 그래서 어떻게 그러면 그걸 할 수 있는지 한번 보도록 하겠습니다. 일단은 여러분들이 먼저 하셔야 될 것은 여기 구글 태그 매니저로 오셔서요. 처음에 새로 만들기를 먼저 하나 하셔야 돼요. 자 그러면 태그에는 테스트 버튼 클릭 이라고 표현을 할게요. 테스트 버튼 클릭 그죠? 그 다음에 저는 일단 익숙한 유니버셜 구글 애널리틱스 유니버셜 애널리틱스로 선택을 하도록 하겠습니다 자 그리고 여기에서 반드시 추적 유형을 뭘로 해줘야 된다 이벤트로 바꿔주셔야 됩니다 이벤트 그 다음에 카테고리는 메인화면 테스트 버튼이라고 표현할게요 그죠? 메인화면 한 칸 띄우고 테스트 버튼 아니면은 그냥 테스트 버튼 이라고 하셔도 상관은 없습니다. 작업은 버튼 클릭 이라고 표현을 해 줄게요. 클릭 자 그 다음에 라벨 이라는 거는 뭐 안 하셔도 되는데요. 저 같은 경우는 그냥 페이지 패스 페이지를 좀 더 깊이 있게 분석을 해야 되니까요. 페이지 패스로 이렇게 해둘게요 그 다음에 이제 여러분들이 반드시 여기서 빠뜨리지 마셔야 될 건 설정 변수를 우리가 아까 등록한 구글 애널리틱스 유니버셜 테스트 있죠 자 요걸로 지정을 해주셔야 됩니다 그렇죠? 그래야 요걸로 잡아낸다 라는 거죠. 이런 거를, 이 이벤트를. 자, 그리고 나서 이제 중요한 게 트리거입니다. 트리거. 그러면 트리거는 방아쇠를 클릭하는 거니깐 버튼을 클릭하는 게 되겠죠. 그렇죠? 근데 여기는 지금 보시면은 버튼을 클릭한다는 그런 어떤 트리거가 없잖아요. 그러면 이제 만들어 줘야 되는 거죠. 자, 여기 플러스 버튼을 눌러 주시고요. 자, 요거는 트리그가 이제 테스트 버튼 클릭 트리그죠

그죠

요거를 이렇게 써주시고 요거를 이제 만들어 줘야 되는데 어떻게 만들어 줄 것이냐 모든 요소를 클릭합니다 클릭의 모든 요소 요거를 클릭을 해주시고 이제 모든 클릭이 아니라 일부 클릭을 클릭을 해줘야 돼요 그죠 자 그 다음에 그 다음에 이제 여기에서 변수를 선택을 해 주셔야 됩니다. 변수는 이제 뭘로 선택하느냐 여기에서 이제 좀 중요합니다. 자 일단은 잠깐 이렇게 내려놓으시구요. 이제 사이트로 와 볼게요. 이 버튼의 속성을 먼저 좀 파악을 하셔야 돼요. 그래서 이 버튼에다 갖다 대고 마우스 오른쪽 버튼을 한번 클릭을 해 보도록 하겠습니다. 자 그리고 나서 검사 버튼을 이렇게 한번 눌러볼게요 자 그러면 자 요 지금 버튼 보이시죠 이 버튼에 해당되는 요 소스가 지금 나오고 있죠 그죠 그죠 자 그러면 여기에서 자 일단 첫번째로 우리가 먼저 시도를 해볼 수 있는 것은요 뭐 여러가지가 있지만 여기 ahref는 해서 이런 링크 클릭 요 주소를 클릭했을 때도 가능하고요 그 다음에 지금 테스트용 버튼이라는 요 타이틀 텍스트 요거를 클릭했을 때도 인식하게끔 할 수 있는 거고 그 다음에 클래스 값 클래스 값은 지금 보니까 요렇게 되어 있네요 자 그러면 일단은 가장 일반적으로 많이 쓰는게 클래스 값이니까 제가 클래스 값으로 먼저 한번 해보도록 하겠습니다. 여기 보시면 abtn 자 여기 나오죠. 클래스 값이 한번 먼저 복사를 해보도록 하겠습니다. 자 클래스 값이라는 것을 한번 복사해 보도록 할게요. 지금 이게 조금 인터넷이 느려서 그런 것 같습니다. 자 이렇게 더블 클릭하면 요 부분만 이렇게 복사할 수 있게 떠요. 그러면은 복사를 그대로 해주시구요. 자 이제 태그 매니저로 이렇게 오셔서 자 여기 부분은 자 여기에 지금 클릭 클래스라는 값이 없잖아요. 그죠? 그러면 기본 제공 변수 선택이라는 대로 들어옵니다. 그러면 여기에 보시면 쭉 내리시다 보면 여러가지 이제 변수를 설정할 수 있는 것들이 있는데 여기에서 클릭 클래시즈라는 것을 선택을 해줍니다 그죠 자 그리고 정확하게 일치했을 때 같음으로 하셔도 되고 포함으로 하셔도 되는데 일단 저는 혹시 모르니까 그냥 포함으로 할게요 그렇게 하고 자 이렇게 됐을 때 이렇게 하고 저장 버튼을 한번 눌러보도록 하겠습니다. 제대로 작동이 돼야 될 텐데요. 자 그러면 이제 트리거도 완성이 됐고 다 세팅이 됐으니까 저장 버튼을 한번 클릭해 보도록 하겠습니다. 자 그러면 테스트 버튼 클릭 이라는게 이렇게 완성이 됐습니다 그죠 하나가 이렇게 완성이 됐어요 자 그러면 이번에도 미리 보기를 한번 해봐야겠죠

그죠

자 미리 보기 한번 해보도록 하겠습니다 자 여기 요거는 잠깐 이제 없애버릴게요 자 이제 디버그 모드 상태가 됐죠 그러면 이제 태그로 와서 컨티뉴얼 해주시고 지금 보시면은 테스트 버튼 클릭은 not fired죠 그죠 그러면 디버그 모드인 상태에서 이 테스트용 버튼을 클릭했을 때 이게 fired로 올라가면 지금 정상적으로 잘 세팅이 돼서 작동을 한다는 뜻입니다 자 한번 눌러보도록 하겠습니다 테스트용 버튼 눌렀죠? 그죠? 누르고 지금 이동이 됐죠. 자 그러면 정상적으로 작동이 됐는지 한번 볼까요? 자 왔을 때 어떤가요? 지금 좀 전에 밑에 있던게 이렇게 쏙 하고 올라오는게 보이시죠? 자 그러면 테스트 버튼 클릭이 정상적으로 작동이 되는 겁니다. 자 그러면 우리가 여기서 아까 포함으로 했는데 요거를 이제 같음으로 했을 때도 잘 되는지 한번 테스트를 해 볼게요 자 가서 다시 한번 눌러 볼게요

자

여기서 아 이거네요 자 카튼으로 이렇게 하고 다시 저장을 해 보도록 하겠습니다. 잘못 연거죠? 이거는 아까? 마니도 잘못 열어놨네요. 자 그리고 혹시 모르니까 제출을 한번 누르고 다시 됐죠? 그리고 다시 미리 보기로 들어가도록 하겠습니다. 벌써 태그가 3개가 되어버렸네요 순식간에 태그가 3개가 되어버렸습니다 자 그러면 이 상태에서 클릭 테스트 버튼 클릭 자 이 상태에서 미리 보기를 클릭합니다

자

이거는 없애버릴게요 테스트용 버튼 또 눌러볼게요 자 눌렀어요 그죠?

자 그러면 자

컨티뉴 누르고 오우 정상적으로 올라오네요 그죠 예 요렇게 해도 올라오고 있는 걸 알 수가 있습니다 그죠 자 그러면 이번에는 이번에는 다시 또 다른 걸 테스트 한번 해 보도록 하겠습니다 이번에는 테스트 버튼 클릭을 요렇게 하시고 이제 변수 값을 다른 걸로 넣어서 한번 해볼게요 다른 걸로 자 내려서 자 요기 클릭 클래스 말고 아까 우리가 또 할 수 있었던 것 중에 하나가 이 버튼에 텍스트가 있었죠. 텍스트가 뭐였어요? 테스트용 버튼이란 요 텍스트가 있었죠. 아까 잘 못 보신 분들을 위해서 다시 한번 보여드릴게요. 여기에서 마우스 오른쪽 버튼을 클릭한다고 했죠. 마우스 오른쪽 버튼 그 다음에 검사 그러면 요 영역이 나온다고 그랬죠 그러면 지금 우리가 클래스 값은 활용을 했죠 근데 이 타이틀 이라는데 그죠 이 버튼의 텍스트 버튼의 텍스트가 지금 테스트 용 버튼 이라는게 이렇게 보이시죠 그죠 요거를 이제 한번 활용을 해 보도록 하겠습니다 자 그러면 테스트용 버튼 두 번 더블 클릭하니깐 요렇게 이제 또 떠올랐죠 그러면 다시 이제 요렇게 해주시고 이제 됐죠 컴퓨터가 좀 느리네요 자 그러면 여기에서 변수에서 이번에는 클릭 클래시즈로 하는게 아니라요 요렇게 기본 제공되는 변수 중에서 쭉 내리시다 보면 쭉 내리시다 보면 클릭 텍스트라는 게 있습니다 텍스트 자 클릭하고 텍스트 자 그러면 클릭 텍스트라는 변수가 이렇게 나오게 됐죠 그죠 아까 클릭 클랙스도 한번 설정을 하니까 그 다음부터는 생성이 됐죠 변수는 내가 이렇게 얼마든지 갖다 놓을 수 있어요 새롭게 자 그러면 클릭 텍스트 같음 자 그럼 뭐와 같나 테스트용 한칸 띄우고 버튼이라고 되어 있는 요렇게 되어 있는 요 텍스트를 클릭했을 때 클릭했을 때 방아쇠를 남겨라 신호를 줘라 그런 뜻입니다 자 그래서 저장 버튼을 눌러보도록 하겠습니다 자 이제 완전히 이제 바뀌었죠 이제 가서 다시 어 혹시 모르니까 또 제출을 한번 누르구요 다시 미리 보기 모드로 들어가 볼게요

변수가

늘어났죠? 다시 작업 공간으로 와서 태그 그 다음에 미리 보기 이제 또 들어가 보도록 하겠습니다 그 다음에 다시 디버그 모드로 또 들어가야죠 지금 밑으로 내려와 있죠? 다시 보이시죠? 태그즈 낫 파이어드 자동으로 떨어집니다. 한번 하고 나면 자 그러고 나면 다시 테스트용 버튼을 눌러보겠습니다.

이렇게

이제 눌러졌죠? 그러면은 다시 일로 가볼게요. 자 어떻게 됐어요? 테스트 버튼 클릭이 정상적으로 작동되고 있는게 보이실 겁니다. 그죠? 자 그래서 지금 우리가 뭘 확인할 수 있었죠 지금 두 가지는 확인할 수 있었죠 클릭 클래스 값과 그 다음에 텍스트 값은 정상적으로 잘 작동된다 라는 걸 확인할 수 있었고 그러면 이번에는 클릭 URL 값도 혹시 가능한지 한번 테스트를 해볼게요 자 이렇게 또 검사를 누르구요

자

클릭 URL 이라는 건 결국엔 뭘까요? 이거 이 버튼을 지금 우리가 클릭했을 때 어딘가로 이동을 했잖아요 그러면은 그 뒤에 달려있는 어떤 URL a h r e f 는 이제 링크 태그니깐요 요 URL을 클릭했을 때 자 그럼 요거를 더블클릭 한번 해보겠습니다 이 주소인 것 같은데 이 주소를 클릭했을 때 이거를 제가 한번 복사를 해서 한번 비교를 해 보도록 하겠습니다.

url

을 이제 똑같네요 복사를 하고요 자 여기에서 자 이번에 또 테스트 버튼 클릭으로 들어가서 url 로 한번 바꿔 보겠습니다 제대로 작동이 되는지 테스트 버튼 클릭 누르고

아이고

여기도 들어올 필요가 없죠. 자꾸 헷갈리네요. 자 여기에서 이번에는 클릭 url 또 없으니깐 기본 제공 변수에서 클릭 url 변수를 다시 끌고 와야 됩니다 클릭 url 그죠 이제 생성이 됐죠 그러면 여기 생성이 됐죠 그 다음에 갓틈

자 요렇게 그죠

근데 갓틈으로 하지 말고 포함으로 한번 해볼게요 자 요렇게 하고 저장 버튼을 누르도록 하겠습니다 자 그래도 혹시 모르니까 제출 버튼을 요렇게 또 누르구요. 자 변수가 9개로 늘어났죠. 자 여기에서 이제 미리 보기로 다시 한번 들어가 보겠습니다. 과연 잘 나올지 궁금하네요. continue 자 테스트 버튼 클릭은 또 밑에 있죠? 그 다음에 디버그 모드 됐죠? 테스트용 버튼 한번 눌러보겠습니다. 클릭을 했을 때 과연 이동할까요? 그죠? 어? 아 이동을 했네요. 그러면 세가지가 다 제대로 작동을 하고 있다는 뜻입니다. 그러니까 여러분들이 이제 여기 결론적으로 지금까지 이제 이런거를 한 이유가 뭐냐면요. 여기에 이제 요런 버튼 같은 것들을 이제 내가 이벤트 태그로 구글 태그맨 이제 설정을 하실 때 설정을 하실 때 지금 쓰실 수 있는 값이 여러가지가 가능하다는 거죠 지금 좀 전에 보여드린 것처럼 텍스트도 텍스트 버튼에 있는 텍스트도 가능하고 버튼에 있는 클래스 값도 가능했고 그 다음에 버튼에 있는 지금 보여드린 것처럼 클릭 URL 값도 가능한 겁니다 그래서 그 중에 이제 여러분들이 보시기에 편안한 거 그런 걸로 사용을 하시면 될 것 같습니다 자...