GA4) Perfomance Marketing JavaScript로 태그매니저 활용 (Click Element와 선택자 동적변수 만들기)

생일과 주말이 겹쳐 쉬고 왔습니다.

 

이번에는 Click Element와 선택자로 동적변수 만들기를 해볼 예정이다.

 

 먼저 구글 태그매니져로 들어와주자 

 

기본 제공 변수에서 우측에 있는 구성을 눌러주자 

 

Click Element를 눌러주자 

 

잘 들어온 것을 확인할 수 있다.

 

이것을 체크한 이유는 미리보기 영역에서 이 변수가 어떤값을 반환하는지 볼 수 있다.

 

한번 미리보기를 눌러보자.

 

내 블로그 주소를 넣어 연결해주자

 

 

미리보기로 연결된 내 블로그에서 

하트버튼을 눌러보니

 

Tag assistant에서 클릭이 기록된것을 확인할 수 있었다.

 

12번째 행위인 Click을 누르고 

Variavbles을 눌러 들어가게되면

 

우리가 사용하기로한 Click Element가 복잡한 변수들을 제공하는것을 확인할 수 있다.

 

자세히보면 우리가 선택한 요소의 위치값을 css선택자 기준으로 반환해주고 있다.

 

즉 Element는 class값이나 id값이 없을때 위치값을 반환해주는 동적 변수라는 것이다.

 

Click Element로 별도의 이벤트를 만들수도 있다.

 

내가 추적하고자 하는 하트버튼에 검사버튼을 누르면 

 

innetText가 좋아요 라고 표기되는것을 볼 수 있다.

 

아까 태그어시스턴트에서 잡혔던 Element는 하트버튼을 의미하는것이며

하트버튼 안에있는 innetText를 가져오게 될거다.

 

그래서 우리는 클릭을 했던 Click Element의 innerText를 반환하라 라는 맞춤 자바스크립트를 만들어볼것이다.

 

태그매니져 사용자 정의변수 - > 새로만들기를 눌러주자.

 

이름은 "버튼 이름" 으로 생성해주고 

 

유형은 맞춤 자바스크립트로 설정해주자.

 

코드를 작성해봤다.

 

Click Element의 innerText를 가져와라 라는 내용인데 

 

이렇게 된다면 우리가 설정한 하트버튼의 innerText인 

 

"좋아요"와 숫자 "2" 가 나타날것이다. 

 

한번 해볼까? 

 

만든것을 저장하고 미리보기를 눌러주자 

 

그리고 아까처럼 내 사이트 주소를 입력하고 들어와서 하트버튼과 공유하기버튼 등을 눌러준 뒤  

 

위 항목에서 확인해주면? 

 

위 사진과 같이 "버튼 이름" 이라는 이벤트에서 "좋아요" 라고 표기된것을 볼 수 있다. 

 

우리가 클릭하고자하는 element의 innerText가 있기에 동적변수로 가지고 올 수 있는것이다.

 

이걸 만들었으면 이제 우리가 설정했던 하트버튼 클릭이벤트, 공유하기 클릭 이벤트를 수정할 수 있다.

 

하트버튼의 값은 heart, 공유하기의 값은 share였는데 

 

값을 지우고 거기다 방금 만든 동적변수를 넣어주면된다

 

{{버튼 이름}} 

 

heart라고 된 것을 지워서 동적변수를 넣어주자.

 

공유하기도 마찬가지로 설정해주자 

 

우리는 보다 더 효율적이게 설정해봤다.

 

끗 !@