Google 태그 관리자를 사용한 양식 이벤트 추적

게시 됨: 2021-07-19

웹사이트에서 전환을 모니터링하기 위해 이벤트 추적을 설정하는 쉬운 방법을 찾고 있다면 Google 태그 관리자 사용을 고려할 수 있습니다.

이 게시물에서는 Google 태그 관리자를 설명하고 설치 방법을 알려주며 사이트에서 양식 이벤트 추적을 설정하는 방법을 설명합니다.

Google 태그 관리자 GTM V2

Google 태그 관리자란 무엇입니까?

Google 태그 관리자(GTM)는 웹마스터와 마케팅 담당자가 웹사이트 태그를 더 쉽게 추가하고 업데이트할 수 있게 해주는 무료 도구입니다. GTM을 사용하는 방법에는 여러 가지가 있지만 대부분의 기업에서는 디지털 마케팅 전략의 성공을 측정하는 수단으로 이벤트 추적에 GTM을 사용합니다. GTM에 대한 자세한 설명은 블로그 소개 게시물을 확인하세요.

이벤트 추적에 GTM을 사용하는 이유는 무엇입니까?

GTM을 사용하면 이벤트 태그를 완전히 제어할 수 있습니다. 개발자에게 하드 코딩을 요청하지 않고도 사이트에 추가할 수 있습니다. 이렇게 하면 다른 중요한 프로젝트에서 작업할 시간을 확보할 수 있습니다.

또한 GTM을 사용하면 이벤트 추적을 직접 수정하고 테스트할 수 있으므로 프로세스가 훨씬 간단해집니다.

또한 JavaScript를 사용하여 양식을 만드는 웹사이트가 점점 늘어나고 있습니다. 이러한 사이트는 도착 URL을 사용하지 않으므로 Analytics에서 간단한 목표를 사용할 수 없습니다. 웹사이트 관리를 미래에 대비하려면 GTM을 이해하는 것이 좋습니다.

GTM 설치

GTM 설치는 Google Analytics 설정과 매우 유사합니다.

Analytics에 사용하는 것과 동일한 Google 계정을 사용하여 Google 태그 관리자에 로그인합니다. 그런 다음 화면의 단계를 따릅니다.
Google 태그 관리자에서 계정 만들기
이용약관을 읽고 동의합니다. 그러면 설치 코드가 제공됩니다. 여는 <body> 태그 바로 뒤에 이 코드를 사이트의 모든 페이지에 추가해야 합니다. 스스로 할 수 없다면 개발자가 다음을 도울 수 있어야 합니다.
웹사이트의 모든 페이지에 GTM 코드 붙여넣기

그게 다야 사이트에 태그 관리자 컨테이너 를 설정했습니다. 이 컨테이너는 결국 GTM 대시보드에서 생성한 모든 태그를 보유하게 됩니다.

이제 GTM을 사용하여 이벤트 추적을 설정하는 방법을 설명하겠습니다. 이를 위해 페이지, 클릭 및 양식 내에서 여러 내장 변수를 활성화해야 합니다. GTM을 설정할 때 기본적으로 활성화되어 있지 않습니다. 따라서 시작하기 전에 변수로 이동하여 다음 옵션을 확인하십시오.

내장 변수 태그 관리자

양식 이벤트 추적

양식 제출 추적을 사용하면 방문자가 웹사이트에서 양식을 제출할 때 모니터링할 수 있습니다. 이것은 문의하기 페이지에 있는 문의 양식이거나 페이지 바닥글에 있는 문의 양식일 수 있습니다. 거의 모든 웹사이트에는 양식이 있으므로 태그 관리자를 파악하는 좋은 방법입니다.

GTM 인터페이스에 이미 내장된 태그를 사용할 수 있으므로 GTM을 사용하여 이벤트 추적을 설정하는 것은 비교적 쉽습니다. HTML 코드에 대한 기본 지식은 유용하지만 이 가이드에서는 알아야 할 모든 것을 설명합니다.

걱정하지 마세요. 태그 관리자를 사용하여 웹사이트를 중단하는 것은 불가능하며 태그를 실시간으로 푸시하기 전에 모든 것을 테스트할 수 있습니다.

해보자!

1단계 — URL 식별

양식이 있는 URL을 기록해 둡니다.

예를 들어 바닥글의 문의 양식과 같이 한 페이지 이상에 양식이 있는 경우 도메인만 알면 됩니다. 이 경우에는 hallam.co.uk를 사용 하고 있습니다.

2단계 — 양식 ID 식별

제출 버튼의 양식 ID를 찾습니다. Google Chrome 또는 Firefox를 사용하는 경우 양식을 마우스 오른쪽 버튼으로 클릭하고 '요소 검사'를 선택하여 이 작업을 수행할 수 있습니다. <form>에서 'id' 속성을 찾아야 합니다. 다음은 다음과 같은 예입니다.

팁 : 인스펙터 내에서 ctrl + f를 누르면 항목을 검색할 수 있습니다.

참고 : 양식에 고유한 ID가 없는 경우 개발자에게 추가를 요청해야 할 수 있습니다. 그러나 웹 사이트에서 WordPress용 문의 양식 7과 같은 양식 플러그인을 사용하는 경우 ID를 직접 추가할 수 있습니다.

3단계 - 트리거 생성

GTM에서 새 트리거를 만들고 나중에 쉽게 식별할 수 있도록 제목을 지정합니다. '문의 양식 제출' 또는 '문의 페이지 양식 제출'과 같은 작업이 수행됩니다.

이벤트 선택에서 양식 제출을 선택합니다.

문의 양식 제출 트리거

계속을 클릭한 다음 '태그 대기' 및 '유효성 확인'을 선택하여 성공적인(유효한) 양식 제출에 대해 트리거가 실행되는지 확인합니다.

양식 제출 이벤트 추적 확인

계속을 클릭하고 앞에서 기록한 URL 경로를 입력합니다.

트리거 페이지 URL에 페이지 경로가 포함됩니다.

양식이 여러 페이지에 있는 경우 도메인이 포함된 페이지에서 실행되도록 트리거를 설정할 수 있습니다.

트리거 Google 태그 관리자 활성화

계속을 클릭한 다음 '일부 양식'을 선택합니다.

방아쇠 gtm에 발사

트리거를 완료하려면 앞서 적어둔 양식 ID를 추가하세요(내 양식 ID를 사용하지 마세요!).

폼 ID 이벤트 추적 시 실행

이제 트리거가 실행되는 데 필요한 조건을 지정했습니다. 다음으로 태그를 생성하겠습니다.

4단계 — 태그 생성

새 유니버설 애널리틱스 태그를 만듭니다. 이 태그는 이벤트 정보를 Google 애널리틱스로 보냅니다. 다시 한 번 기억할 수 있는 이름을 지정하십시오.

태그 이벤트 추적 생성 Google 태그 관리자

다음 필드에 Google 애널리틱스 추적 ID를 추가합니다.

태그 gtm 구성

그런 다음 트랙 유형을 이벤트로 채우고 카테고리 및 라벨에 대한 추적 매개변수를 결정합니다.

추적 매개변수 Google 태그 관리자

이 예에서처럼 여러 페이지에 있는 양식에 대해 이것을 설정하는 경우 레이블 오른쪽에 있는 상자를 클릭하고 드롭다운 메뉴에서 {{페이지 경로}}를 선택합니다. 이렇게 하면 Analytics 이벤트 보고서에서 양식 제출 이벤트가 트리거된 페이지를 확인할 수 있습니다.

이벤트 레이블 페이지 경로

'비상호작용 적중'에서 true 또는 false를 선택할 수 있습니다. 비상호작용 조회는 트리거되는 이벤트가 이탈률과 같은 측정항목에 영향을 미치는지 여부를 결정할 수 있는 매개변수입니다 . 예를 들어 동영상이 자동 재생되는 페이지가 있는 경우 'true'를 선택하고 싶을 것입니다. 그렇지 않으면 해당 페이지를 방문하는 모든 사람이 이벤트를 트리거하고 이탈률은 0이 됩니다.

양식 제출 추적의 경우 '거짓'을 선택하는 것이 좋습니다. 특히 추적 중인 양식이 방문자가 필요한 모든 정보를 보고 귀하의 문의 양식을 채우는 방문 페이지에 있는 경우입니다. 결국 그들은 웹사이트에서 다른 페이지를 보지 않더라도 상호작용하고 원하는 작업을 완료했으므로 상호작용 조회여야 합니다.

비상호작용 조회수 매개변수 Google 태그 관리자

그런 다음 계속을 클릭하고 '실행'에서 '더보기'를 선택합니다. '양식'을 선택한 다음 이전에 생성한 트리거로 이동합니다.

태그 Google 태그 관리자에 대한 트리거 선택

'태그 생성'을 클릭하면 완성된 태그가 다음과 같이 보일 것입니다.

양식 제출 태그 완료 Google 태그 관리자

5단계 - 테스트

미리보기 및 디버그 모드로 이동하여 새 이벤트 추적이 작동하는지 테스트합니다.

미리보기 및 디버그 모드 Google 태그 관리자

동일한 브라우저에서 새 탭을 열고 웹사이트로 이동하면 태그 관리자가 디버그 모드를 엽니다. 여기에서 컨테이너를 미리 볼 수 있으며 페이지에서 실행되었거나 실행되지 않은 태그를 알려줍니다.

디버그 및 GTM 미리보기

위의 예에서 내 문의 양식 제출을 포함하여 내 페이지에서 이러한 태그가 실행되지 않았습니다. 이제 페이지에서 직접 양식을 테스트하고 올바른 태그가 '이 페이지에서 실행된 태그'로 이동하는지 확인할 수 있습니다.

태그 실행 디버그 모드 테스트

6단계 — 게시

태그가 작동하는지 테스트했으면 GTM 대시보드로 돌아가서 버전을 게시하세요. 다음 버전이 제대로 작동하지 않으면 버전 이름을 바꾸고 버전으로 되돌릴 수 있습니다.

게시 버전 Google 태그 관리자

Ta-da — 이제 새 이벤트 추적 태그 및 트리거가 활성화되었습니다.

양식 최적화

전환을 늘리기 위해 사이트의 양식을 개선할 수 있습니다. GTM을 사용하여 각 양식 필드를 추적하여 테스트하고 개선해야 할 사항을 찾을 수 있습니다. 또는 Hotjar와 같은 서비스를 사용하여 전환율 최적화를 위한 유용한 깔때기 분석을 제공할 수 있습니다.

결론

이벤트 추적 설정과 관련하여 효율성을 높이고 테스트 문제를 없애고 싶다면 Google 태그 관리자를 사용하는 것이 좋습니다.

나는 개발자들이 웹사이트에서 진행 중인 더 큰 프로젝트로 바쁘게 일할 때 시간을 절약할 수 있는 이 결정에 감사한다는 것을 알게 되었습니다. 엔트리 레벨에서는 태그 관리자에 내장된 태그를 사용할 수 있으며 버전 제어 및 디버그 모드 기능을 통해 모든 것을 직접 테스트할 수 있습니다.

Google 태그 관리자를 사용하여 이 가이드를 사용하여 양식 이벤트 추적을 구현한 경우 아래 의견에서 이에 대해 듣고 싶습니다. 또는 Twitter @Digital_Kym에서 저에게 연락하십시오.

도움이 필요하시면 주저하지 마시고 저희에게 연락해 주십시오.