같은 문의 주소로 가는 버튼, 위치별로 어떻게 구분할까

주소가 같다고 같은 위치의 버튼은 아닙니다

헤더와 본문, 글 끝의 문의 링크가 모두 /contact/로 연결될 수 있습니다. 도착 주소만 모으면 어느 위치에서 실행됐는지 구분하기 어렵습니다. 그렇다고 사이트 안 링크마다 외부 유입용 UTM을 붙이면 유입과 내부 행동이라는 서로 다른 질문이 섞입니다. 위치를 설명하는 별도의 값이 필요합니다.

예제는 세 문의 링크에 header_contact, article_contact, footer_contact를 붙입니다. 클릭은 같은 문의 안내 구간으로 이동하면서 로컬 기록표에 위치를 남깁니다. Google Analytics나 광고 계정에 요청을 보내는 예제가 아닙니다.

화면 문구와 기록용 이름을 분리합니다

문구가 “제작 문의 보기”로 바뀌어도 같은 위치의 역할이 유지된다면 위치값을 반드시 바꿀 필요는 없습니다. 반대로 헤더 링크를 상품 카드의 개별 버튼으로 옮겼다면 같은 값으로 이어갈지 측정 정의를 다시 봐야 합니다. 텍스트를 매번 기록 키로 쓰면 문장 편집이 보고서의 새로운 항목을 만들 수 있습니다.

링크에는 분류값만 두고 목적지는 그대로 둡니다

<a href="/contact/" data-cta-position="header_contact">
  문의 방법 보기
</a>

MDN의 dataset 문서는 data-* 속성과 자바스크립트 속성의 대응을 설명합니다. data-cta-position은 dataset.ctaPosition으로 읽을 수 있습니다. 값에는 위치 분류만 넣고 사람의 이메일이나 자유 입력 문의는 넣지 않습니다. 목적지 전체 URL을 기록할 때도 쿼리에 불필요한 정보가 있는지 먼저 살펴야 합니다.

위치 이름은 허용 목록으로 관리할 수 있습니다. 템플릿을 복사하면서 아무 이름이나 새로 넣기보다 header_contact 같은 정한 값을 선택하게 하면 같은 역할을 비교하기 쉽습니다. 식별값이 없거나 목록 밖이면 임의의 기본 위치로 합치지 말고 누락을 확인할 기록으로 분리합니다.

실행한 요소의 위치를 한 번 읽습니다

const allowed = new Set([
  'header_contact', 'article_contact', 'footer_contact'
]);
document.addEventListener('click', event => {
  const link = event.target.closest('a[data-cta-position]');
  if (!link) return;
  const position = link.dataset.ctaPosition;
  if (!allowed.has(position)) return;
  recordLocally({ event: 'cta_click', position });
});

실제 분석 도구로 연결할 때는 이벤트와 매개변수의 이름, 동의와 수집 조건을 그 도구에 맞춰 정해야 합니다. Google Analytics 이벤트 안내는 이벤트에 매개변수를 연결하는 구조를 설명합니다. 코드에서 값을 만들었다는 것과 원하는 보고서에서 확인했다는 것은 별개의 확인입니다.

여러 수집 경로가 같은 클릭을 보내는 문제는 이벤트 중복 장부로 따로 봅니다. 위치값을 붙였다고 중복 요청이 자동으로 사라지는 것은 아닙니다.

클릭 수를 보기 전에 이름이 같은 뜻인지 확인합니다

세 링크를 각각 한 번 실행해 기록에 위치가 하나씩 남는지 확인합니다. 링크 안의 아이콘이나 글자를 눌러도 가장 가까운 링크에서 같은 값을 읽어야 합니다. 키보드 Enter로 실행했을 때도 같은 분류가 남는지 봅니다.

헤더 클릭이 더 많다고 곧바로 문구가 더 좋다고 결론 내리지는 않습니다. 헤더를 본 기회와 글 끝까지 읽은 기회는 다를 수 있습니다. 이 작업에서 먼저 끝낼 것은 분류의 정확성입니다. 문의가 실제로 접수됐는지는 전송·수신 단계와 연결해야 합니다.

예제를 직접 열어 보기

이 글의 화면 예제와 소스 받기 ZIP. 압축을 푼 뒤 index.html을 브라우저에서 열 수 있습니다. 예제의 입력과 표시 범위는 각 화면의 안내를 기준으로 확인하세요.

참고한 원문

• MDN: dataset
• Google Analytics: 이벤트