퀴즈 퍼널 이벤트를 추적하고 Google Tag Manager로 데이터를 보내는 방법

소개

퀴즈 퍼널은 디지털 마케팅에서 가장 강력한 리드 확보 도구 중 하나입니다. 방문자의 참여를 유도하고, 가치 있는 퍼스트파티 데이터를 수집하며, 오디언스의 니즈를 이해하도록 도와주는 동시에 리드를 선별하고 전환율을 극대화합니다.

하지만 여기에 문제가 있습니다. 제대로 된 추적이 없으면 눈을 가리고 비행하는 셈입니다.

리드를 모아 LeadsPedia나 LeadProsper 같은 리드 배포 플랫폼으로 보내고 있을 수 있습니다. 하지만 어떤 퀴즈 질문이 가장 반응이 좋은지 정말 알고 계신가요? 사용자가 어디에서 이탈하는지는요? 바이어가 실제로 받아 줄 의도 높은 리드에는 어떤 답변 조합이 해당되는지는요? 그리고 무엇보다, 이 데이터의 보물창고를 활용해 Facebook과 Google 광고 캠페인용으로 정교하게 타기팅한 오디언스를 만들고 계신가요?

바로 여기서 Google Tag Manager(GTM)와 DataLayer가 등장합니다.

LanderLab 사용자들은 다양한 업종에서 전환율 높은 랜딩 페이지와 퀴즈 퍼널을 수천 개 만들어 왔습니다. 그러면서 계속 듣는 질문이 있습니다. “퀴즈를 어떻게 추적하고, 그 데이터를 더 나은 광고와 더 높은 품질의 리드로 연결할 수 있나요?”

이 가이드에서는 GTM과 DataLayer로 퀴즈 퍼널 추적을 구현하는 방법을 정확히 알려 드립니다.

다룰 내용:

• DataLayer가 무엇이고 퀴즈 추적에 왜 필수인지
• 모든 퀴즈 퍼널에서 추적해야 할 핵심 이벤트
• 코드 예시와 함께하는 단계별 구현
• 퀴즈 데이터를 수집하고 배포하도록 GTM을 설정하는 방법
• 이 데이터를 활용해 리드 품질과 광고 타기팅을 개선하는 실제 시나리오

DataLayer와 GTM: 무엇이 다를까요?

본격적으로 들어가기 전에 이 두 가지 구성 요소를 먼저 짚어 보겠습니다.

DataLayer = 전달자

dataLayer는 페이지에서 일어나는 사용자 행동에 대한 데이터를 저장하는 JavaScript 배열입니다.

dataLayer.push({
  'event': 'quiz_step_view',
  'step_name': 'Personal Information'
});

GTM = 배포자

Google Tag Manager는 DataLayer를 감지해 그 데이터를 Facebook, Google Ads, Analytics 등의 플랫폼으로 보냅니다.

이렇게 생각해 보세요.

DataLayer speaks -> GTM listens -> GTM tells Facebook, Google, etc.

둘 다 함께 작동해야 합니다. GTM 없는 DataLayer는 쓸모가 없고, 데이터는 그냥 거기에 머물러 있을 뿐입니다. DataLayer 없는 GTM은 감지할 대상이 없습니다.

추적해야 할 두 가지 이벤트

퀴즈 퍼널에서는 다음 두 가지 이벤트에 집중합니다.

1. 퀴즈 단계 조회

사용자가 한 단계를 볼 때 발생합니다.

추적하는 이유:

• 이탈 지점 파악
• 리타기팅 오디언스 구축(예: “3단계 이상 봤지만 완료하지 않음”)
• 참여 깊이 측정
• 진행도에 따라 리드 품질 점수화

2. 퀴즈 제출

사용자가 퀴즈를 제출할 때 발생합니다.

추적하는 이유:

• 실제 전환 추적
• 세분화를 위해 모든 퀴즈 제출 캡처
• 리드 바이어에게 풍부한 데이터 전송(더 높은 승인율)

1단계: LanderLab에 Google Tag Manager 설치

LanderLab은 직접 내장된 지원 덕분에 GTM 연동을 놀라울 만큼 간단하게 만들어 줍니다.

GTM 계정 만들기

1. tagmanager.google.com으로 이동합니다
2. 컨테이너를 만듭니다(기존 컨테이너를 써도 됩니다)
3. 컨테이너 ID(예: GTM-XXXXXX)를 확인합니다

LanderLab 퀴즈에 GTM 추가

코드 스니펫을 직접 추가하는 대신 LanderLab에는 GTM 연동이 내장되어 있습니다.

1. LanderLab에서 Landing Page Settings로 이동합니다
2. Pixels를 클릭합니다
3. Google Tag Manager 섹션을 찾습니다
4. GTM 컨테이너 ID(예: GTM-XXXXXX)를 입력합니다
5. 설정을 저장합니다

이게 전부입니다! GTM 설치 코드는 LanderLab이 모두 자동으로 처리합니다. 코드를 직접 넣을 필요가 없습니다.

2단계: 퀴즈 이벤트 추적 구현

LanderLab은 특정 JavaScript 이벤트를 발생시키며, 이를 감지해 DataLayer로 푸시할 수 있습니다.

참고: LanderLab Quiz Events API

퀴즈 단계 조회 추적

이 코드를 퀴즈 페이지에 추가하세요(Code Editor, Settings -> Custom Code 또는 GTM 사용):

window.addEventListener('ll-quiz-step-view', (event) => {
  const { quizId, stepId, stepName } = event.detail;
    
    if (window.dataLayer) {
        window.dataLayer.push({
            'event': 'll_quiz_step_view',
            'quiz_id': quizId,
            'step_id': stepId,
            'step_name': stepName
        });
    }
});

이 코드가 하는 일:

• LanderLab의 ll-quiz-step-view 이벤트를 감지합니다
• 퀴즈와 단계 정보를 추출합니다
• 이벤트 이름 ll_quiz_step_view로 DataLayer에 푸시합니다

퀴즈 제출 추적

window.addEventListener('ll-quiz-submit', (event) => {
    const { quizId, stepId, stepName, fieldsSimple } = event.detail;
    
    if (window.dataLayer) {
        window.dataLayer.push({
            'event': 'll_quiz_submit',
            'quiz_id': quizId,
            'step_id': stepId,
            'step_name': stepName,
            'submitted_data': fieldsSimple,
            'timestamp': new Date().toISOString()
        });
    }
});

이 코드가 하는 일:

• LanderLab의 ll-quiz-submit 이벤트를 감지합니다
• 제출된 모든 데이터와 퀴즈 정보를 캡처합니다
• 이벤트 이름 ll_quiz_submit으로 DataLayer에 푸시합니다
• 전체 양식 데이터를 fieldsSimple에 포함합니다(예: { Name: ‘John’, Email: ‘john@example.com’, Zip: ‘12345’ })
• 제출 시점을 추적하기 위한 타임스탬프를 추가합니다

3단계: Google Tag Manager 구성

이제 데이터가 DataLayer로 흘러 들어오니, 이를 캡처해 추적 플랫폼으로 보내도록 GTM을 구성해야 합니다.

DataLayer 변수 만들기

GTM의 변수는 DataLayer에서 특정 데이터를 꺼내 태그에서 쓸 수 있게 해 줍니다.

GTM 대시보드에서:

1. 왼쪽 사이드바에서 Variables로 이동합니다
2. 아래로 스크롤해 User-Defined Variables로 이동합니다
3. New를 클릭합니다

다음 5개 변수를 만드세요:

각 변수마다 New 클릭 -> Data Layer Variable 선택 -> 위 표의 이름 입력 -> Save 순서로 진행합니다.

완료하면 변수 5개가 만들어져 있어야 합니다.

트리거 만들기

트리거는 GTM에 태그를 언제 발생시킬지 알려 줍니다. 단계 조회용과 퀴즈 제출용, 두 개의 트리거가 필요합니다.

트리거 1: Quiz Step View

트리거 2: Quiz Submit

Facebook 픽셀용 태그 만들기

이제 퀴즈 데이터를 Facebook으로 보내는 태그를 만들겠습니다. 페이지에 Facebook 픽셀이 이미 설치되어 있는지 확인하세요(LanderLab의 Pixels 설정 또는 GTM 사용).

태그 1: Facebook Pixel – Quiz Step View

1. 왼쪽 사이드바에서 Tags로 이동합니다
2. New를 클릭합니다
3. 태그 구성 영역을 클릭합니다
4. Custom HTML을 선택합니다
5. HTML 코드:

<script>
  fbq('track', 'ViewContent', {
    content_name: {{DL - Quiz ID}},
    content_category: 'quiz_step',
    content_ids: [{{DL - Step ID}}],
    step_name: {{DL - Step Name}}
  });
</script>

1. Triggering을 클릭합니다
2. 트리거를 선택합니다: LL Quiz Step View
3. 태그 이름을 지정합니다: Facebook Pixel – Quiz Step View
4. Save를 클릭합니다

하는 일: 사용자가 퀴즈 단계를 볼 때마다 Facebook 픽셀이 퀴즈와 단계 정보를 담은 ViewContent 이벤트를 발생시킵니다. 이를 통해 사용자가 얼마나 진행했는지를 기준으로 오디언스를 만들 수 있습니다.

태그 2: Facebook Pixel – Quiz Submit(Lead 이벤트)

1. New를 클릭해 또 다른 태그를 만듭니다
2. 태그 구성 영역을 클릭합니다
3. Custom HTML을 선택합니다
4. HTML 코드:

<script>
  fbq('track', 'Lead', {
    content_name: {{DL - Quiz ID}},
    content_category: 'quiz_completion',
    value: 10.00,
    currency: 'USD'
  });
</script>

1. Triggering을 클릭합니다
2. 트리거를 선택합니다: LL Quiz Submit
3. 태그 이름을 지정합니다: Facebook Pixel – Quiz Submit
4. Save를 클릭합니다

하는 일: 사용자가 퀴즈를 제출하면 Facebook 픽셀이 Lead 이벤트를 발생시킵니다. 이것이 최적화를 위한 핵심 전환 이벤트입니다. 값(value) 필드는 평균 리드 가치에 맞게 조정하세요.

개별 양식 필드에 접근하기(선택 사항)

submitted_data에는 { Name: ‘John’, Email: ‘john@example.com’, Zip: ‘12345’ }와 같은 객체 형태로 모든 양식 필드가 들어 있습니다. 특정 필드(지역 타기팅용 우편번호나 맞춤 파라미터용 이메일 등)에 접근하려면 GTM에서 Custom JavaScript 변수를 만들어야 합니다.

예시: 제출된 데이터에서 우편번호 추출

1. GTM에서 Variables -> User-Defined Variables -> New 순서로 이동합니다
2. 변수 구성 영역을 클릭합니다
3. Custom JavaScript를 선택합니다
4. Custom JavaScript 코드:

function() {
  const data = {{DL - Submitted Data}};
  return data && data.Zip;
}

1. 변수 이름을 지정합니다: DL – Submitted Zip
2. Save를 클릭합니다

Facebook 태그에서 사용하기:

<script>
  fbq('track', 'Lead', {
    content_name: {{DL - Quiz ID}},
    content_category: 'quiz_completion',
    zip_code: {{DL - Submitted Zip}},
    value: 10.00,
    currency: 'USD'
  });
</script>

퀴즈의 어떤 필드에 대해서도 비슷한 변수를 만들 수 있습니다

Google Analytics 4용 태그 만들기

이제 GA4 추적을 설정해 보겠습니다. GA4 Measurement ID(G-XXXXXXXXXX 형태)가 필요합니다.

태그 3: GA4 구성 태그(기본 태그)

아직 없다면 먼저 기본 구성 태그를 만듭니다:

1. Tags -> New 순서로 이동합니다
2. 태그 구성 영역을 클릭합니다
3. Google Analytics: GA4 Configuration을 선택합니다
4. Measurement ID: GA4 Measurement ID(예: G-XXXXXXXXXX)를 입력합니다
5. Triggering을 클릭합니다
6. All Pages를 선택합니다
7. 태그 이름을 지정합니다: GA4 Configuration
8. Save를 클릭합니다

참고: GTM에 이미 GA4 Configuration 태그가 있다면 이 단계는 건너뛰세요.

태그 4: GA4 – Quiz Step View

태그 5: GA4 – Quiz Submit(리드 제너레이션)

generate_lead를 쓰는 이유: GA4에서 리드 제너레이션용으로 권장되는 이벤트입니다. 전환 리포트에 자동으로 표시되며 Google Ads에서 최적화에 활용할 수 있습니다.

4단계: 설정 테스트

게시하기 전에 모든 것이 올바르게 작동하는지 테스트해야 합니다.

GTM 미리보기 모드에서 테스트

1. GTM에서 오른쪽 위의 Preview 버튼을 클릭합니다
2. “Your website’s URL” 필드에 LanderLab 퀴즈 URL을 입력합니다
3. Connect를 클릭합니다
4. 퀴즈 페이지가 새 탭에서 열리고 하단에 GTM 디버그 패널이 표시됩니다

퀴즈 단계 조회 이벤트 테스트

퀴즈 제출 이벤트 테스트

Facebook Events Manager에서 확인

Google Analytics 4에서 확인

모두 정상 작동한다면: GTM으로 돌아가 Submit을 클릭해 컨테이너 변경 사항을 게시합니다. “Quiz Tracking Setup” 같은 버전 이름과 설명을 추가한 뒤 Publish를 클릭합니다.

실제 활용 사례

활용 사례 1: 참여한 사용자 리타기팅

문제: 사용자가 퀴즈를 시작하지만 끝까지 완료하지 않습니다.

해결: 최근 7일 동안 퀴즈를 2단계 이상 본 사용자로 Facebook 맞춤 타겟을 만들고, 퀴즈 제출자는 제외한 뒤 완료를 유도하는 광고를 보여 줍니다.

결과: 이탈자의 20-30%를 되찾고, CPA는 콜드 트래픽보다 50% 낮습니다.

활용 사례 2: 고품질 유사 타겟 만들기

문제: 콜드 트래픽의 CPL이 너무 높습니다.

해결: 퀴즈를 완료하고 전환한 사용자로 맞춤 타겟을 만들고, 이를 시드로 유사 타겟을 만듭니다.

결과: 관심사 기반 타기팅보다 2-3배 높은 전환율.

활용 사례 3: 답변 패턴별 세분화

문제: 모든 리드가 같지 않으며, 바이어는 적격 리드에 더 많이 지불합니다.

해결: 답변 조합을 추적해 의도가 높은 리드와 낮은 리드를 구분하고, 세그먼트마다 별도 캠페인을 만듭니다.

결과: 승인된 리드 비율이 40% 이상 올라가고 더 높은 지급액을 받을 수 있습니다.

활용 사례 4: 이미 전환한 사용자 제외

문제: 이미 완료한 사람에게 퀴즈 광고를 보여 주느라 예산을 낭비합니다.

해결: 퀴즈 제출자 오디언스를 만들어 획득 캠페인에서 제외합니다.

결과: 낭비되는 지출을 15-25% 줄입니다.

결론

퀴즈 퍼널 추적을 제대로 하면 리드 확보가 감에 의존하던 방식에서 데이터 기반 시스템으로 바뀝니다.

LanderLab에서 GTM과 DataLayer 추적을 구현하면 다음과 같은 일이 가능합니다.

• 사용자가 어디에서, 왜 이탈하는지 정확히 파악합니다
• 실제 퀴즈 행동을 바탕으로 정교하게 타기팅한 오디언스를 구축합니다
• 리드 품질과 승인율을 개선합니다
• 더 나은 데이터로 캠페인을 수익성 있게 확장합니다
• 정확한 기여도 분석으로 ROI를 입증합니다

설정에는 1-2시간이 걸리지만 효과는 막대합니다. 더 낮은 CPA, 더 높은 품질의 리드, 그리고 퀴즈 퍼널의 모든 단계를 최적화할 수 있는 능력을 얻게 됩니다.

도움이 필요하신가요? LanderLab 퀴즈 이벤트 문서를 확인하거나 지원 팀에 문의하세요.