디지털 마케터라면 누구나 웹사이트 퍼포먼스에 대한 보다 정확한 수치를 확인하고 싶을 것입니다. 하지만 개발 지식이 부족한 대부분의 마케터의 경우 어려움에 맞닥뜨리게 되기 마련입니다. 구글 애널리틱스 같은 트래킹 툴을 사용하려고 할 때도 개발자의 도움이 필요한 경우가 많기도 하고, 코드 수정이 필요한 경우도 종종 있기 때문입니다.
대표적으로 구글 애널리틱스 이벤트/목표 설정이 그 예입니다. 웹사이트 방문자들의 특정한 행동을 이벤트나 목표로 설정해서 트래킹 하려고 할 때 html 소스 코드에 약간의 수정이 필요한데, 개발자가 아닌 디지털 마케터의 경우 소스 코드를 수정하기가 쉽지 않죠.
하지만 개발 지식이 없는 마케터에게도 한 줄기 빛이 있습니다. 바로 구글에서 제공하는 구글 태그 관리자(구글 태그 매니저)를 이용하는 방법입니다. 구글 태그 관리자를 이용하면 개발 지식이나 개발자의 도움 없이도 트래킹이나 목표 설정을 위한 간단한 태그 적용을 할 수 있습니다. 이번 포스팅에서는 구글 태그 관리자 이벤트 태그 설정과 적용된 태그를 트래킹 하는 방법에 대해서 알아보겠습니다.
구글 태그 관리자 (구글 태그 매니저) 란?
구글 태그 관리자 (구글 태그 매니저)란 웹사이트 또는 모바일 앱에 삽입되는 추적 코드 (태그)를 효율적으로 관리할 수 있도록 해주는 구글 무료 툴입니다. 구글 태그 관리자를 이용하면 개발자의 도움 없이도 웹사이트에 적용•작동하는 여러 가지 태그를 쉽게 관리할 수 있습니다. 구글 태그 관리자에 대해서 더 자세히 알고 싶으시다면 트윈워드에서 준비한 여러 트래킹 코드 관리하기 – 구글 태그 관리자 포스팅을 확인해보세요.
구글 태그 관리자가 필요한 이유
웹사이트 퍼포먼스를 측정할 때, 많은 마케터들이 구글 애널리틱스를 이용합니다. 구글 애널리틱스에서는 따로 추가적인 세부 설정을 하지 않더라도 웹사이트를 방문한 트래픽에 대한 충분한 인사이트를 얻을 수 있기 때문입니다. 예를 들어 웹사이트 방문 트래픽의 소스/매체 정보라든가 체류 시간, 이탈률 등 기본적으로 제공되는 정보만 참고하더라도 충분히 의미 있는 인사이트를 얻을 수 있습니다. 마찬가지로 행동 흐름 보고서 정보를 통해 대략적인 전환 측정도 가능합니다.
세부적인 목표를 측정하고 평가해야 하는 경우에는 어떨까요? 예를 들어 방문자들이 웹사이트의 어떤 특정한 버튼을 몇 번이나 클릭했는지는 어떻게 측정할 수 있을까요? 구글 애널리틱스의 수많은 기능 중 하나인 이벤트 분석과 이벤트를 이용한 목표 설정이 그 방법인데요, 이벤트 분석을 위해서는 html 소스 코드 수정이 필요합니다. 개발 지식이 없는 마케터라면 개발자의 도움을 받아야 합니다. 이 경우, 구글 태그 관리자로 이벤트 추적에 필요한 태그를 적용해 개발자의 도움 없이도 이벤트 분석과 목표 설정을 할 수 있습니다.
구글 애널리틱스에서 어떤 이벤트에 대한 인사이트를 얻으려면 이벤트 보고서를 참고하면 됩니다. 이벤트 보고서의 데이터를 보려면 구글 애널리틱스에서 추적이 가능하도록 만들려면 특정한 이벤트 추적 매개변수를 입력하는 소스 코드 수정이 필요합니다. 이벤트 매개변수는 구글 애널리틱스 이벤트 보고서에 표시되는데요, 기본적으로 이벤트 카테고리와 이벤트 액션에 대한 매개변수를 반드시 정해야 합니다. 이벤트 라벨과 이벤트 값은 더 세부적인 추적을 위해 선택적으로 적용하면 됩니다.
구글 애널리틱스 이벤트 보고서 예시 화면 – 이벤트 카테고리, 이벤트 액션 등의 매개변수별로 통계가 표시됩니다.
만약 구글 태그 관리자를 사용하지 않고 각 이벤트별로 구글 애널리틱스에서 추적이 가능한 태그를 설정하려면 아래와 같은 코드를 일일이 삽입해야 합니다 (참고: 구글 애널리틱스 샘플 코드 도움말). 시간이 많이 드는 작업일뿐더러 개발자가 아닌 마케터가 일일이 소스코드를 변경해서 적용하기에는 어렵기도 합니다. 하지만 구글 태그 관리자를 이용해 태그 설정을 한다면 개발자의 도움 없이도 구글 애널리틱스에서 추적이 가능한 이벤트 태그 생성 및 적용이 가능합니다.
구글 애널리틱스에서 이벤트 추적을 할 수 있도록 적용해야 하는 코드 예시 스크린 캡처입니다. 구글 태그 매니저를 사용하지 않는다면 위와 비슷한 코드를 일일이 소스코드에 반영해야 합니다.
구글 태그 관리자 이벤트 태그와 구글 애널리틱스 이벤트 추적
구글 태그 관리자를 이용해 이벤트 태그를 설정하기 전에 구글 태그 매니저가 어떤 방식으로 작동을 하는지, 구글 애널리틱스에서는 어떻게 적용된 태그를 추적하는지에 대해 간락하게나마 이해를 하는 것이 중요합니다. 구글 태그 관리자의 작동 방식에 대해 트윈워드에서 준비한 ‘여러 트래킹 코드 관리하기 – 구글 태그 관리자‘ 포스팅을 먼저 읽어 보시기를 권장드립니다. 구글 태그 관리자를 이용해서 설정할 수 있는 이벤트는 매우 다양하지만, 이번 포스팅에서는 가장 기본적으로 사용되는 클릭 이벤트를 기준으로 구글 태그 관리자 태그 설정과 구글 애널리틱스 이벤트 추적 및 목표 설정을 진행해보겠습니다. 웹사이트에 구글 태그 관리자를 적용하기 위해서는 구글 태그 관리자 공식 가이드를 참고 바랍니다.
이번 포스팅에서는 간단하게 구글 태그 관리자를 이용해 태그를 적용하고 구글 애널리틱스를 이용해 목표 설정과 데이터를 확인해 볼 것인데요, 진행할 시나리오는 이렇습니다. 여러분이 운영 중인 웹사이트의 Global Navigation Bar (GNB: 웹사이트 상단 메뉴 모음 부분)에서 문의하기 버튼이 얼마나 많이 클릭되는지, 그리고 클릭이 한 번 될 때마다 1달러의 수익을 얻는다고 계산하고 싶다고 가정해보는 거죠.
1. 구글 태그 관리자에서 이벤트 태그를 만들기 위한 준비하기
이벤트 태그를 만들기 위해서는 먼저 이 태그가 어떤 상황에 발동이 되는지에 대해서 명시해주어야 합니다. 다시 말해 태그가 발동되는 조건을 판단하는 역할을 하는 트리거를 설정해야 하는 것입니다. 이번 포스팅에서는 구글 태그 관리자에서 기본적으로 제공되는 클릭 트리거를 이용해 클릭 시에만 이벤트 태그가 발동되도록 설정해 보겠습니다.
먼저 구글 태그 관리자에 접속해서 트리거 > 새로 만들기를 클릭합니다. 새로 만들기를 클릭하게 되면 새로운 트리거를 설정할 수 있는 창이 나타납니다. 새로운 트리거를 만드는 창에서 기본적으로 나타나는 “트리거 구성” 박스를 클릭하게 되면 어떤 동작으로 반응하는 트리거인지를 지정하는 트리거 유형 선택 박스가 아래와 같이 나타나게 됩니다.
트리거 유형 선택이란 트리거 발동 조건이 어떤 행동 유형으로 이루어지는지 선택하는 것입니다. 기본적으로 제공되는 트리거를 사용해도 되고 직접 자바스크립트 코드를 작성해 맞춤 트리거 유형을 적용하는 것도 가능합니다.
클릭 이벤트를 추적하기 위한 태그를 만들기 위해서는 웹사이트 방문자들이 클릭을 했을 때 발동되는 조건의 트리거가 필요한데요, 위의 예시 화면 캡처에서도 보이듯 클릭 유형 둘 중 하나를 선택하면 됩니다. 이번 포스팅에서는 GNB 메뉴 버튼에 클릭 이벤트 트거를 설정할 것이기 때문에 클릭 – 모든 요소를 선택하면 됩니다.
클릭 – 모든 요소를 클릭했다면 이제 트리거 발동 세부 조건을 지정할 차례입니다. 특정한 버튼을 클릭했을 때에만 트리거가 발동하도록 설정을 해야 하기 때문에 “모든 클릭”이 아닌 “일부 클릭”을 선택합니다. 일부 클릭에만 트리거가 발동하도록 선택을 하면, 어떤 조건인지를 설정해야 하겠죠. 여러 가지 방식이 있겠지만, 트윈워드 웹사이트를 예시로 css선택자를 지정해서 트리거가 발동되도록 지정하겠습니다.
트리거를 설정하기 위해 문의하기 버튼의 css 선택자를 확인합니다. 해당 버튼에 해당되는 소스 코드에서 선택자를 확인 가능합니다.
트윈워드 GNB의 문의하기 버튼에는 menu-item-2485라는 id가 지정되어 있습니다. 지정되어있는 css 선택자를 이용해 트리거 조건 설정을 진행할수 있습니다. 문의하기 버튼을 클릭했을때만 트리거가 작동하도록 아래와 같이 설정해 줍니다.
웹사이트 방문자가 클릭한 버튼의 css 선택자 ID 값이 menu-item-2485와 같은 경우 트리거가 발동하도록 적용했습니다. 이렇게 적용을 함으로써 모든 클릭에서 트리거가 작동하는 것이 아닌 menu-item-2485(이 경우에는 문의하기 GNB 버튼이겠죠?)라는 ID 값을 가진 항목을 클릭할 때만 트리거가 작동하게 됩니다.
위와 같이 설정을 했다면 저장을 눌러 모든 변동사항을 저장합니다. 이렇게 클릭 이벤트 작동을 위한 트리거 설정을 마쳤습니다. 앞서 설명한 방법 의외에도 링크 내용을 사용하는 방법, 클릭하는 항목의 텍스트를 이용하는 방법 등 여러 가지 트리거 설정 방식이 있고, 정답은 없기 때문에 목적에 맞게 선택하시는 것을 추천합니다.
2. 구글 태그 관리자에서 이벤트 태그 만들기 & 추적 이벤트 추적 확인하기
트리거를 설정했다면 본격적을 태그를 만들어봐야겠죠! 클릭 이벤트 태그를 만들기 전, 구글 애널리틱스에서 이벤트를 추적하기 위해서는 어떤 데이터가 필요한지에 대해서 먼저 짚고 넘어가야 합니다. 앞서 설명한 대로 구글 애널리틱스에서 특정 이벤트를 추적하기 위해서는 기본적으로 두 가지 값이 필요합니다. 바로 이벤트 카테고리와 이벤트 액션인데요, 반드시 필요한 이 두 가지 외에 통상적으로 이벤트 라벨까지 총 세 가지 값을 이용해 이벤트를 추적합니다. 구글 태그 관리자에서는 이 세 가지 정보를 태그에 아주 간편하게 입력할 수 있습니다.
이벤트 카테고리, 이벤트 액션, 이벤트 라벨은 말 그대로 어떤 이벤트를 추적하려고 할 때, 해당 이벤트를 어떻게 구분할 것인지를 설정해 주는 것입니다. 이번 포스팅의 실습 시나리오인 웹사이트 상단에 있는 GNB 메뉴 중 하나인 “문의하기” 메뉴 버튼을 홈페이지에서 눌렀다고 가정해보죠. 이 경우 구글 태그 매니저에서 이벤트 태그를 만들 때 정보를 어떻게 입력하면 좋을까요? 필요한 데이터를 아래 스크린샷과 같이 입력해 태그를 만들 수 있겠습니다.
구글 태그 관리자를 이용한 구글 애널리틱스 이벤트 태그 생성 예시 스크린샷입니다. 태그 > 새 태그 만들기에서 세부 정보 입력이 가능합니다.
값을 직접 지정한 이벤트 카테고리와 이벤트 액션과는 다르게 이벤트 라벨은 구글 태그 매니저에서 기본적으로 제공하는 {{Page Path}}라는 변수를 사용했습니다. 구글 태그 관리자에서 제공하는 다양한 기본 변수 또한 개발 지식이 적은 마케터에게 큰 장점으로 작용합니다. 기본적으로 제공되는 Page Path 변수를 이벤트 라벨로 지정하면 따로 자바스크립트 코딩을 하지 않아도 어떤 페이지에서 해당 이벤트가 일어났는지 손쉽게 확인할 수 있습니다.
태그 작동 조건을 판단하는 트리거는 미리 만들어놓은 GNB Click – 문의하기 Trigger를 지정해 해당 태그가 문의 버튼을 눌렀을 경우에 구글 애널리틱스에 전달되도록 해야 합니다. 트리거가 제대로 작동하지 않거나, 다른 트리거를 이용한다면 큰 문제가 생기기 때문에 태그와 트리거의 이름은 되도록이면 직관적으로 각자 상응하는 태그/트리거가 무엇인지 알 수 있도록 지정하는 것이 중요합니다.
구글 태그 관리자에서 제공하는 다양한 기본 변수 또한 개발 지식이 적은 마케터에게 큰 장점으로 작용합니다. 구글 태그 관리자를 통해 위와 같이 이벤트 태그를 적용하게 되면 구글 애널리틱스 이벤트 보고서에서 아래와 같은 화면을 볼 수 있습니다. 구글 애널리틱스에서는 구글 태그 매니저를 통해 미리 적용한 정보가 표시됩니다.
구글 애널리틱스 이벤트 보고서에서는 구글 태그 관리자에서 설정한 이벤트 카테고리, 이벤트 액션, 이벤트 라벨 별로 해당 이벤트가 있었던 횟수를 보여줍니다. 또한 미리 값을 지정해놓았던 이벤트 카테고리와 액션과 달리, {{Page Path}}변수로 지정했던 이벤트 라벨은 해당 이벤트가 어디에서 일어났는지 표시해서 보여줍니다.
3. 구글 애널리틱스에서 목표 설정하기
구글 태그 관리자를 이용해 클릭 이벤트를 위한 트리거와 태그 설정을 마쳤고, 구글 애널리틱스에서도 데이터가 들어오는 것을 확인했다면 마지막으로 목표 설정을 해야겠죠. 구글 애널리틱스에서 목표를 설정하는데 구글 태그 관리자가 꼭 필요한 것은 아니지만 특정 이벤트를 목표로 설정할 때 구글 태그 관리자에서 설정해놓은 이벤트 카테고리, 이벤트 액션 등이 정확한 목표 설정에 큰 도움이 되는 것은 부정할 수 없습니다.
구글 태그 관리자로 웹사이트 방문자들의 특정한 행동을 이벤트 태그로 추적이 가능하게 만들고, 각각의 행동에 다른 가치를 부여하면 더 자세하고 정확한 통계를 낼 수 있을 것입니다. 구글 애널리틱스에서 목표를 설정하기 위해선 “관리 > 보기 > 목표”에서 새로운 목표를 만들어야 합니다. 목표를 설정할 때는 여러 가지 방식으로 진행할 수 있는데, 구글 태그 관리자에서 미리 지정한 이벤트 태그가 감지가 되었을 때마다 목표 전환으로 기록되도록 설정하는 것이 일반적입니다. 앞서 구글 태그를 적용한 문의하기 버튼 클릭 이벤트로 목표 설정을 진행해서 웹사이트 방문자들이 문의하기 버튼 클릭 한 번이 3달러의 가치를 지니도록 설정해보죠!
구글 애널리틱스 목표에 대해 자세한 도움말이 필요하시다면 구글 애널리틱스 공식 가이드라인을 참고하세요.
새로운 목표를 만들기 위해서는 먼저 어떤 종류의 목표를 만들 것인지에 대해서 입력해야 합니다. 구글 애널리틱스에서는 웹사이트와 목표의 목적에 따라 적용이 가능한 목표 템플릿을 제공합니다. 하지만 클릭 이벤트의 경우 기본 제공 목표 템플릿에 포함되는 항목이 아니기 때문에 맞춤 설정을 선택합니다.
클릭 이벤트 목표 설정을 위해 맞춤 이벤트를 선택합니다.
목표 설명에서는 구글 애널리틱스에서 목표를 관리하기 용이하도록 목표에 대한 정보를 입력해야 합니다. 이름만 보고도 한 번에 어떤 목표인지 파악하기 쉽게 직관적인 목표 이름을 정하는 것이 좋습니다. 목표 유형은 구글 태그 관리자에서 이벤트 태그를 적용해 놓았기 때문에 이벤트 유형의 목표로 설정을 하면 됩니다(GNB 메뉴에 있는 “문의하기” 버튼을 누른 사건을 기록하는 것이기 때문입니다).
직관적인 목표 이름과 목표 유형을 설정하는 것이 중요합니다.
마지막으로 목표 세부정보의 이벤트 조건에서 구글 태그 관리자를 통해 적용한 태그 정보를 입력합니다. 아래 예시 화면에서는 태그 관리자에서 입력한 카테고리 값과 액션 값을 입력하고, 라벨 값은 변수로 지정했기 때문에 빈칸으로 남겨두었습니다. 한 번의 이벤트(GNB 메뉴 문의하기 버튼 클릭) 당 3달러의 가치를 지닌다고 할 것이기 때문에 전환 목푯값을 3 달러로 지정하면 됩니다.
모든 입력이 끝났다면 “이 목표 확인” 버튼을 눌러 최근 7일간의 데이터를 기준으로 어느 정도의 목표가 달성되었는지를 확인합니다. 만약 0이 나왔다면 앞선 설정 과정에서 실수가 없었는지 다시 한번 확인하는 것을 권장합니다. 그렇지 않다면 저장을 눌러 새로운 목표를 적용시킬 수 있습니다.
이번 포스팅에서는 개발자의 도움 없이 이벤트를 추적할 수 있도록 웹사이트에 구글 태그 관리자를 이용해 태그를 적용하고, 적용된 태그를 바탕으로 퍼포먼스 측정/목표 설정까지 다루어 보았습니다. 구글 태그 관리자 이벤트 태그 적용과 구글 애널리틱스 이벤트 통계를 이용해 웹사이트 GNB 개선을 적용한 실제 사례가 궁금하시다면 트윈워드 고객사의 실제 사례를 소개한 데이터에 기반한 웹사이트 GNB 메뉴 배열 개선 방법과 실제 사례 포스팅을 읽어보시길 권장합니다.
실제로 트윈워드에서는 검색엔진 최적화 컨설팅을 진행하면서 구글 태그 관리자와 구글 애널리틱스 사용을 권장하고 있습니다. 여러분들도 구글 태그 관리자와 구글 애널리틱스를 이용해 더 정확하고, 더 풍부한 인사이트를 얻으시기를 바랍니다.
