제목
제출 양식에서 특정 토글을 선택했을 경우에만 발현되는 form_submit 태그를 설정하고 싶습니다.
작성자
E
작성일
2024-01-09 08:37
조회
381
답변완료
안녕하세요 늘 다차타를 통해 많은 도움을 얻고 있습니다(늘 감사드려요!)

늘 눈팅만하며 다른 분들의 질문과 답변을 확인하다, GTM에서 적용이 어려운 부분이 있어 문의드립니다.

현재 : 리드폼(팝업 형식으로 뜸)에서 작성 후 제출 완료 시 'form_submit' 이벤트 발현 중(개발자분이 진행)

원하는 것 : 리드폼에서 '상담 희망 서비스' 항목에서 '인테리어 / 사무실 운영' 각각을 선택했을 때 각각 다른 이벤트가 발현되게 하고 싶음

ㄴ제출 전체 : form_submit / 인테리어 토글을 선택한 후 제출 시 : form_submit_interior / 사무실 운영 토글을 선택한 후 제출 시 : form_submit_operation

제출 전체 : form_submit은 이미 개발, 이벤트 발현중이라, 인테리어와 사무실 운영에 대한 이벤트를 추가 생성하고 싶은데요!

양식 제출에 대한 트리거를 설정하고, 인테리어 토글을 선택했을 때에만 트리거가 발현되도록 유효성 확인, 일부 양식을 걸어주었습니다.

ㄴ과거 답변주신 글 참고 : https://dachata.com/question/?uid=510&mod=document&pageid=1zmf

다만 여전히 미리보기에서 디버그를 해도, 새로 설정한 form_submit_interior는 발현되지 않고 있습니다ㅜㅜ

미리보기 화면에서 트리거를 체크했을 때 제가 설정한 모든 트리거 조건이 부합하지 않는다는 X 표시만 뜨고 있습니다..

답답한 마음에 트리거 생성 방법을 설정하는 방법에 대해 도움을 주실 수 있으실지 문의드립니다.

늘 도움 주셔서 감사합니다!

사이트 제출 팝업 예시



GTM 트리거 화면



GTM 미리보기 화면 : 설정한 트리거가 발현되지 않음

전체 5
  • 2024-01-09 16:08

    안녕하세요, E님
    일단 Click Element 조건을 설정하신 경우에는 Click ID, Click Clasess 조건을 설정하실 필요가 없습니다.
    Click Element 조건이 해당 조건들을 아우르는 개념이거든요.

    그래서 조건을 Click Element로 단순화 하시고, 입력하는 CSS Selector 구문을 제대로 작성하는 것을 추천드립니다.
    form_submit 항목이 미리보기 목록에 뜨는 것을 보아 트리거 조건만 제대로 설정한다면 정상적으로 작동할 것으로 보입니다.

    그 다음, 토글에 따라 이벤트를 구분하고 싶으실 경우에는 GTM의 '맞춤 자바스크립트' 변수를 활용하여 입력시의 토글 정보를 코드 작업을 통해 가져오셔야 하는데요.
    이러한 상세한 트리거는 엄밀히 말씀드리자면 코드를 모르는 비개발자가 구현하기 매우 어렵습니다.

    따라서, 가능하다면 기존에 개발자가 작업해준 코드를 변형시켜 토글 옵션마다 다른 이벤트 명을 입력해주게끔 개발 요청하는 방식으로 해결하는 것을 추천드려요 🙂

  • 2024-01-10 00:25

    공유주신 코드를 적용하신다면 form_submit_operation, form_submit_interior 각각에 해당하는 데이터 영역 변수를 GTM에 생성하시고,
    폼 제출시 입력되는 정보들을 조건으로 트리거를 interior, operation 별로 각각 생성하실 수 있습니다.

    이와 다른 제일 간단한 방법은 아래 두가지 예시 코드처럼, 옵션에 따라 dataLayer.push 코드의 이벤트 정보가 다르게 입력되는 것이구요 🙂
    (단, 이 경우에는 기존에 수집하고 계신 form_submit 이벤트가 미수집될 가능성이 높아보이네요.)

    1. dataLayer.push({'event': 'form_submit_operation'});
    2. dataLayer.push({'event': 'form_submit_interior'});

  • 2024-01-09 16:31

    안녕하세요! 빠른 답변 정말 감사합니다🙇‍♀️🙇‍♀️

    폼 제출 시 토글 선택에 따라 다른 이벤트 값을 송출하도록 하고자 한다면 개발자 분의 도움이 필요한 것이군요..!
    안그래도 외주 개발자분께 토글 선택에 따라 별도 이벤트를 쏴주실 수 있는지 여쭤보았었는데 아래의 스크립트를 삽입하면 되는 것인지를 역으로 문의 주셨었습니다.

    ▼ 외주 개발자 분께서 확인 요청 주셨던 코드

    1 운영 예시 : button onclick="dataLayer.push({'event': 'form_submit', 'form_submit_opeation ': true,'form_submit_interior': false});">무료 상담 받기</button
    -------------

    위 코드가 웹 페이지에서 무료 상담 받기(폼의 제출 버튼)를 클릭하면 발현되는 것이고,
    'form_submit_opeation'와 'form_submit_interior'의 true, false 값을 쏴주는 것임을 ChatGPT를 통해 해석했는데요!

    1. 위 스크립트의 경우 개발자에게 사이트에 심어달라고 요청하면 되는 것일까요?
    ㄴ 개발자 : 사이트에 스크립트 삽입
    ㄴ 제가 : 트리거, 태그 생성

    2. 혹은 위 스크립트를 제가 맞춤 자바스크립트 변수로 각각 생성하면 되는 것일까요~?
    ㄴ 제가 : GTM 맞춤 자바스크립트 생성 / 변수에 따른 트리거, 태그 생성

    2번이 맞나 하고 생각했다가도 웹사이트에서 토글 값 설정을 쏴주고 있지 않는데
    제가 이벤트의 true, false를 설정하는 것이 맞나 하는 마음에.. 바쁘심에도 추가 문의드립니다ㅜㅜ
    질문이 잘못되었거나 불가하다면 말씀 부탁드립니다 늘 감사합니다!

  • 2024-01-09 16:39

    2. 인테리어 예시 : button onclick="dataLayer.push({'event': 'form_submit', 'form_submit_operation ': false,'form_submit_interior': true});">무료 상담 받기</button

  • 2024-01-15 20:11

    답변이 너무 늦었습니다ㅠㅠ 결국 개발자분의 도움을 받지는 못하였지만..! 그래도 덕분에 gtm에 대한 이해도가 더 늘어났습니다🙇‍♀️ 감사합니다!!

« 이메일 내 리퍼럴 연결 URL 클릭 후 클락한 유저의 행위 추적은 가능한가요?
GA4 조회수 관련해서 문의드립니다! »
목록보기