개발자로서 여러분은 언젠가 GTM에서 태그와 트리거를 설정하게 될 것입니다. 만약 React 기반 프로젝트를 위한 GTM 클릭 트리거 시작 방법에 대한 간단한 지침을 찾고 있다면, 제대로 찾아오셨습니다. 단계별로 함께 살펴보겠습니다!
이 글은 React 기반 애플리케이션에서 클릭 트리거를 구성하는 데 필요한 단계를 안내합니다. GTM 관련 핵심 개념을 숙달하면, 원하는 태그 관리 기능을 활용하기 위한 몇 단계의 설정 과정만 남게 됩니다. 그렇다면 Google Tag Manager란 무엇이며, 태그와 트리거 기능은 사용자에게 어떤 이점을 제공할까요?
Google Tag Manager – GTM이란 무엇이며 어떻게 사용하나요?
Google 태그 매니저(GTM)는 기본적인 코드 설정을 거친 후 모든 웹사이트나 모바일 앱에 태그를 간단하게 통합할 수 있는 태그 관리 시스템입니다. GTM을 활용하는 주요 장점은 웹 패널 인터페이스에서 직접 태그 설정을 수정할 수 있다는 점입니다. 이와 더불어, GTM을 다룰 때 이해해야 할 세 가지 기본 개념이 있습니다:
- 태그는 웹사이트 또는 모바일 애플리케이션에서 수집된 분석 데이터를 수집하고 전송하는 코드 조각 또는 트래킹 픽셀(Facebook 픽셀 등)입니다.
- 트리거는 이벤트를 모니터링하고 태그를 실행할 시점을 결정합니다.
- 변수는 태그 또는 트리거에 필요한 추가 데이터와 관련이 있습니다(예: URL이 /some/url일 때 이 태그를 실행).
구글 태그 매니저를 활용하면 어떤 이점이 있습니까?
Google Tag Manager는 직관적이고 포괄적인 웹사이트 및 디지털 마케팅 도구이므로 귀하의 비즈니스와 팀에 여러 이점을 제공합니다. 아래는 Google Tag Manager를 활용할 때 얻을 수 있는 네 가지 주요 장점입니다.
1. GTM은 코딩 지식을 필요로 하지 않습니다
Google Tag Manager를 사용하면 마케터를 포함한 누구나 상당한 기술적 지식 없이도 태그를 구현할 수 있습니다. 사용자 친화적인 인터페이스 덕분에 웹 개발자의 도움 없이도 사용자가 GTM 추적 코드를 변경, 삭제 또는 추가할 수 있지만, 해당 분야의 배경 지식이 있는 것을 권장합니다. 이를 통해 기술 지원이 부족한 소규모 기업도 인터넷 추적을 극대화할 수 있습니다.
2. GTM은 유연성과 실험을 가능하게 합니다
GTM은 웹 개발자를 필요로 하지 않기 때문에 마케터가 다양한 기술과 개념을 실험하고 테스트할 수 있게 해줍니다. 이를 통해 외부 지원 없이도 새로운 디지털 마케팅 트렌드에 맞춰 실험을 실행하고 마케팅 계획을 개선할 수 있습니다.
3. GTM은 더 빠른 페이지 로딩 속도를 지원합니다
Google Tag Manager는 태그를 동기 방식이 아닌 비동기 방식으로 실행하도록 구성되어 있습니다. 이는 모든 태그가 실행될 때까지 기다리는 대신, 각 태그가 로드 직후에 즉시 배포됨을 의미합니다. 이를 통해 로딩 속도가 느린 태그가 다른 태그의 배포를 방해할 가능성을 방지합니다.
4. 모든 것을 한 곳에서 관리하는 GTM
GTM은 모든 GTM 추적 코드를 별도의 플랫폼에서 개발하고 관리하는 대신 단일 위치에서 유지 관리하므로 태그를 적용하는 전체 프로세스를 단순화하고 향상시킵니다. 단일 인터페이스에서 배포된 모든 태그를 생성하고 볼 수 있는 기능은 중복과 잠재적인 실수를 방지하여 생산성을 크게 높여줍니다.
Google Tag Manager의 목적은 무엇인가요?
GTM은 무한한 수의 웹사이트 및 디지털 마케팅 활동을 추적할 수 있는 역량을 갖추고 있지만, 대부분의 조직은 그중 소수만을 활용합니다.
- 다운로드
- 스크롤
- 클릭
- 양식
- 동영상
1. PDF 다운로드 모니터링
많은 기업이 디지털 마케팅 전략의 일환으로 가이드라인이나 백서와 같은 다운로드 가능한 PDF를 웹사이트에서 제공합니다. 하지만 다운로드와 관련된 통계 데이터에 접근할 수 없다면, 효과적인 계획을 세우는 데 큰 차질이 생깁니다.
Google Tag Manager는 PDF 다운로드를 모니터링하고 그 성과를 평가하는 데 활용됩니다. 다운로드를 추적할 수 있게 되면, 수집된 데이터를 유용한 인사이트로 변환할 수 있습니다.
- 최상위 및 최하위 다운로드 항목을 결정합니다.
- 다운로드가 성공했는지 또는 실패했는지에 대한 원인을 파악합니다
- 다운로드를 강화하기 위한 전략을 고려하고, GTM을 사용하여 진행 상황을 모니터링하십시오.
2. 스크롤 동작 추적
웹사이트 및 페이지에서의 스크롤 활동을 감지하는 GTM의 기능 또한 이를 활용해야 하는 또 다른 이유입니다.
사용자들이 웹사이트 콘텐츠를 탐색하고 참여하는 방식을 이해하면 사이트 활동에 대한 귀중한 정보를 얻을 수 있습니다.
- 어떤 페이지 영역이 자주 방문되나요?
- 어떤 정보가 더 매력적인가요?
- 대부분의 방문자가 스크롤을 멈추는 지점
수집된 GTM 데이터를 통해 대다수 사이트 사용자가 각 페이지를 어떻게 탐색하는지에 대한 포괄적인 그림을 그릴 수 있습니다. 그 대가로, 귀하는 웹사이트의 사용자 경험을 향상시키기 위한 전략을 개발할 수 있습니다.
- 사이트 구조를 설계하는 방법
- 어떤 자료를 공유하시나요?
- 개선이 필요한 위치
3. 링크 클릭 통계 및 기록
방문자가 웹사이트에서 클릭한 정확한 URL을 포함하여 링크 클릭을 추적할 수 있는 기능은 Google Tag Manager의 장점입니다. 사용자의 스크롤 동작뿐만 아니라 클릭 활동까지 파악하면 웹사이트 내에서의 여정에 대한 중요한 인사이트를 얻을 수 있습니다.
- 귀하의 사이트 방문자가 1 페이지에서 다른 페이지로 어떻게 이동합니까?
- 어떤 콜 투 액션(CTA)이 가장 많은 클릭을 유도하나요?
귀하는 링크 클릭을 이해할 뿐만 아니라 이 데이터에 따라 조치를 취하기 위해 구글 태그 매니저를 활용해야 합니다.
- 전환을 극대화하기 위해 몇 번의 클릭만으로 사이트를 새로 고침하거나 여러 번의 클릭으로 페이지를 검토하십시오.
- 어떤 요소가 CTA의 높은 클릭률에 기여하는지 파악하고, 클릭률이 낮은 CTA의 카피를 수정하는 방법을 배워보십시오.
4. 양식 제출 추적
뉴스레터 구독, 설문 조사 완료 또는 이벤트 등록은 모두 웹사이트에서 특정 목적과 기능을 가진 양식의 예시입니다. GTM은 정확한 양식 제출 추적을 보장합니다.
양식 추적을 위해 Google Tag Manager를 사용하는 이유:
- 양식 제출을 통해 생성된 웹사이트 리드를 보고합니다.
- 제출된 양식 수를 기준으로 캠페인의 ROI를 계산하십시오.
5. 비디오 활동 모니터링
동영상은 점점 더 인기를 얻고 있는 디지털 마케팅 전략입니다. 동영상 콘텐츠의 확산에 따라 사람들이 정보와 어떻게 상호작용하는지 이해하는 것이 필요합니다.
- 개별 사용자들이 영상을 시청한 방식
- 그들이 클립을 얼마나 오래 시청합니까?
- 만약 그들이 비디오 시청을 마쳤다면
귀하의 영상에서 확보한 데이터는 조직의 영상 전략을 수립하는 데 유용한 정보를 제공할 수 있습니다.
- 향후 영상이 제작되는 방식
- 귀하의 타겟 독자는 어떤 콘텐츠를 선호하나요?
- 귀사의 고객을 위한 이상적인 영상 길이
GTM 계정 생성
무료 계정을 설정하는 것은 간단한 2단계 절차이지만, 기존의 Google Analytics 및 Gmail 계정과는 별개입니다. 원활한 계정 설정을 돕기 위해 계정 생성 절차를 문서화했습니다. 인터페이스는 다음과 같은 모습이어야 합니다:
진행 방법은 다음과 같습니다:
단계 #1 계정 등록하기.
Google Tag Manager 페이지에서 녹색 "Sign Up for Free" 버튼을 클릭하십시오. 계정 이름(비즈니스), 국가, 웹사이트 URL과 Google Tag Manager를 사용하고자 하는 위치(web, iOS, android, AMP)를 요청받게 됩니다. 완료되면 파란색 "Create" 버튼을 클릭하십시오.
단계 #2 사이트에 js 코드 삽입하기
그러면 페이지의 head> 상단에 배치할 코드 하나와 body> 시작 태그 뒤에 배치할 다른 코드 하나, 총 두 개의 코드와 지침이 제공됩니다. 이 작업을 지금 수행하거나 나중에 웹사이트에 코드를 적용할 수 있습니다(코드는 대시보드에서 확인할 수 있습니다). 완료되면 "확인"을 클릭하십시오.
단계 #3 태그 생성하기
Google Tag Manager 계정을 생성하고 나면, 즉시 태그를 설정하는 방법을 이해하고 싶을 것입니다.
Google 태그 매니저를 사용하면 무한한 수의 태그 설정을 할 수 있습니다.
이는 타겟 고객의 행동에 대한 심층 보고서를 작성하는 데 유용하지만, 태그가 잘 정리되어 있지 않으면 비효율적일 수 있습니다.
Google은 태그에 대해 다음과 같은 명명 표준을 제안합니다: 태그 유형 – 앱 이름 – 세부 사항.
예를 들어, 하나의 태깅 설정을 "AdWords conversions – iOS – February 2018 campaign"로 식별하고, 다른 하나를 "Google Analytics – CTA – About Us page"로 식별할 수 있습니다.
따라서 특정 캠페인이나 사이트와 관련된 데이터를 정확하게 식별하고 수집할 수 있습니다.
예를 들어, 두 번째 태그인 "Google Analytics – CTA – About Us page"는 귀사의 About Us 콜 투 액션(CTA) 버튼의 성과를 나타냅니다. 이 정보는 매우 중요하며, 만약 태그 이름을 "CTA 버튼"과 같이 일반적인 이름으로 지정할 경우 해당 정보가 유실될 수 있습니다.
이제 내용이 명확해졌으므로, 태그를 생성하는 방법을 살펴보겠습니다:
단계 #3.1 Google Tag Manager 대시보드에서 새 태그를 생성합니다.
Google Tag Manager 대시보드에서 "새 태그 추가"를 클릭하십시오(아래 빨간색 원 표시).
단계 #3.2 태그를 설정합니다.
페이지 상단의 "Tag Configuration" 상자 내 아무 곳이나 클릭하여 태그 유형을 선택하십시오.
아래에 코드를 직접 추가하거나, 다음 단계에서 템플릿으로 시작할 수 있습니다.
단계 #3.3 태그 유형을 선택합니다.
여러 태그 종류가 있습니다(여기에는 모두 표시되지 않으며, 태그 유형을 사용자 정의할 수도 있습니다). 앱과 웹사이트에 대한 Google Analytics 웹페이지 방문자 모니터링을 설정하려면 "Google Analytics 4"를 선택하십시오.
단계 #3.4 웹사이트의 GA4 링크 연결
측정 ID를 입력할 수 있는 상자가 나타납니다. 계정에서 측정 ID를 복사하여 이 필드에 붙여넣으십시오.
*그 전에, 반드시 완료해야 합니다 귀하의 웹사이트에 대한 GA4 설정.
단계 #3.5 트리거를 선택하여 태그가 기록되는 시점을 결정합니다.
트리거를 선택하십시오(트리거는 "사용자가 페이지를 볼 때마다"와 같이 태그를 기록하고자 하는 시점을 의미합니다). 저는 모든 웹 페이지가 조회될 때마다 데이터를 받기 위해 "모든 페이지"를 선택했지만, 귀하의 선택은 목표에 따라 달라질 수 있습니다.
단계 #3.6 태그를 저장합니다.
"Tag Configuration" 및 "Triggering" 상자의 정보가 만족스러우면 파란색 "Save" 버튼을 클릭하십시오.
단계 #4 "제출" 버튼을 눌러 태그를 활성화합니다.
그 후 파란색 "Submit" 버튼을 클릭하십시오. 그렇지 않으면 태그가 작동하지 않습니다.
"제출"을 클릭하면 이 "제출 구성" 페이지가 로드됩니다. 사용 가능한 옵션은 "게시 및 버전 생성"과 "버전 생성"입니다. 저는 태그를 사이트의 모든 페이지에 적용할 준비가 되었기에 "게시 및 버전 생성"을 선택한 후 화면 우측 상단의 파란색 "게시" 버튼을 클릭했습니다.
단계 #5 태그를 정리할 수 있도록 이름과 설명을 추가합니다. [선택 사항]
마지막으로, 이 "컨테이너 버전 설명"이 표시됩니다. 태그의 구조를 유지하려면 각 태그에 이름을 지정하고, 해당 태그로 무엇을 캡처하려고 하는지 설명하는 설명을 입력하십시오.
WordPress를 위한 Google Tag Manager
귀사의 조직이 웹사이트 호스팅을 위해 WordPress를 활용한다면, WordPress에 Google Tag Manager를 통합하는 것은 간단한 노코드 절차입니다.
Site Kit은 Google에서 제작한 공식 WordPress 플러그인입니다. Site Kit은 Google Tag Manager와 같은 필수 Google 도구의 설치 및 구성을 간소화하며, 웹에서 성공하기 위한 신뢰할 수 있는 최신 가이드를 제공합니다. Site Kit이 지원하는 Google 제품 목록을 검토해 보세요.
진행 방법은 다음과 같습니다:
1. WordPress 계정에 로그인하십시오.
2. 사이트가 유지 관리 모드이거나 비밀번호로 보호되지 않는, 즉 공개적으로 접속 가능한 상태인지 확인하십시오.
3. 왼쪽 메뉴에서 플러그인을 클릭하십시오.
4. 플러그인 페이지 상단에서 '새로 추가'를 클릭한 다음 "Site Kit"을 검색하십시오.
5. Google Site Kit 페이지에서 지금 설치를 클릭하십시오.
6. 플러그인이 설치되면 왼쪽 메뉴에서 플러그인을 선택하십시오.
7. "Site Kit by Google" 아래의 활성화 클릭
8. 플러그인이 활성화되면 왼쪽의 Site Kit을 클릭하십시오.
9. Google 계정으로 로그인하려면 Google 계정으로 로그인을 클릭하십시오.
10. 마법사를 통해 Google Tag Manager 및 Google Analytic 4를 활성화하십시오.
11. 권한을 부여한 후 계속 진행을 클릭하여 사이트 소유권을 확인하십시오.
12. 허용을 선택하여 Google 계정 정보에 대한 액세스를 허용하십시오.
13. 사이트를 Search Console에 추가하려면 사이트 추가 버튼을 클릭하십시오.
14. 플러그인 설정이 성공적으로 완료되었습니다.
15. 계속하려면 '내 대시보드로 이동'을 클릭하십시오.
16. 왼쪽 메뉴에서 사이트 키트와 대시보드를 선택하십시오.
17. 분석 헤딩 아래의 Click Connect 서비스를 이용하십시오.
18. 계속하려면 계속을 클릭하여 더 많은 권한을 제공하십시오. Site Kit에 Google 계정에 대한 확장 액세스 권한을 제공하고 WordPress를 Google Analytics에 계속 통합하는 방법입니다.
19. 이미 존재하는 분석 속성을 선택한 다음, 분석 구성(Configure Analytics)을 클릭하십시오.
이제 분석 설정이 완료되었습니다.
마치며
Google Analytics 4 및 Google 태그 매니저를 사용하면 더욱 정보에 입각한 마케팅 결정을 내릴 수 있으며 고객 활동 추적 기능이 크게 향상됩니다.
GTM을 사용하여 이 최신 버전을 구현하고 GA4가 제공하는 유연성을 활용하십시오.
GA4 및 GTM 설치 지원이 필요하신가요? 아니면 GA3에서 GA4로 Google 태그를 마이그레이션하고 싶으신가요? 저희가 도와드리겠습니다. 언제든지 문의해 주세요. 문의하기 저희와 함께하세요!