저번 블로그에서는 버튼 클릭 이벤트를 만드는 방법에 대해 알아봤었죠!
오늘은 어떠한 텍스트를 입력하고 버튼을 클릭했을때 텍스트에 입력한 값이 이벤트의 매개변수로 들어올 수 있도록 만들어 볼게요!
텍스트를 입력하고 누르는 버튼의 예시로는 검색창이 있겠죠?
따라서 저희 블로그의 아래 사진에 있는 검색창을 활용해서 이벤트를 만들어 보겠습니다.
1. 먼저 새로운 변수를 선언해줘야 합니다.
GTM으로 가서 변수를 클릭하고 사용자 정의 변수를 만들어 볼게요
여기서 새로만들기 버튼을 클릭하고 변수구성에 들어가서 맞춤 자바스크립트를 클릭해 볼게요.
맞춤 자바스크립트를 클릭하게 되면 아래와 같은 화면이 나올거에요
자 여기까지 했으면 이제 잠깐 저희 웹서비스로 돌아가 봅시다.
원하는 텍스트박스에 우클릭 > 검사를 선택하면 해당 텍스트박스의 요소가 나타납니다.
저의 경우에는 위 사진과 같네요
여기서 해당하는 부분의 id 값을 가져옵니다.
그 다음 맞춤 자바스크립트에 document.getElementById("").value; 에서 ""사이에 id값을 넣어주세요
이렇게 되면 해당 text box에 입력된 값이 변수로 받아지게 됩니다.
이제 저장하기 버튼을 누르고 변수의 이름을 설정해주세요.
2. 다음엔 트리거를 설정해볼게요
트리거로 가서 새로만들기 버튼을 클릭하고 들어가서 트리거 유형 선택에서 모든 요소를 선택해주세요
이제 다시 웹서비스로 이동해볼게요
저는 검색하기 버튼인 돋보기 버튼에 id가 없어서 html을 수정해서 넣었습니다.
id를 보면 searchSubmit입니다.
자 이제 다시 gtm으로 돌아와 주세요.
모든 클릭 => 일부클릭 이렇게 변경해주시고 검색변수를 Click ID로 바꿔주세요!
가운데는 같음으로 한 후 오른쪽에는 아까 알아본 id를 입력하면 됩니다.
이제 저장 해주시고 태그로 이동해주세요!
3. 이제 태그를 만들어 봅시다.
새로 만들기를 선택한 후 먼저 태그 구성을 선택해주세요.
아래 사진에서 이벤트! 를 클릭해주면 됩니다.
그후 아래 화면처럼 구성 태그와 이름을 지정해주면 되는데! 저번 버튼클릭이벤트와 동일합니다.
이제 중요한 부분이에요. 이벤트 이름 부분에 아래에 있는 이벤트 매개변수 부분을 통해서 저희가 만드는 이벤트의 매개변수를 추가해 줄거에요.
매개변수 이름은 아무거나 원하는 걸로 설정해주시고 값에 아까 전에 직접 만들었던 변수를 넣어주세요. ! 저의경우는 검색변수가 여기에 해당됩니다.
여기까지 하고 트리거에 아까 만들었던거 추가하면 완성!!!!!
4. 검사
여기도 버튼클릭 이벤트 생성때와 동일해요! 위에 있는 미리보기를 클릭해 주세요
그후 여러분의 웹서비스의 url을 입력한 후에 이제 직접 실험해보면 됩니다.
이렇게 하고 검색 버튼을 누르면!
이렇게 이벤트가 잘 적용된걸 볼 수 있어요!
여기서 ga4에 들어가서 실시간 보고서에서 아래 사진처럼 타고 들어가주면! 이렇게 검색어가 데이터로 기록된것을 볼수 있어요!
마지막으로 제출버튼을 눌러주면 완성!!
'GA4' 카테고리의 다른 글
| GA4 : 방문자의 scroll 깊이 추적하기 (0) | 2023.06.23 |
|---|---|
| GA4 : 구글 태그 매니저(GTM) (0) | 2023.06.20 |
| GA4: UTM 파라미터를 이용한 유입 경로 추적 (1) | 2023.06.17 |
| GA4 : 버튼 입력 이벤트 생성하기 (0) | 2023.06.16 |
| 방문 경로 추적하기 (1) : 리퍼러(referrer) (1) | 2023.06.13 |
