작은 업체 홈페이지에서 문의가 가장 많이 들어오는 통로는 여전히 전화입니다. 그런데 모바일에서 번호가 그냥 글자로만 적혀 있으면 방문자는 번호를 외우거나 복사해야 하고, 그 사이에 상당수가 다른 사이트로 넘어갑니다.
tel: 링크 한 줄로 누르면 바로 전화가 걸리게 만들고, 그 클릭이 몇 번 일어나는지까지 확인하는 방법을 정리했습니다.

1. tel: 링크는 숫자 위주로 작성

href 안에는 tel: 뒤에 번호를 붙입니다. 하이픈은 들어가도 대부분 동작하지만, 괄호나 공백, 한글이 섞이면 기기에 따라 번호가 잘못 넘어갈 수 있어 숫자만 쓰는 편이 안전합니다. 화면에 보이는 글자는 읽기 쉽게 하이픈을 넣어도 괜찮습니다.

<!-- 하이픈은 있어도 되지만, 숫자만 쓰면 가장 확실합니다 -->
<a href="tel:0212345678" class="call-btn">
  전화 문의 02-1234-5678
</a>

<!-- 해외 방문자까지 고려하면 국가번호 형식 -->
<a href="tel:+82212345678">전화 문의</a>

버튼은 엄지로 누르기 쉬운 크기로, 화면 하단 고정 바나 상단 헤더처럼 스크롤 중에도 보이는 위치에 두는 것이 효과적입니다. PC에서는 tel: 링크를 누르면 통화 앱 선택 창이 뜨거나 아무 반응이 없을 수 있으니, PC 화면에서는 번호를 글자로 크게 보여 주는 쪽이 낫습니다.

2. 아이폰 자동 전화번호 인식 정리

아이폰 사파리는 페이지 안의 숫자 묶음을 전화번호로 추측해 자동으로 링크를 거는 경우가 있습니다. 사업자등록번호나 가격, 주문번호까지 파란 밑줄 링크로 바뀌어 디자인이 깨지기도 합니다. 자동 인식을 끄고, 필요한 번호에만 직접 tel: 링크를 거는 것이 깔끔합니다.

<!-- 아이폰이 아무 숫자나 전화번호로 바꾸는 것 막기 -->
<meta name="format-detection" content="telephone=no">

3. 전화 클릭 수를 GA4로 측정

구글 애널리틱스 4(GA4)를 쓰고 있다면 tel: 링크 클릭을 이벤트로 보내 둘 수 있습니다. 아래 코드는 페이지 안의 모든 전화 링크에 한 번에 적용됩니다. 구글 태그 관리자(GTM)를 쓰는 사이트라면 같은 조건을 클릭 트리거로 만들어도 됩니다.

// 전화 버튼 클릭을 GA4 이벤트로 보내기
document.querySelectorAll('a[href^="tel:"]')
  .forEach(function (link) {
    link.addEventListener('click', function () {
      gtag('event', 'phone_call_click', {
        link_url: link.href
      });
    });
  });

이벤트가 쌓이기 시작하면 GA4 관리 화면에서 이 이벤트를 주요 이벤트(key event)로 표시해 두세요. 그러면 어떤 광고와 검색어로 들어온 방문자가 전화를 눌렀는지 함께 볼 수 있습니다. 다만 이것은 버튼을 누른 횟수이지 실제로 통화가 연결된 횟수는 아니라는 점은 감안해야 합니다.