작업 요청 · 마케팅팀 → 웹디자인팀

홈페이지 · IoT 사이트 측정 태깅 요청

작성일: 2026년 9월 11일
대상: www.eyagi.co.kr/shop · iot.eyagi.co.kr

두 사이트 모두 메뉴·버튼이 눌린 기록이 남지 않아 어디가 쓰이는지 볼 수 없습니다. 아래대로 속성만 붙여 주시면 나머지 설정은 마케팅팀이 처리합니다. 화면·동작은 바뀌지 않습니다.

A이야기모바일 홈페이지www.eyagi.co.kr/shop · GTM-NWSJT4N

A-1. 속성 붙이기 (8곳)

붙일 요소	추가할 속성	수집되는 것
`#quickChipsContainer` 1순위	`data-ui-area="plan_filter"`	요금제 찾기 필터 칩 25개 + [필터]·[전체]
`header.rd-gnb`	`data-ui-area="gnb"`	대메뉴 6개 + 메가메뉴 중·소메뉴 전부 + 개통하기·배송조회·내 계정
`ul.cs_block`	`data-ui-area="cs_menu"`	고객센터 아이콘 카드 12개
`.gnb-overlay`	`data-ui-area="mobile_menu"`	모바일 전체메뉴 링크
요금제 목록·정렬 컨테이너	`data-ui-area="plan_list"`	정렬·보기전환·요금제 카드
이벤트 상세 본문 컨테이너	`data-ui-area="event_page"`	이벤트 안의 신청·공유·요금제 보기
메인 홈 섹션 컨테이너	`data-ui-area="home_section"`	배너 아래 추천 요금제·리뷰·이벤트
`footer` 최상위	`data-ui-area="footer"`	푸터 링크

<!-- 전 -->  <header class="rd-gnb">
<!-- 후 -->  <header class="rd-gnb" data-ui-area="gnb">

메가 패널(#rdMega)이 header.rd-gnb 밖에 있으면 #rdMega에도 한 줄 더 넣어 주세요.

A-2. 대·중·소 메뉴는 손대지 않으셔도 됩니다

현재 구조는 중메뉴가 li 밖에 있고 대메뉴는 data-idx로만 연결돼 있습니다. GTM 쪽에서 이 구조에 맞춰 읽도록 처리했습니다.

ul.rd-nav-list > li.rd-item > a.rd-l1[data-idx="0"] ← 대메뉴 "요금제" #rdMega > .rd-page[data-idx="0"] > .rd-cols └ .rd-col ├ a.rd-l2 ← 중메뉴 "요금제 찾기" └ ul.rd-l3 > li > a ← 소메뉴 "이달의 특가"

이 구조가 바뀌면 수집이 깨집니다. 메가메뉴를 다시 손보실 일이 생기면 rd-l1·rd-l2·rd-l3 클래스와 data-idx를 유지하시거나, 바꾸실 때 마케팅팀에 알려 주세요.

A-3. 아이콘 버튼

개통하기·배송조회·내 계정·전체메뉴는 aria-label이 이미 있어 손댈 것 없습니다. 고객센터 카드도 img alt로 읽힙니다. 새로 만드시는 아이콘 버튼에만 aria-label 또는 data-ui-label을 넣어 주세요.

BIoT 사이트iot.eyagi.co.kr · GTM-MNHMCDRB

B-1. 상담 신청 성공 신호 넣기 필수

폼이 정상 접수된 순간 아래를 실행해 주세요.

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'contact_submit',
    contact_product: '무선인터넷',      // 선택한 '상담 제품' (미선택이면 '미선택')
    contact_time:    '14:00 ~ 15:00',   // 선택한 '연락 가능 시간'
    contact_page:    '/products/wireless-internet.php'  // 폼이 있던 페이지
  });
</script>

넣을 곳 — /contact/send.php가 접수 성공 결과를 그릴 때, 또는 유효성 검사를 통과해 실제 전송되는 시점.

개인정보는 넣지 마세요 — 회사명·담당자명·연락처·이메일·문의 내용 금지. 위 세 값만 보내주시면 되고, 부담되면 event: 'contact_submit' 한 줄만이라도 됩니다.

B-2. 속성 붙이기 (11곳)

붙일 요소	추가할 속성
`nav.main` (PC 상단 메뉴 · 기업전화 드롭다운 포함)	`data-ui-area="gnb"`
`.nav-right` ("전문가 상담 신청" `a.cta`)	`data-ui-area="header_cta"`
햄버거 패널 최상위 (`.mnav-link`·`.macc-top` 감싸는 요소)	`data-ui-area="mobile_menu"`
`section.hero`	`data-ui-area="hero"`
메인 `.rail-card`들을 감싸는 컨테이너	`data-ui-area="home_card"`
제품 페이지 앵커 탭 9개(`#overview`~`#contact-form`) 컨테이너	`data-ui-area="product_tab"`
제품 페이지 `section.blk`들을 감싸는 본문 컨테이너	`data-ui-area="product_body"`
`form.cform`	`data-ui-area="contact_form"`
플로팅 아이콘 묶음 (카카오·공유·전화·상담·맨위로)	`data-ui-area="float"`
`/support/board.php` 탭·검색·목록 컨테이너	`data-ui-area="board"`
`footer` 최상위	`data-ui-area="footer"`

B-3. 아이콘 버튼에 이름 붙이기

<a href="tel:0216701452" class="tel" data-ui-label="전화 걸기">
<button class="up" data-ui-label="맨 위로">
<button class="modal-x" data-ui-label="닫기">

카카오 채널(.icobtn)과 공유(.icobtn-share)는 aria-label이 이미 있어 그대로 두시면 됩니다.

B-4. 회신 부탁드릴 것

/contact/send.php가 접수 성공 후 완료 화면을 그리는지, 알림창 후 되돌아가는지 한 줄만 알려 주세요. B-1 스크립트를 넣을 위치가 달라집니다.

C공통확인 · 이후 절차

C-1. 통과 기준

홈페이지: 요금제 > 요금제 찾기 > 이달의 특가 클릭 시 경로가 세 단계로 기록됨
홈페이지: 필터 칩 임의 3개에서 이름이 화면 문구와 정확히 일치 (껐다 켜도 각각 1회)
홈페이지: 고객센터 카드 12개에서 이름이 빈 값이 아님
IoT: 폼 1회 제출에 contact_submit이 정확히 1회 (새로고침해도 재발생 안 함)
IoT: contact_submit에 개인정보가 들어 있지 않음
공통: 지정 영역 밖(본문 일반 링크) 클릭에서는 이벤트가 발생하지 않음
공통: 콘솔 오류 없음, 메뉴 열림·폼 전송·페이지 이동 등 기존 동작 변화 없음

C-2. 끝나면 마케팅팀이 처리 참고

GTM 변수·트리거·태그 구성 후 게시 (홈페이지 GTM-NWSJT4N / IoT GTM-MNHMCDRB)
GA4 맞춤 측정기준 등록, IoT는 향상된 측정 '양식 상호작용'도 켜기
홈페이지 기존 select_promotion·click_activation_cta 태그는 그대로 유지

C-3. 부담되면 이 순서로

① IoT B-1(제출 신호) → ② 홈페이지 #quickChipsContainer → ③ 홈페이지 header.rd-gnb → ④ 홈페이지 ul.cs_block 순으로 한 줄씩만 반영해 주셔도 됩니다. 소급 수집이 안 되므로 반영이 빠를수록 볼 수 있는 기간이 길어집니다.