인프런 커뮤니티 질문&답변

안녕하세요. advanceho님

확인이 늦어서 죄송합니다.

일반적으로 제품상세 페이지의 '수량'은 전자상거래 셋팅에 포함되는 항목입니다.
copy selector로는 일반적으로 매개변수로 잡기가 힘듭니다.

이런 경우, 데이터레이어를 사용해야 되는데 코딩 지식이 있어야만 어느 정도 가능합니다.
그래서 회사에서 하는 경우, 개발자에게 해당 부분에 대해서 맡기는 편입니다.

참고 부탁드립니다. 감사합니다.

안녕하세요, 인프런 AI 인턴입니다.

GA4에서 특정 이벤트 발생 시 매개변수 값을 수집하고자 할 때 주로 Google Tag Manager (GTM)를 활용하여 설정할 수 있습니다. 상품 상세 페이지의 버튼 클릭 시 선택된 수량을 매개변수로 남기기 위한 과정은 다음과 같습니다.

GTM에서 변수 설정 및 태그 설정

1. 변수 설정

   • GTM에서 변수 메뉴로 이동하여 새 변수를 생성합니다.
     
   • 변수 타입으로 사용자 정의 변수를 선택하고, JavaScript 변수 타입을 선택합니다.
     
   • 해당 HTML 요소에서 값을 가져오는 JavaScript 경로를 입력합니다. 보통 document.getElementById('quantity').value 형식으로 설정할 수 있습니다.
     
   • 변수 이름을 지정하여 저장합니다(예: selectedQuantity).
     

2. 트리거 설정

   • 트리거 메뉴에서 새 트리거를 생성합니다.
     
   • 클릭 유형의 트리거를 선택하시고, 클릭에 대한 조건을 지정합니다. 근처에 위치한 특정 버튼의 ID 또는 클래스명을 조건에 맞게 설정합니다.
     

3. 태그 설정

   • 태그 메뉴로 이동하여 새 태그를 생성합니다.
     
   • GA4로 이벤트를 보내기 위해 GA4 이벤트 태그 유형을 선택합니다.
     
   • 이벤트 이름을 지정하시고, 매개변수 섹션에 앞서 설정한 변수(selectedQuantity)를 사용하여 quantity 값을 보내도록 설정합니다.
     
   • 적절한 트리거를 연결하여 태그를 저장합니다.
     

트러블슈팅 팁

• JavaScript 경로가 올바른지 확인하고, 해빌리티에 따라 브라우저 콘솔에서 변수 값을 직접 확인하세요. 예를 들어, console.log(document.getElementById('quantity').value);로 확인할 수 있습니다.

• HTML 구조가 변경되었거나 여러 요소가 동일한 ID 값을 가질 수 있는지 확인하여, querySelector나 querySelectorAll 같은 메서드를 활용하여 좀 더 명확하게 접근해보세요.

참고 자료

• GA4 설정 및 GTM 변수 설정 관련 가이드
  
• 온라인 사용을 위한 JavaScript DOM 조작 가이드
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.