구글태그매니저(GTM)을 활용한 폼 제출 이벤트 추적 방법 : 데이터레이어, 자바스크립트 사용

구글 태그 매니저(GTM)를 사용하여 폼 제출 이벤트를 추적하는 것은 마케터에게 있어 중요한 기술입니다. 데이터레이어와 자바스크립트를 활용하면 이벤트 전송을 정확하게 할 수 있습니다. 이 글에서는 GTM을 통해 폼 제출 이벤트를 효과적으로 추적하는 방법을 자세히 알아보겠습니다.

안녕하세요! 일하기 싫은 마케터, 섭입니다 :)

일하기 싫은 마케터 섭과 효율적으로 디지털 마케팅을 해봅시다.

오늘은 제가 최근에 겪은 GTM 관련 문제와 그 해결 과정을 여러분과 공유하고자 합니다. 폼 제출 이벤트를 GTM에서 정확하게 추적하는 것이 얼마나 중요한지, 그리고 이를 위해 어떤 방법을 사용했는지 자세히 설명드리겠습니다.

 

---

 

1. GTM과 데이터레이어: 마케터의 강력한 도구

---

구글 태그 매니저(GTM)는 마케터에게 있어 정말 강력한 도구입니다. 특히 GTM의 데이터레이어와 함께 사용하면 그 위력이 배가 됩니다. 데이터레이어는 웹사이트의 다양한 이벤트와 정보를 저장하고 전달하는 JavaScript 객체로, GTM이 이 정보를 읽어 다양한 태그를 실행할 수 있게 해 줍니다.

gtm의 데이터레이어 디버깅 뷰

dataLayer.push({
    'event': 'formSubmission',
    'formName': '문의하기'
});

위와 같은 식으로 홈페이지 소스코드에서 데이터레이어에 이벤트를 푸시하면, GTM에서 이를 감지하고 원하는 작업을 수행할 수 있습니다. (데이터 레이어 푸시는 아래 글에서 자세히 설명되어 있습니다.)

데이터 레이어 푸시(Data Layer Push)가 도대체 뭘까? GTM, GA4

 

2. 폼 제출 이벤트 추적의 중요성

---

폼 제출 이벤트를 정확하게 추적하는 것은 왜 중요할까요? 이는 사용자의 행동을 이해하고, 마케팅 캠페인의 성과를 측정하는 데 핵심적인 역할을 합니다. 특히 구글 애즈와 같은 광고 플랫폼에서 전환을 정확하게 측정하기 위해서는 이 과정이 필수적입니다.

또한 어느 타이밍에 이벤트를 전송하는지도 중요합니다. 폼 제출 버튼 클릭 시로 이벤트 전송 타이밍을 잡게 된다면 실수로 누른 것도 전환 이벤트로 잡힐 수 있습니다. 그렇기 때문에 이를 정확히 추적하는 것은 매우 중요합니다.

 

3. JavaScript를 활용한 이벤트 전송

---

자바스크립트는 이벤트 전송을 구현하는 데 있어 핵심적인 역할을 합니다. 다음은 폼 제출 버튼에 onclick 이벤트를 추가하여 GTM으로 이벤트를 전송하는 예시 코드입니다.

<a href="<!--/link_write_ok/-->" class="btn_Red" onclick="submitAsk(event)">글쓰기</a>

<script type ='text/javascript'>
function submitAsk(event) {
    event.preventDefault();
    if (validateForm()) {
        dataLayer.push({
            'event': 'ask_submission',
            'formName': '리뷰 작성'
        });
        document.getElementById('reviewForm').submit();
    }
}
</script>

이 코드는 글쓰기라는 폼 제출 버튼을 클릭했을 때 submitAsk 함수를 실행합니다. 본래 onclick이라는 함수는 없었지만, 추가하여 자바스크립트 함수를 실행할 수 있도록 했습니다. 이후 이 함수는 폼의 유효성을 검사한 후, 데이터레이어에 이벤트를 푸시하고 폼을 제출합니다.

sumitAsk라는 것은 데이터레이어에 들어갈 이벤트 명을 말하는 것입니다. 이는 다른 명칭으로 바꾸어도 상관없습니다. 주요 포맷은 Json 형태를 가지고 있습니다. 

 

4. 문제 해결: 페이지 이동 이슈

---

3번과 같은 형태로 처음에는 이벤트는 제대로 전송되었지만, 페이지가 이동하지 않는 문제가 발생했습니다. 이는 preventDefault()로 인해 기본 동작이 막혔기 때문이었죠. 이 문제를 해결하기 위해 코드를 다음과 같이 수정했습니다

<a href="<!--/link_write_ok/-->" class="btn_Red" onclick="return submitAsk(this)">글쓰기</a>

<script type ='text/javascript'>
function submitAsk(link) {
    if (validateForm()) {
        dataLayer.push({
            'event': 'ask_submission',
            'formName': '리뷰 작성'
        });
        setTimeout(function() {
            window.location.href = link.href;
        }, 300);
    }
    return false;
}
</script>

이렇게 수정하니 이벤트도 정확히 전송되고, 페이지 이동도 원활하게 이루어졌습니다. 결론적으로 4번의 코드가 최종 소스 코드로 쓰일 수 있었습니다.

5. GTM 설정: 이벤트 캡처하기

---

showAddformExecuted가 생성된 이벤트입니다.

GTM에서 이 이벤트를 캡처하려면 다음과 같은 설정이 필요합니다

1. 트리거 생성: '사용자 지정 이벤트'를 선택하고 이벤트 이름을 'ask_submission'으로 설정합니다.
2. 태그 생성: 원하는 태그(예: GA4 이벤트 태그)를 생성하고, 앞서 만든 트리거를 연결합니다.

이렇게 하면 폼 제출 시 GTM을 통해 원하는 데이터를 정확하게 추적할 수 있습니다.

---

 

---

마케터로서 이런 기술적인 문제를 해결하는 과정은 때로는 힘들지만, 매우 보람찹니다. GTM, 데이터레이어, 자바스크립트에 대한 이해는 디지털 마케팅 분야에서 좋은 경쟁력이 될 것입니다. 이번 경험을 통해 저는 한 단계 성장했고, 앞으로도 계속해서 새로운 기술을 배우고 적용할 것입니다.

여러분도 이런 문제에 부딪힐 때, 포기하지 말고 끝까지 해결해 나가시기 바랍니다. 그 과정에서 얻는 지식과 경험은 여러분을 더 뛰어난 마케터로 만들어줄 것입니다.

자, 이제 여러분의 웹사이트에서 폼 제출 이벤트를 완벽하게 추적해 보세요. 그리고 그 데이터를 바탕으로 더 나은 마케팅 전략을 수립하시기 바랍니다. 함께 성장하는 마케터가 됩시다!

---

오늘도 읽어주셔서 감사합니다. 뒷모습의 아름다움을 담는 섭케터 =)

 

사진 계정 : @digibition (Instagram)
커피 계정 : @supfo.od (Instagram)
유튜브 : https://www.youtube.com/user/lms9301/videos

minseob Lim