운영: 측정 구조(이벤트 흐름 도식)

전(轉) 후반 또는 결(結). 지표 체계 다음 장. 방문자 행동과 그때 기록되는 이벤트, 그 값이 도착하는 곳을 3층으로 보여줌. 행동 4단계 고정, 도착지 3곳. 바꿔야 할 값: 행동 4개, 이벤트 이름 4개와 기록 조건, 전환 기준 이벤트 1개(class hot), 도착지 3곳과 용도, 착수 전 점검 3줄. 값 바꾸는 법: 1층 .act 4칸(행동), 2층 .ev 4칸(이벤트 이름 code + 기록 조건), 3층 .dst 3칸(도착지와 용도). 전환으로 잡는 이벤트 한 칸에만 class="ev hot". 이벤트 이름은 실제 설정값 그대로 적을 것.

Google Tag Manager·Google Analytics 4 의 이벤트 설계 문서(추천 이벤트 generate_lead 등), Segment 의 tracking plan 양식, Meta 전환 API 구조도를 참고. 도식은 직접 제작.

<section class="slide lo-op-track">
  <div class="run"><b>온배움 코딩학원 2027 신학기 수강생 모집 제안</b><span>PART 04 · 운영 계획</span></div>
  <div class="hd"><p class="lb">측정 구조</p><h1>전환 기준은 신청 완료 하나, 모든 매체가 같은 값으로 집계</h1><p class="lede">방문자 행동 4단계마다 이벤트 1개. 태그 관리 도구 한 곳에서 배포해 분석 도구와 매체로 동시 전송</p></div>
  <div class="body">
<div class="fl">
      <p class="lv">방문자 행동</p>
      <div class="act">광고 클릭</div><div class="act">랜딩 조회</div><div class="act">신청 화면 진입</div><div class="act">신청 완료</div>
      <p class="lv">기록 이벤트</p>
      <div class="ev"><code>ad_click</code><p>매체가 자동 기록, 광고 식별값 포함</p></div>
      <div class="ev"><code>page_view</code><p>첫 화면 표시 시점, 유입 매체 저장</p></div>
      <div class="ev"><code>begin_form</code><p>첫 입력 칸 선택 시점</p></div>
      <div class="ev hot"><code>generate_lead</code><p>완료 화면 표시 시점. 전환 기준</p></div>
      <p class="lv">배포</p>
      <div class="tm">태그 관리 도구 한 곳에서 설정하고 배포. 변경 이력 기록, 광고주 계정 소유</div>
      <p class="lv">도착지</p>
      <div class="dst"><b>분석 도구</b>단계별 이탈과 유입 매체 비교</div>
      <div class="dst"><b>매체 광고 계정</b>전환 값 수신, 자동 입찰 학습</div>
      <div class="dst w2"><b>통합 리포트</b>매체가 달라도 같은 전환 기준으로 주간·월간 집계</div>
      <p class="lv">착수 전 점검</p>
      <ul class="ck"><li>신청 완료 화면 주소 고정 여부</li><li>시험 신청 3건으로 기록값 일치 확인</li><li>매체별 전환 집계 기간을 클릭 후 7일로 통일</li></ul>
    </div>
  </div>
  <div class="pg">31</div>
</section>

.slide.lo-op-track .hd .lb{color:var(--mu)}
.slide.lo-op-track :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-op-track .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-op-track .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-op-track .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-op-track .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-op-track .fl{display:grid;grid-template-columns:104px repeat(4,1fr);column-gap:16px;row-gap:20px;align-items:stretch}
.slide.lo-op-track .lv{font-size:var(--f-cap);font-weight:600;color:var(--mu);align-self:center}
.slide.lo-op-track .act{position:relative;background:var(--ink);color:var(--card);font-size:var(--f-md);font-weight:700;border-radius:var(--r);padding:14px 20px}
.slide.lo-op-track .act:not(:nth-child(5))::after{content:"";position:absolute;right:-13px;top:50%;width:8px;height:8px;border-top:2px solid var(--g3);border-right:2px solid var(--g3);transform:translateY(-50%) rotate(45deg)}
.slide.lo-op-track .act::before,.slide.lo-op-track .ev::before{content:"";position:absolute;left:50%;bottom:-20px;height:20px;border-left:1px solid var(--line2)}
.slide.lo-op-track .ev{position:relative;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 20px}
.slide.lo-op-track .ev code{font-family:Consolas,"Courier New",monospace;font-size:var(--f-body);font-weight:700;color:var(--ink)}
.slide.lo-op-track .ev p{font-size:var(--f-sm);color:var(--ink2);margin-top:4px}
.slide.lo-op-track .ev.hot{background:var(--acw)}
.slide.lo-op-track .ev.hot code{color:var(--ac)}
.slide.lo-op-track .tm{position:relative;grid-column:2 / 6;background:var(--soft);border:1px dashed var(--line2);border-radius:var(--r);padding:10px 20px;font-size:var(--f-sm);color:var(--ink);text-align:center}
.slide.lo-op-track .dst{border-top:2px solid var(--ink);padding-top:10px;font-size:var(--f-sm);color:var(--ink2)}
.slide.lo-op-track .dst b{display:block;font-size:var(--f-md)}
.slide.lo-op-track .dst.w2{grid-column:4 / 6}
.slide.lo-op-track .ck{grid-column:2 / 6;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--line2);padding-top:12px}
.slide.lo-op-track .ck li{font-size:var(--f-sm);color:var(--ink2);padding-left:22px;position:relative}
.slide.lo-op-track .ck li::before{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border:1px solid var(--g3);border-radius:3px}