GTM(구글태그매니저)로 Element Visibility 이벤트 세팅하는 법

 

 

안녕하세요~ 오늘은 구글 태그매니저로 Element Visibility 이벤트를 세팅하는 법에 대해서 적어보려고 합니다. 

지난 포스팅에 Scroll Depth 이벤트 태깅하는 법에 대해서 알아봤는데, 개인적으로 저는 Element Visibility가 Scroll Depth의 상위 버전이라고 생각하는 기능이라고 생각하는데요.

 

Scroll Depth는 주요지표로 보기에는 어려운 변수가 존재하지만, Element Visibility같은 경우 변수가 없다고 생각하기 때문입니다. 

이미지나, 클릭을 기준으로 어느정도 보이는지 세팅만 하면, 그거 자체가 Scroll Depth의 퍼센트의 비율이라고 생각하기 때문이죠.

 

2020/05/19 - [구글태그매니저(GTM)] - GTM(구글태그매니저)로 스크롤뎁스(Scroll Depth) 이벤트 세팅하는 법

Scroll Depth에 대해 알고 싶으신 분들은 위의 링크를 클릭해서 봐주시면 감사하겠습니다~! 

 

그럼 Element Visibility 세팅 방법 지금부터 시작하겠습니다. 

일단, 저는 제가 포스팅한 성수 옹근달 포스팅 중에 한 이미지를 가지고 Element Visibility를 세팅하겠습니다. 

트리거 이름은 넘어가고, 요소 방법(selection method)에서 css selector를 지정했습니다. 

요소 방법(selection method)은 ID 값과 css selector가 있는데, ID값이 부여되지 않을 경우, 저처럼 css selector를 이용하거나, 이것마저도 똑같게 나오면, html코드 단에 들어가서, ID 값을 부여해서 잡는 방법이 있습니다. 

(이건 이번 포스팅에는 자세하게 남기지는 않을게요!) 

 

먼저, 개발자도구를 켜주세요 (F12) 그리고 왼쪽 사진처럼 저 화살표를 클릭해주고, 저는 Element Visibility로 저 동영상을 잡으려고 하여 클릭을 하고, 오른쪽에 제가 선택한 이미지에 대한 html 코드 잡히게 됩니다. 

잡힌 html 코드를 마우스 우클릭 후, Copy에서 Copy selector를 눌러주세요. 

그리고 다시 GTM으로 향합니다. 

그럼, #coverImageWrap > div.dimmed_layer 이런식으로 selector가 잡힐거예요. 이걸 아까만들고 있었던 트리거에 붙어넣어주세요. 

복사해온 selector를 붙여넣어주고, 선택한 이미지를 기준으로, 어느정도 보이면 이 트리거가 터지게 할 건지 생각해주세요. 저는 온전히 100%를 봐야 의미가 있다고 생각해서, 100%으로 해보겠습니다. ( 세팅하는 분의 판단에 따라, 퍼센트는 골라주세요)

그리고 제가 포스팅한 url에서 저 이미지를 봤을 때, 트리거가 터지게 조건을 걸어줄거기 때문에,

page path / equals / entry/onggnmooncafe  로 조건을 부여하여, page path가 entry/onggnmooncafe와 동일할 경우, 이 트리거가 터지게끔 조건을 부여했습니다. 

그럼 이제, 트리거가 완성이 되었으니, 태그로 넘어가보도록 하겠습니다. 

태그 유형을 구글유니버셜애널리틱스로 선택해주고, 카테고리와 액션은 세팅하시는 분 개개인이 알아서 어떻게 하면 데이터를 잘 볼까 생각하고 넣어주시면 될 것 같아요! 

그리고, 단순히 이미지가 보이면 터지는 트리거이기 때문에, 비상호작용이 맞다라고 생각하여 True로 지정했습니다. 

그럼 마지막으로 태그 완료를 누르고, 미리보기 or refresh를 눌러서, 태그가 잘 작동하는지 확인해보겠습니다. 

 

정상적으로 잘 터진 것을 확인하실 수 있습니다. 

 

그리고, 동영상 같은 경우는 될때도 있고, 안될 때도 있는 걸로 알고 있는데, 저도 (개발자가 아니라, 정확하게는 잘 모르지만, 웬만하면 Element Visibility를 하실 땐, 이미지 or 클릭으로 잡아주시면 좋을 것 같아요! 

 

그럼 이상으로 GTM(구글태그매니저)로 Element Visibility 이벤트 세팅하는 법을 마치겠습니다~!