추적된 이벤트는 방문자가 웹사이트에서 버튼을 클릭하거나 양식을 제출하는 것과 같이 취하는 특정 행동을 측정할 수 있게 해줍니다.

자동으로 추적되는 항목

Ahrefs 웹 애널리틱스는 다음 이벤트를 자동으로 추적합니다:

외부 링크 클릭 – 프로젝트의 범위를 벗어나는 유효한 href를 갖는 링크를 사용자가 클릭할 때 트리거됩니다. event.preventDefault()가 호출되지 않았을 경우에만.
양식 제출 – 유효한 action을 갖는 양식이 제출될 때 트리거됩니다. event.preventDefault()가 호출되지 않았을 경우에만.

이 이벤트들은 별도의 설정 없이 기본적으로 보고서에 나타납니다. 사이트에 중요한 다른 특정 행동을 측정하기 위해 자체 추적 이벤트를 추가할 수도 있습니다.

추적된 이벤트의 종류

두 가지 종류의 이벤트를 추적할 수 있습니다:

페이지 조회 이벤트 – 특정 페이지(예: 감사 페이지 또는 체크아웃 페이지)가 방문될 때 발생합니다.
맞춤 이벤트 – 버튼 클릭, 양식 제출, 모달 열기 등의 요소와 상호작용할 때 발생합니다.

페이지 조회 이벤트

페이지뷰 이벤트는 확인 페이지나 성공 페이지처럼 중요한 페이지 방문을 추적하는 데 유용합니다. 사이트에 /thank-you 또는 /checkout/success처럼 완료된 작업을 위한 전용 URL이 있다면, 이를 추적 이벤트로 설정할 수 있습니다.

페이지뷰 이벤트를 설정하려면:

프로젝트의 웹 애널리틱스 보고서를 엽니다.
추적된 이벤트 섹션으로 스크롤하여 새 이벤트를 클릭합니다.
페이지 조회를 유형으로 선택하고 추적하려는 정확한 페이지 경로를 입력합니다.
이벤트 이름을 지정하여 쉽게 인식하고 생성을 클릭합니다.

사용자 정의 이벤트

맞춤 이벤트는 버튼 클릭, 양식 제출 또는 새 페이지를 로드하지 않는 기타 작업과 같은 상호작용을 추적하는 데 유용합니다. HTML에 특수 클래스 이름을 추가해 설정할 수 있습니다.

가장 간단한 설정 방법은 HTML에 AhrefsAnalytics-event-EventName 형식의 클래스를 추가하는 것입니다.

예시:

<a class="AhrefsAnalytics-event-signup" href="#">가입하기</a>

이렇게 하면 링크를 클릭할 때 signup이라는 이벤트가 추적됩니다.

양식에도 같은 방식이 적용됩니다:

<form class="AhrefsAnalytics-event-signup" action="/submit">
  ...
</form>

이렇게 하면 양식이 제출될 때 signup이라는 맞춤 이벤트가 트리거됩니다.

보고서에서 맞춤 이벤트를 확인하려면, 해당 이벤트도 보고서에 추가해야 합니다:

프로젝트의 웹 애널리틱스 보고서를 엽니다.
추적된 이벤트 섹션으로 스크롤하여 새 이벤트를 클릭합니다.
맞춤 이벤트를 유형으로 선택하고 HTML에서 사용한 정확한 이벤트 이름을 입력합니다.
이벤트 이름을 지정하여 쉽게 인식하고 생성을 클릭합니다.

JavaScript로 맞춤 이벤트 트리거하기

더 정밀하게 추적하려면 JavaScript를 사용해 맞춤 이벤트를 전송할 수 있습니다. 이를 통해 이벤트가 트리거되는 시점을 더 세밀하게 제어할 수 있습니다

아래 스니펫은 이를 수행하는 방법을 보여줍니다:

if (window.AhrefsAnalytics != null) {
  window.AhrefsAnalytics.sendEvent('signup');
}

이벤트 속성(선택 사항)

이벤트 속성을 사용하면 추적 이벤트에 추가 세부 정보를 연결할 수 있습니다.
동일한 이벤트를 변형, 요금제 또는 기타 차원별로 세분화하고 싶을 때 유용합니다.

예시:

plan = standard, duration = monthly 같은 속성이 있는 signup 이벤트
button = header, variant = B 같은 속성이 있는 cta_click 이벤트
category = shoes, size = 42 같은 속성이 있는 purchase 이벤트

이러한 속성은 이후 이벤트 속성 보고서에서 확인할 수 있습니다.

참고: 속성 이름과 값은 문자열로 처리됩니다. 아래에서 HTML 속성(attribute)이나 클래스 이름을 사용할 때는 대시가 구분자로 사용되므로, 속성 이름에 대시(-)를 포함할 수 없습니다.

이벤트 속성을 첨부하는 방법

이벤트에 속성을 첨부하는 방법은 세 가지가 있습니다:

추적 스크립트를 통해 모든 이벤트에 속성을 추가합니다.
CSS 클래스를 통해 단일 맞춤 이벤트에 속성을 추가합니다.
JavaScript(JS API)를 통해 속성을 추가합니다.

1. 모든 이벤트에 속성 첨부(추적 스크립트)

추적 <script> 태그에 data-prop-NAME="VALUE" 속성(attribute)을 추가하면 모든 이벤트에 속성을 첨부할 수 있습니다:

<script
  src="https://analytics.ahrefs.com/analytics.js"
  data-key="YOUR_DATA_KEY"
  data-prop-plan="standard"
  data-prop-duration="monthly">
</script>

이렇게 하면 이 페이지에서 전송되는 모든 이벤트에 plan = "standard" 및 duration = "monthly"가 추가됩니다.

참고: NAME에는 대시(-)를 포함할 수 없습니다.

2. 단일 맞춤 이벤트에 속성 첨부(CSS 클래스)

이벤트를 트리거하는 요소에 특수 CSS 클래스 이름을 사용하면 특정 맞춤 이벤트에 속성을 첨부할 수 있습니다.

예시 – plan 속성을 가진 signup 이벤트를 트리거하는 버튼:

<div
  class="
    AhrefsAnalytics-event-signup
    AhrefsAnalytics-prop-plan-standard
  ">
  Sign up for Standard
</div>

여기서:

AhrefsAnalytics-event-signup은 이 요소를 클릭하면 signup 이벤트를 전송하도록 Ahrefs 웹 애널리틱스 스크립트에 지시합니다.
AhrefsAnalytics-prop-plan-standard는 이 이벤트에만 plan = "standard" 속성을 추가합니다.

참고: AhrefsAnalytics-prop-…의 속성 이름에는 대시(-)를 포함할 수 없습니다.

3. JavaScript를 통해 속성 첨부(JS API)

JavaScript로 이벤트를 트리거하는 경우, sendEvent의 두 번째 인수로 객체를 전달해 속성을 첨부할 수 있습니다:

if (window.AhrefsAnalytics != null) {
  window.AhrefsAnalytics.sendEvent(
    'signup',
    {
      props: {
        plan: 'standard',
        duration: 'monthly'
      }
    }
  );
}

로그인 사용자, A/B 테스트 변형 등 앱 상태에 따라 속성을 설정해야 할 때 가장 유연한 옵션입니다.

보고서에서 이벤트 속성 사용하기

이벤트 속성은 자동으로 표시되지 않습니다. 전송을 시작한 후에는 이를 보고서에 추가해야 합니다.

이벤트 속성 보고서

속성 값별로 세부 내역을 보고 싶을 때 사용하세요.

프로젝트의 Web Analytics 보고서를 여세요.
이벤트 속성 보고서로 이동하세요.
새 속성을 클릭하세요.
이벤트 속성을 선택하고 이름을 지정한 다음 만들기를 클릭하세요.

이렇게 하면 방문자와 이벤트를 각 속성 값별로 나누어 볼 수 있습니다. 예를 들어 가입 수를 요금제, 버튼 변형 또는 국가별로 확인할 수 있습니다.

이벤트 속성으로 필터링

이벤트 속성을 사용해 다른 보고서도 세그먼트로 나눌 수 있습니다.

필터 추가를 클릭하고 이벤트 속성을 선택하세요.
필터링할 속성과 값을 선택하세요.

이렇게 하면 예를 들어 plan is standard 또는 variant is B처럼 어떤 보고서든 범위를 좁힐 수 있습니다. 속성 필터를 여러 개 추가해 세그먼트를 더 정교하게 다듬을 수 있습니다.

Ahrefs 웹 애널리틱스에서의 추적된 이벤트