Google 태그 관리자 튜토리얼 파트 4: 양식 제출 추적 – 고급

업데이트된 Google 태그 관리자 자습서의 3부에서는 연락처 양식 추적을 마스터하는 쉬운 접근 방식인 양식 제출 트리거를 사용하여 양식 추적을 다뤘습니다. 그러나 양식의 코드와 기술에 따라 항상 작동하지 않을 수 있습니다. 이는 현장 JavaScript 문제 또는 GTM에서 선택하지 않는 양식 제출과 연결될 수 있습니다.

이 시리즈의 마지막 부분에서는 요소 가시성 트리거를 사용하여 양식 제출 추적을 자세히 살펴보겠습니다. 이 유형의 트리거는 양식뿐만 아니라 모든 유형의 팝업 창과 디스플레이 배너 및 알림에 유용합니다.

Google Analytics는 이 활동을 자동으로 추적하지 않지만 Google 태그 관리자(GTM)는 양식 제출을 추적하기 위한 자동화된 솔루션을 제공합니다.

이 자습서에서는 이미 Google 태그 관리자 계정이 있고 컨테이너를 만들고 웹사이트에 설치했다고 가정합니다. 또한 웹사이트에 대해 Google Analytics 계정을 설정하고 GTM에 연결해야 합니다.

양식 추적이 어려운 이유는 무엇입니까?

한 발 물러서서 양식 추적에 다양한 기술이 있는 이유를 살펴보겠습니다. 다양한 유형의 양식이 있으며 개발 방법에 대한 글로벌 표준이 없으므로 결과적으로 추적이 어려울 수 있습니다. 다음은 양식이 제출된 후 웹사이트에서 발생할 수 있는 가장 일반적인 시나리오/이벤트에 대한 개요입니다.

• 이 양식은 사용자를 감사 페이지 로 리디렉션합니다. 좋습니다. 이것은 Pageview 를 통해 자동으로 추적됩니다.
• 버튼을 제출 양식 후 청 알림 감사를 표하는 양식 쇼는 클릭 한 : 우수함, 그것은 형태가 GTM 제출 보내는 경우. 이에 대한 자세한 내용은 블로그 게시물 자습서 를 참조하십시오 .
• 양식이 새로 고쳐지고 감사 텍스트 가 표시됩니다. 도전적이지만 요소 가시성 트리거로 수행 할 수 있습니다.
• 팝업 창이 사용자에게 성공적인 제출에 대해 알려줍니다. 도전적이지만 요소 가시성 트리거로 불가능하지는 않습니다.

양식 추적을 시작하는 방법

먼저 GTM의 기본 제공 양식 변수 를 활성화하고 모든 양식 제출을 수신하는 양식 제출 트리거 를 만드는 것이 좋습니다. 마지막 블로그 게시물 자습서 에서 설정에 대해 자세히 읽어보십시오 . Form Auto-Event Listener 는 모든 표준 제출 브라우저 이벤트를 감지합니다. 양식으로 몇 가지 테스트를 실행합니다.

GTM이 미리보기 및 디버그 모드에서 양식 제출 을 기록하지 않으면 표준 추적 접근 방식이 작동하지 않으며 대신 대체 방법을 사용해야 합니다. 이것은 매우 일반적이기 때문에 우리는 Element Visibility Trigger 라는 멋진 대안으로 작업할 것입니다.

요소 가시성 트리거 설명

요소 가시성(EVB) 트리거 는 특정 요소가 화면에 나타날 때(클릭, 스크롤 또는 기타 상호 작용으로 인해 ) 추적하므로 다양한 사용 사례가 있습니다. 이 기술은 양식이 성공적으로 제출된 후 특정 감사 메시지가 나타날 때 양식에 적용할 수 있습니다. 이것은 동일한 양식 페이지의 감사 알림, 양식 페이지가 다시 로드될 때의 감사 배너 또는 팝업 창일 수 있습니다. 더 실용적인 예를 보려면 여기를 클릭하십시오 .

즉, 요소 가시성 트리거 는 지정한 요소가 브라우저의 뷰포트에 나타날 때마다 실행됩니다. 뷰포트는 브라우저 창의 보이는 영역입니다. 요소가 거기에 표시되면 사용자가 볼 수 있습니다.

선택 방법의 경우 타겟팅할 요소를 결정하기 위해 다음 두 가지 옵션 중에서 선택할 수 있습니다.

• 요소 ID : 주어진 ID로 페이지의 첫 번째 요소와 일치합니다. 추적할 요소가 하나만 있는 경우 잘 수행됩니다.
• CSS 선택기 : 선택기에 맞는 페이지의 요소 또는 요소 그룹과 일치하며 페이지에 나타날 수 있는 여러 요소를 추적하는 데 적합합니다.

1단계: 고유 식별자 찾기

표시되는 양식의 성공 메시지를 검사하여 시작합니다.

그렇게 하려면 마우스 오른쪽 버튼을 클릭하여 브라우저의 개발자 도구에 액세스합니다. 크롬에서, 예를 들어, 당신이 검사하고 요소 검사를 선택 할 요소를 마우스 오른쪽 버튼으로 클릭합니다. 그러면 메시지 내용, CSS 클래스, ID 및 기타 요소와 같은 다양한 정보가 표시됩니다. 아래 예에서 메시지에는 고유한 ID submit-message 가 있으며 EVB Trigger 에서 조건으로 사용할 수 있습니다.

2단계: 요소 가시성 트리거 생성

트리거는 사용자의 뷰포트에 표시되는 추적하려는 항목을 정확히 정의합니다. 이 경우 감사 메시지가 나타나는지 확인하는 것입니다.

트리거 설정의 경우 다음 단계를 따르십시오.

• 왼쪽 사이드바에서 트리거 로 이동하여 새 항목을 만듭니다.
• Untitled Trigger 를 EVB – Contact – Form Submitted 와 같은 설명적인 이름으로 바꿉니다.
• 트리거 유형: 요소 가시성 을 선택합니다.

트리거 구성의 경우 다음을 설정합니다.

• 선택 방법 : 드롭다운에서 ID 를 선택합니다.
• 요소 ID : 제출된 메시지
  • 이것은 1단계에서 식별한 고유 ID 를 사용하여 추적하려는 감사 메시지를 정확히 지정합니다.
• 이 트리거를 실행하는 시기 : 페이지당 한 번
  • 즉, ID 와 일치하는 요소가 뷰어에 표시될 때 현재 페이지에서 한 번만 실행됩니다.
  • 다른 두 옵션은 CSS 선택기 를 사용하여 페이지에서 둘 이상의 요소를 추적할 때 유용할 수 있습니다.
• 최소 가시성 : 50
  • 여기에서 백분율로 값을 지정할 수 있습니다. 이 값은 트리거가 실행되기 위해 뷰포트에 표시되어야 하는 요소의 양입니다. 따라서 값을 "50"으로 설정하면 일치하는 요소의 최소 50%가 표시되어야 합니다.
  • 기본적으로 이벤트를 트리거하려면 요소가 화면에 50% 이상 표시되어야 합니다. 우리의 경우 이것으로 충분합니다.
• DOM 변경 사항 관찰 : DOM 변경 사항으로 나타나는 일치하는 요소를 추적하도록 트리거를 활성화하려면 이 확인란을 선택합니다.
  • 이 설정을 사용하면 연락처 양식이 처음 로드될 때 DOM(문서 개체 모델)에 없을 수 있는 요소의 가시성을 추적할 수 있습니다. 즉, 감사 메시지가 있는 HTML 요소가 나타날 때까지 기다립니다.
• 방아쇠를 당기는 추가 조건:
  • 이 양식에 고유해야 하는 ID를 사용하고 있으므로 여기서 더 많은 조건을 설정할 필요가 없습니다.
  • 이 ID 가 다른 양식에도 사용되는 경우 해당 양식이 표시되는 페이지를 포함하도록 페이지 경로 를 설정하는 것이 좋습니다.

저장 을 클릭하여 트리거 설정을 완료합니다.

3단계: 양식 제출 이벤트 태그 만들기

양식 제출을 추적하는 마지막 단계는 원하는 정보로 Google Analytics에서 이벤트를 기록하는 태그를 만드는 것입니다. 이벤트는 이전 단계에서 설정한 Element Visibility Trigger 의 조건이 충족되면 발생합니다. 이제 다음 스크린샷에 표시된 대로 태그를 만듭니다.

4단계: 버전 저장, 테스트 및 게시

방금 만든 태그는 게시할 때까지 작동하지 않지만 먼저 예상대로 작동하는지 철저히 테스트해야 합니다. 태그를 저장했으면 미리보기 모드를 활성화하고(오른쪽 상단 모서리에 있는 "미리보기" 클릭) 웹사이트로 이동하여 페이지를 새로고침합니다.

양식 추적을 위해 다음 테스트 시나리오를 포함해야 합니다.

• 연락처 양식을 작성하지 않고 제출하십시오. 이 경우 태그가 실행되지 않아야 합니다.
• 정확한 세부 정보로 양식을 작성한 다음 제출을 클릭하십시오. 태그는 화면에 감사 메시지가 표시되는 즉시 실행되어야 합니다.

Google Analytics 실시간 이벤트 보고서는 모든 것이 제대로 작동하는 경우 이벤트 조회를 표시해야 합니다. Google 태그 관리자 테스트 문제 및 문제가 발생할 경우 해결 방법 에 대한 블로그 게시물을 읽어보세요.

모든 테스트가 성공하면 GTM에서 제출 버튼을 클릭할 수 있습니다. 이 게시된 버전에 Contact Form Submission Event 추가 와 같은 설명이 포함된 이름을 지정하고 게시를 클릭합니다.

결론

표준 양식 추적은 설정하기 가장 쉽지만 현장 JavaScript의 복잡성으로 인해 작동하지 않는 경우가 많습니다. 요소 가시성 트리거로 작업하면 이러한 극단적인 경우를 처리하는 대안을 제공합니다. 또한 데이터를 훨씬 더 안정적이고 정확하게 만듭니다. 이렇게 하면 제출 버튼에 대한 유효하지 않거나 원치 않는 클릭이 추적되지 않고 실제로 완료되어 성공적으로 전송된 양식 제출만 추적됩니다.

Google 태그 관리자 자습서에서는 외부(아웃바운드) 링크 추적 , 다운로드 링크 추적 및 기본 양식 제출에 대해 설명했습니다 . 추적하고 싶은 다른 유형의 이벤트가 있습니까? 더 복잡한 경우에 도움이 필요하십니까? 언제든지 저희에게 연락하십시오 – 기꺼이 도와드리겠습니다! 흥미로운 업데이트를 보려면 뉴스레터를 구독하십시오 .