가입 양식에 Google Analytics 이벤트 트래킹을 설정하는 방법

학습 내용

Klaviyo 가입 양식에 Google Analytics 이벤트 트래킹을 설정해 양식에서 중요한 사용자 작업에 대한 인사이트를 얻는 방법을 알아보세요. Google Analytics에서 Klaviyo 이벤트(예: form_open, form_close, form_submit)를 전환으로 표시하여 폼 활동을 측정할 수 있어요. 다음 2단계 프로세스를 따라 설정해 주세요:

1. Google Analytics에 Klaviyo 가입 양식 데이터를 전송할 수 있도록 웹사이트에 코드 조각을 추가하세요.
2. Google Analytics에서 이벤트를 전환으로 표시해 주세요.

시작하기 전에 알아야 할 것

Google 애널리틱스에서 가입 양식의 이벤트 트래킹을 구성하려면 사이트에 코드 스니펫을 붙여넣어야 해요. 코드를 붙여넣는 것이 익숙하지 않고 도움을 줄 개발자가 없다면, Klaviyo의 파트너 디렉터리에 있는 방대한 파트너 네트워크를 활용할 수 있어요. 

Klaviyo 양식을 사용해 제출된 가입을 추적

klaviyoForms 이벤트에 이벤트 리스너를 추가한 다음, 이벤트 유형별로 서로 다른 GA 트래킹 호출을 실행하면 Google Analytics에서 Klaviyo 폼 활동을 트래킹할 수 있어요. 이 코드는 사이트의 기본 테마 파일에 붙여 넣어야 해요.

• Shopify를 사용하는 경우 닫는 </body> 태그 바로 위의 새 줄에 theme.liquid 파일에 스니펫을 붙여넣으세요. 맞춤 제품 페이지를 사용하는 경우 이 스니펫을 다른 테마 파일이나 개별 맞춤 제품 페이지에 추가해야 할 수도 있습니다.
• Shopify 2.0을 사용 중이라면 코드를 Custom Liquid 블록에 추가해 주세요.
• BigCommerce를 사용 중이라면 BigCommerce 관리자 패널에서 Storefront > Footer Scripts로 이동한 다음, 스니펫을 Footer 코드 상자에 새 줄로 붙여넣어 주세요.

아래는 Google Analytics에서 모든 klaviyoForms 이벤트 유형을 트래킹하기 위한 일반 코드예요. Google Analytics를 로드하기 위해 gtag.js를 사용하는 경우에도 이 코드를 사용해야 해요:

<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>

다른 양식 버전이나 같은 이메일의 다른 버전을 추적하려면 코드 조각을 다음과 같이 수정해 주세요.

gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId, 'form_version_id': e.detail.formVersionId })

대신 관련 form_id과 함께

gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId })

여러 단계로 구성된 양식의 제출을 트래킹하는 경우, 양식이 작성될 때마다 submit 이벤트는 1회만 실행된다는 점에 유의해 주세요. 제출 이벤트는 다음과 같은 경우에 실행돼요:

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

stepSubmit 이벤트는 각 단계가 제출될 때 실행돼요.

트래킹 코드 테스트

사이트에 트래킹 코드를 설치한 후에는 데이터가 트래킹되고 있는지 확인하기 위해 테스트할 수 있어요. 코드를 테스트하려면:

1. 웹사이트로 이동해 양식을 사용해 보세요(예: 제출하거나 닫기).
2. Google 애널리틱스를 열고 보고서 > 실시간.을 여세요.
3. 이벤트 이름별 이벤트 수에서 양식이 추적한 데이터의 세부 내역을 확인할 수 있어요. 각 이벤트의 지표에는 수행한 작업을 기준으로 한 정확한 수가 반영되어야 해요(예: 양식을 닫았다면 form_close의 이벤트 수에 반영된 것을 확인할 수 있어요).

이벤트가 보이지 않으면 Google Analytics가 올바르게 설정되어 있는지, 사용한 코드 조각이 올바른지 확인해 주세요. 또한 이벤트는 Realtime에서 30분 동안만 표시된다는 점도 참고해 주세요. 자세한 내용은 [GA4] 실시간 보고서를 참조하세요.

이벤트가 전환으로 표시되도록 구성하세요.

Google Analytics에서 신규 가입 이벤트에 대한 트래킹을 설정한 후, 해당 이벤트를 전환으로 표시되도록 구성하여 사용자가 양식과 상호작용하는 방식을 모니터링하는 데 도움이 되도록 할 수 있어요.

Google Analytics의 기존 이벤트 표 (관리자 > 이벤트)에서 추적하려는 이벤트의 스위치를 전환으로 표시로 전환하세요. 이벤트가 기존 목록에 없으면 새 이벤트를 만들고 전환으로 표시해야 해요. 특정 조건(예: 특정 양식 ID)이 충족될 때만 이벤트가 전환으로 표시되도록 하려면 이벤트 매개변수 값에 따라 전환을 구성해야 해요.

이벤트를 전환으로 표시하면 Google Analytics에서 event_name(예: form_open)을 확인할 때마다 전환을 등록해요. 전환 보고서에서 Klaviyo 양식 데이터의 전환을 추적하세요.