Google 애널리틱스 4로 자동 완성 동작 추적

1. 소개

이 Codelab에서는 Google 애널리틱스 4 (GA4)를 사용하여 웹 양식에서 자동 완성 동작을 추적하는 방법을 안내합니다. 이 기능은 web.dev의 양식에서 브라우저 자동 완성 측정과 같은 도움말에서 설명한 자동 완성 측정의 개념과 동기를 기반으로 합니다.

다음 작업을 수행하는 방법을 배우게 됩니다.

필드가 자동 완성, 수동 또는 둘의 조합으로 채워지는 경우를 포함하여 자동 완성 상호작용을 감지하는 JavaScript를 구현합니다.
자동 완성 상태를 추적하는 맞춤 GA4 이벤트를 정의합니다.
자동 완성 데이터를 맞춤 매개변수로 GA4에 전송합니다.
보고를 위해 GA4에서 맞춤 측정기준을 구성합니다.
수집된 데이터를 분석하는 방법을 이해합니다.

이 접근 방식을 사용하면 사용자가 자동 완성에 얼마나 자주 의존하는지, 가장 자주 자동 완성되는 필드가 무엇인지 파악하고 양식 사용성과 관련된 잠재적 문제를 식별할 수 있습니다. 이를 통해 사용자 환경을 개선하고 전환을 늘리는 방법을 파악할 수 있습니다.

기본 요건

HTML, CSS, JavaScript에 대한 기본 지식
웹사이트에 설정된 Google 애널리틱스 4 속성
GA4에 이벤트를 전송하기 위한 gtag.js 라이브러리에 대한 지식
추적하려는 양식의 HTML에 대한 액세스 권한
Google 애널리틱스 4 보고서에 대한 기본적인 이해

학습할 내용

다양한 사용자 상호작용 시나리오를 고려하여 JavaScript를 사용하여 자동 완성 동작을 감지하는 방법
의미 있는 매개변수로 맞춤 GA4 이벤트를 만드는 방법
양식 및 필드 식별자를 비롯한 맞춤 이벤트 매개변수를 GA4로 전송하는 방법
수집된 데이터를 분석하기 위해 GA4에서 맞춤 측정기준을 구성하는 방법

필요한 항목

텍스트 편집기 또는 IDE
개발자 도구가 있는 웹브라우저
웹사이트 코드
Google 애널리틱스 4 계정

2. 자동 완성 감지 로직 구현

이 단계에서는 웹페이지에 JavaScript 코드를 추가합니다. 이 스크립트는 브라우저의 자동 완성 기능을 사용하여 입력된 경우와 수동으로 입력된 경우를 감지하기 위해 양식 필드를 모니터링합니다.

HTML 양식 구조 예

먼저 사용할 HTML 양식의 예를 살펴보겠습니다. 다음 사항을 참고하시기 바랍니다.

양식 자체에는 id (예: myForm)이 있고 데이터 양식 ID 속성 (예: data-form-id="myForm")이 있는 것이 좋습니다.
추적하려는 각 입력 필드에는 고유한 id (예: id="name", id="email")가 필요합니다.

<form id="myForm" data-form-id="myForm" action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>

    <label for="address">Address:</label>
    <input type="text" id="address" name="address"><br>

    <label for="city">City:</label>
    <input type="text" id="city" name="city"><br>

    <label for="zip">Zip Code:</label>
    <input type="text" id="zip" name="zip"><br>

    <button type="submit">Submit</button>
</form>

<devsite-script src="/path/to/your/static/js/autofill_tracker.js"></devsite-script>

자동 완성 추적 JavaScript

다음은 감지를 실행하는 JavaScript 코드입니다. 추적을 초기화하고, 지정된 필드의 변경사항을 수신 대기하고, 자동 완성 상태를 확인하고, 양식 제출 시 GA4에 이벤트를 전송합니다.

// autofill_tracker.js
const formId = 'myForm'; // Replace with your form's ID
const fieldsToTrack = ['name', 'email', 'address', 'city', 'zip']; // Replace with your field IDs

const autofillStatuses = {};

function initializeAutofillTracking() {
    const form = document.getElementById(formId);
    if (!form) {
        console.error(`Form with ID '${formId}' not found.`);
        return;
    }

    fieldsToTrack.forEach(fieldId => {
        const field = form.querySelector(`#${fieldId}`);
        if (!field) {
          console.warn(`Field with ID '${fieldId}' not found in the form.`);
          return;
        }

        autofillStatuses[fieldId] = 'EMPTY';
        field.addEventListener('change', (event) => {
            const fieldElement = event.target;
            if (fieldElement.matches(':autofill')) {
                if (autofillStatuses[fieldId] === 'EMPTY'){
                  autofillStatuses[fieldId] = 'AUTOFILLED';
                } else if(autofillStatuses[fieldId] === 'ONLY_MANUAL'){
                    autofillStatuses[fieldId] = 'ONLY_MANUAL_THEN_AUTOFILLED';
                } else if (autofillStatuses[fieldId] === 'AUTOFILLED_THEN_MODIFIED'){
                    // keep the status
                } else {
                    autofillStatuses[fieldId] = 'AUTOFILLED';
                }
            } else {
                if (autofillStatuses[fieldId] === 'AUTOFILLED'){
                    autofillStatuses[fieldId] = 'AUTOFILLED_THEN_MODIFIED';
                } else if (autofillStatuses[fieldId] === 'ONLY_MANUAL_THEN_AUTOFILLED') {
                  autofillStatuses[fieldId] = 'ONLY_MANUAL';
                }else{
                    autofillStatuses[fieldId] = 'ONLY_MANUAL';
                }
            }
        });
    });

    form.addEventListener('submit', function(event) {
      event.preventDefault();
      const formElement = event.target;
      const formId = formElement.dataset.formId;
      fieldsToTrack.forEach(fieldId => {
        gtag('event', 'autofill_form_interaction', {
          'form_id': formId,
          'field_id': fieldId,
          'autofill_status': autofillStatuses[fieldId]
        });
      });
      formElement.submit();
    });
}

document.addEventListener('DOMContentLoaded', initializeAutofillTracking);

구성 (중요)

스크립트가 올바르게 작동하려면 JavaScript 코드 내에서 다음 두 줄을 수정해야 합니다.

const formId = 'myForm'; // Replace 'myForm' with the actual ID of YOUR form.
const fieldsToTrack = ['name', 'email', 'address', 'city', 'zip']; // Replace these with the actual IDs of the input fields YOU want to track.

코드 설명:

form.dataset.formId: data-form-id 속성의 값을 가져와 formId 매개변수로 사용합니다.
event.preventDefault(): 기본 양식 제출을 방지하여 양식을 제출하기 전에 이벤트를 전송할 수 있습니다.
gtag('event', 'autofill_form_interaction', ...): 다음 매개변수를 사용하여 맞춤 이벤트를 전송합니다.
form_id: 양식의 ID입니다.
field_id: 필드의 ID입니다.
autofill_status: 필드의 현재 자동 완성 상태입니다.
form.submit(): GA4에 이벤트를 전송한 후 양식을 제출합니다.
document.addEventListener('DOMContentLoaded', ...): 페이지의 HTML 구조가 완전히 로드된 후에만 스크립트가 실행되도록 하여 아직 존재하지 않는 요소를 찾으려고 할 때 발생하는 오류를 방지합니다.

3. 테스트

브라우저에서 양식을 제출합니다.
GA4의 실시간 또는 DebugView 보고서를 사용하여 autofill_form_interaction 이벤트가 전송되고 있는지 확인합니다.
이벤트 매개변수가 올바르게 채워져 있는지 확인합니다 (예: form_id, field_id, autofill_status).

4. GA4에서 맞춤 측정기준 구성하기

GA4 보고서에서 field_id 및 autofill_status 매개변수를 사용하려면 맞춤 측정기준을 만들어야 합니다.

GA4 속성으로 이동합니다.
'구성' > '맞춤 정의'로 이동합니다.
새 맞춤 측정기준을 만듭니다.
- 이벤트 매개변수: field_id
- 측정기준 이름: Field ID
- 범위: 이벤트
다른 맞춤 측정기준을 만듭니다.
- 이벤트 매개변수: autofill_status
- 측정기준 이름: Autofill Status
- 범위: 이벤트
세 번째 맞춤 측정기준을 만듭니다.
- 이벤트 매개변수: form_id
- 측정기준 이름: Form ID
- 범위: 이벤트

5. GA4에서 데이터 분석

데이터를 수집한 후 GA4 보고서에서 데이터를 분석할 수 있습니다.

'보고서' > '참여' > '이벤트'로 이동합니다.
autofill_form_interaction 이벤트를 선택합니다.
'보조 측정기준' 드롭다운을 사용하여 맞춤 측정기준 (예: '필드 ID', '자동 완성 상태', '양식 ID')을 선택합니다. '필드 ID'를 추가하면 autofill_form_interaction 이벤트를 트리거하는 특정 양식 필드가 표시됩니다.각 필드가 어떻게 작성되었는지 자세히 알아보려면 '필드 ID'와 함께 '자동 완성 상태'를 다른 측정기준으로 확인하세요. 이 조합은 각 필드의 상호작용 유형 분포를 직접 보여줍니다.
탐색 분석을 만들어 데이터에 대한 자세한 통계를 확인하세요. 다음과 같은 다양한 기법을 사용할 수 있습니다.
- 자유 형식: 데이터를 탐색하고 맞춤 시각화를 만듭니다.
- 표: 데이터를 표 형식으로 표시합니다.
- 유입경로: 양식을 통한 사용자 여정을 분석합니다. 유입경로 탐색 분석을 사용하면 사용자가 다단계 양식을 진행하는 방식을 시각화하여 자동 완성 동작 (또는 자동 완성 동작의 부재)이 진행에 영향을 미치는 단계를 강조 표시할 수 있습니다.

이 데이터로 답할 수 있는 질문의 예:

가장 자주 자동 완성되는 필드는 무엇인가요?
사용자가 자동 완성 기능을 얼마나 자주 사용하나요?
사용자가 정보를 수동으로 입력하는 경향이 있는 특정 필드가 있나요?
시간이 지남에 따라 자동 완성 동작이 변경되나요?
양식에 따라 자동 완성 동작은 어떻게 달라지나요?

6. 추가 고려사항

양식 유효성 검사: 양식 유효성 검사가 자동 완성 감지에 미치는 영향을 고려하세요. 유효성 검사가 실패하면 변경 이벤트가 올바르게 트리거되지 않을 수 있습니다.
동적 양식: 동적 양식이 있는 경우 JavaScript 코드에서 필드의 수와 ID 변경을 처리할 수 있는지 확인하세요. MutationObserver를 사용하여 양식의 변경사항을 추적해야 할 수도 있습니다.
성능: 페이지에 JavaScript를 너무 많이 추가하지 마세요. 성능에 미치는 영향을 확인하기 위해 코드를 테스트해야 합니다.
사용자 개인 정보 보호: 데이터를 수집할 때 사용자 개인 정보 보호에 유의하세요. 적절한 동의 없이 민감한 정보를 수집하지 마세요.
이벤트 한도: GA4에는 전송할 수 있는 이벤트 및 매개변수 수에 제한이 있습니다. 이에 따라 구현을 계획하세요.
여러 양식: 동일한 페이지에 여러 양식이 있는 경우 모든 양식을 추적하도록 코드를 조정해야 합니다. 각 양식에 맞게 formId 선택기와 이벤트 리스너를 조정해야 합니다.
접근성: 장애가 있는 사용자가 구현에 액세스할 수 있는지 확인합니다.
테스트: 다양한 브라우저와 기기에서 구현을 철저히 테스트하여 예상대로 작동하는지 확인합니다.

7. 결론

축하합니다. JavaScript 리스너 설정부터 Google 애널리틱스 4에서 맞춤 측정기준 구성까지 단계를 성공적으로 탐색하고 자동 완성 추적을 완전히 마스터했습니다. 이제 모든 준비가 완료되었으며 수집한 데이터를 사용하여 양식에서 진정으로 즐겁고 효율적인 사용자 환경을 만들 수 있습니다.

유용한 통계가 계속해서 표시될 것입니다. 사용자가 각 필드와 상호작용하는 방식을 정확하게 파악하고, 자동 완성의 이점을 가장 많이 누리는 양식 부분을 발견하고, 이전에 보이지 않았던 숨겨진 마찰 지점을 식별할 수 있습니다. 이 강력한 지식을 바탕으로 타겟팅된 스마트한 조정을 하고, 사용자 여정을 간소화하고, 양식 이탈을 줄이고, 중요한 전환율을 더욱 높일 수 있습니다.

이제 웹 양식을 지속적으로 최적화하고 개선할 수 있습니다. 이 Codelab을 완료하는 것은 데이터 기반 설계의 흥미진진한 지속적 모험의 시작이라고 생각하세요. 이제 새로운 분석 기능을 활용하여 개선사항을 실험하고, 양식을 기능적일 뿐만 아니라 양식과 상호작용하는 모든 사용자에게 놀라운 경험을 제공하세요. 최적화 도구를 유용하게 활용하시기 바랍니다.