가입 양식에 대한 Google 애널리틱스 이벤트 추적을 설정하는 방법

학습 내용

클라비요 가입 양식에 Google 애널리틱스 이벤트 추적을 설정하여 양식에서 중요한 사용자 행동에 대한 인사이트를 확보하는 방법을 알아보세요. Google 애널리틱스에서 클라비요 이벤트(예: form_open, form_close, form_submit)를 전환으로 표시하여 양식 활동을 측정할 수 있습니다. 다음 2단계 프로세스에 따라 설정하세요:

1. 웹사이트에 코드 스니펫을 추가하여 클라비요 가입 양식 데이터를 Google 애널리틱스로 전송하세요. 
2. Google 애널리틱스에서 이벤트를 전환으로 표시하세요.

시작하기 전 안내 사항

Google 애널리틱스에서 가입 양식에 대한 이벤트 추적을 구성하려면 사이트에 코드 스니펫을 붙여넣어야 합니다. 코드 붙여넣기에 익숙하지 않고 도움을 받을 개발자가 없는 경우, 클라비요는 파트너 디렉토리에 방대한 파트너 네트워크를 보유하고 있습니다.  

클라비요 양식을 사용하여 제출된 가입을 추적하세요.

klaviyoForms 이벤트에 이벤트 리스너를 추가한 다음 각 이벤트 유형에 대해 서로 다른 GA 추적 호출을 실행하여 Google 애널리틱스에서 클라비요 양식 활동을 추적할 수 있습니다. 이 코드는 사이트의 기본 테마 파일에 붙여넣어야 합니다. 

• Shopify를 사용하는 경우, 닫는 </body> 태그 위의 새 줄에 theme.liquid 파일에 스니펫을 붙여넣습니다. 사용자 지정 제품 페이지를 사용하는 경우 이 코드 조각을 다른 테마 파일이나 개별 사용자 지정 제품 페이지에 추가해야 할 수 있습니다.
• Shopify 2.0을 사용하는 경우 사용자 지정 액체 블록에 코드를 추가합니다.
• BigCommerce를 사용하는 경우 BigCommerce 관리자 패널에서 Storefront > 푸터 스크립트로 이동하여 새 줄의 푸터 코드 상자에 스니펫을 붙여넣습니다.

다음은 Google 애널리틱스에서 모든 klaviyoForms 이벤트 유형을 추적하기 위한 일반 코드입니다. 이 코드는 gtag.js를 사용하여 Google 애널리틱스를 로드하는 경우에도 사용해야 합니다:

<script>
  window.addEventListener("klaviyoForms", function(e) { 
    if (e.detail.type == 'open' || e.detail.type == 'embedOpen') {
      gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'submit') {
      gtag('event', 'form_submit', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'stepSubmit') {
      gtag('event', 'form_step_submit', {'form': 'Klaviyo form', 'step_name': e.detail.metaData.$step_name});
    }
    if (e.detail.type == 'redirectedToUrl') {
      gtag('event', 'form_url_redirect', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'close') {
      gtag('event', 'form_close', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
  });
</script>

다단계 양식에 대한 양식 제출을 추적하는 경우 양식이 작성될 때마다 하나의 제출 이벤트만 실행된다는 점에 유의하세요. 제출 이벤트는 다음과 같은 상황에서 발생합니다: 

• 이메일 또는 SMS 구독 작업이 있는 양식의 경우 이메일이나 전화를 제출하면 제출 이벤트가 트리거됩니다.
• 여러 단계에 걸쳐 이메일 및 SMS 필드가 모두 포함된 양식의 경우, 양식에서 가장 먼저 표시되는 항목을 제출하면 제출 이벤트가 트리거됩니다.
• 이메일 또는 SMS 구독 작업이 없는 양식(예: 텍스트 필드만 포함된 양식)의 경우 작업이 양식 제출로 설정된 버튼을 클릭하면 제출 이벤트가 트리거됩니다.

각 단계가 제출되면 stepSubmit 이벤트가 발생합니다. 

추적 코드 테스트

사이트에 추적 코드를 설치한 후에는 이를 테스트하여 데이터가 추적되는지 확인할 수 있습니다. 코드를 테스트합니다: 

1. 웹사이트로 이동하여 양식과 상호 작용합니다(예: 제출 또는 닫기).
2. Google 애널리틱스를 열고 보고서 > 실시간을엽니다.
3. 이벤트 이름별 이벤트수 아래에 양식에서 추적한 데이터의 분석 결과가 표시됩니다. 각 이벤트의 메트릭은 사용자가 수행한 작업을 기반으로 정확한 카운트를 반영해야 합니다(예: 양식을 닫은 경우 form_close에 대한이벤트 카운트에반영됨 ) .

이벤트가 표시되지 않으면 Google 애널리틱스가 올바르게 설정되어 있는지, 사용한 코드 스니펫이 올바른지 확인하세요. 또한 이벤트는 30분 동안만 실시간으로 표시된다는 점에 유의하세요. 자세한 내용은 [GA4] 실시간 보고서를 참조하세요.

전환으로 표시할 이벤트 구성

Google 애널리틱스에서 신규 가입 이벤트에 대한 추적을 설정한 후에는 해당 이벤트를 전환으로 표시하도록 구성하여 사용자가 양식과 상호 작용하는 방식을 모니터링할 수 있습니다.

Google 애널리틱스 (관리자 > 이벤트) 의 기존 이벤트 표에서 추적하려는 이벤트에 대해 전환으로 표시로 전환 을 전환합니다. 이벤트가 기존 목록에 없는 경우 새 이벤트를 생성하고 전환으로 표시해야 합니다. 특정 조건(예: 특정 양식 ID)이 충족될 때만 이벤트가 전환으로 표시되도록 하려면 이벤트의 매개 변수 값을 기반으로 전환을 구성해야 합니다.

이벤트를 전환으로 표시하면 Google 애널리틱스에서 이벤트_이름(예: form_open)을 볼 때마다 전환을 등록합니다. 전환 보고서에서 클라비요 양식 데이터의 전환을 추적하세요.

추가 리소스

• Google 태그 관리자를 사용하여 클라비요 웹 추적을 추가하는 방법
• 클라비요의 UTM 추적 이해 
• 자바스크립트를 사용하여 클라비요 양식 활동 추적하기
• Course: 전략적인 가입 양식으로 신규 구독자 확보하기