사이트에 Google 태그 관리자를 설치하는 방법
게시 됨: 2022-04-12Google 태그 관리자(GTM)는 웹사이트 및 모바일 애플리케이션에서 태그 작업을 크게 단순화하는 무료 서비스입니다. GTM을 사용하면 페이지의 코드를 쉽게 변경하고 새 조각을 추가하고 사이트를 분석 시스템, 광고 및 기타 서비스와 통합할 수 있습니다.
시작하려면 사이트에 태그 관리자 코드를 설치해야 합니다. 그 후에 다른 모든 설정은 프로그래머의 개입 없이 서비스 인터페이스에서 조정할 수 있습니다. Google 문서에서 Google 태그 관리자 및 Google 애널리틱스와 함께 작동하는 방식에 대해 자세히 알아볼 수 있습니다. 이미 알고 계시다면 시간을 낭비하지 말고 GTM 설치를 진행해 보겠습니다.
간단히 말해서 Google 태그 관리자를 설치하려면 다음이 필요합니다.
- Google 태그 관리자에서 계정 및 컨테이너 생성
- 사이트에 Google 태그 관리자 코드를 설치합니다.
- 컨테이너를 게시합니다.
- Google 태그 관리자를 확인하세요.
1. Google 태그 관리자에서 계정 및 컨테이너 생성
태그 관리자 홈페이지에서 등록 버튼을 클릭하고 Gmail 주소 또는 다른 Google 계정을 사용하여 로그인합니다.
이제 태그 관리자에서 직접 계정을 만들어야 합니다. 이렇게 하려면 태그 관리자에 로그인을 클릭합니다.
다음으로 계정 만들기 를 클릭합니다.
계정 이름을 생각해 보세요. 회사 이름을 사용하는 것이 가장 편리합니다. 그런 다음 국가를 선택하고 Google 및 기타 서비스와 익명으로 데이터 공유 (선택 사항) 옆의 확인란을 선택한 다음 계속 을 클릭합니다.
이제 컨테이너를 구성해야 합니다. Google 태그 관리자의 구조를 Google 애널리틱스의 구조와 비교하면 컨테이너는 GA의 리소스에 해당합니다. 전체 사이트에 대한 태그, 트리거 및 변수를 저장합니다. 하나의 GTM 계정에는 웹사이트, 모바일 애플리케이션, AMP 페이지 등 여러 컨테이너가 있을 수 있습니다. 편리하게 하려면 컨테이너가 생성된 리소스의 이름을 따서 컨테이너 이름을 지정하는 것이 좋습니다. 예를 들어, 이것은 귀하의 사이트 주소일 수 있습니다.
컨테이너 이름을 입력한 후 컨테이너가 사용될 위치(이 예에서는 Web )를 선택하고 만들기 를 클릭합니다.
태그 관리자 사용 규칙을 읽어보세요. GDPR에 따른 데이터 처리 조건에 동의함을 확인하는 페이지 하단의 확인란을 선택한 다음 예 를 클릭합니다.
그런 다음 웹 사이트에 설치해야 하는 GTM 코드 조각이 있는 창이 표시됩니다.
코드를 즉시 복사하여 모니터링하려는 사이트의 모든 페이지에 설치하거나 확인 을 클릭하고 나중에 컨테이너에 첫 번째 태그를 추가할 때 수행할 수 있습니다. 관리 → Google 태그 관리자 설치 에서 언제든지 코드를 보고 복사할 수 있습니다.
2. 사이트에 Google 태그 관리자 코드 설치
웹사이트 개발에 익숙하고 관리자 패널에 액세스할 수 있는 경우 태그 관리자 코드를 쉽게 추가할 수 있습니다. 다음은 WordPress를 통해 이 작업을 수행하는 방법의 예입니다. 그렇지 않으면 여전히 프로그래머에게 도움을 요청해야 합니다. 그렇지 않으면 페이지의 소스 코드가 손상될 위험이 있습니다.
Google 태그 관리자 코드는 두 개의 조각으로 구성되며 비동기식으로 로드됩니다. 즉, 페이지의 주요 부분은 GTM 컨테이너가 로드될 때까지 기다리지 않고 계속 로드됩니다. 코드의 첫 번째 부분은 여는 <head> 태그에 최대한 가깝게 페이지 헤더에 배치해야 합니다.
이는 첫 번째 조각의 위치가 높을수록 더 빨리 로드되기 때문입니다. <body> 태그에 삽입하면 이 태그를 로드하기 전에 페이지를 떠나는 사용자에 대한 데이터가 손실될 위험이 있습니다.
코드의 두 번째 부분은 백업으로 작동하며 JavaScript를 비활성화한 사용자의 작업을 추적하는 데 도움이 됩니다. 여는 <body> 태그 바로 뒤에 위치해야 합니다.
중요한!
GTM 코드는 추적하려는 페이지, 즉 전체 사이트에 직접 삽입해야 합니다. 숨겨진 iframe 에 코드를 배치하거나 다른 태그 관리 시스템에 배포하면 기본 페이지에서 태그를 올바르게 추적할 수 없습니다.
AMP 페이지에 Google 태그 관리자 설치
AMP 기술을 사용하여 모바일 장치용 페이지를 빠르게 로드하고 조정하는 경우 코드의 첫 번째 부분은 닫는 </head> 태그 앞에 배치되어야 합니다.
그리고 코드의 두 번째 부분은 여는 <body> 태그 바로 뒤에 삽입되어야 합니다.
3. 컨테이너 게시
컨테이너에 단일 태그를 추가하지 않았더라도 사이트에 GTM 코드를 설치한 후 즉시 태그를 게시하는 것이 좋습니다. 그렇지 않으면 컨테이너에서 404 오류가 발생합니다. 그러나 이것은 중요하지 않습니다. TrackJS와 같은 특정 서비스를 사용하여 JavaScript 오류를 추적하는 경우 404 오류로 인해 보고서가 엉망이 됩니다. 개발자에게 불필요한 스트레스를 주지 않으려면 아무에게도 해를 끼치지 않는 빈 컨테이너를 게시하는 것이 좋습니다.
컨테이너를 게시하려면 태그 관리자의 작업공간 탭으로 이동하여 오른쪽 상단에 있는 제출 버튼을 클릭하세요.
버전 게시 및 만들기를 선택합니다. 이것은 컨테이너의 첫 번째 버전이므로 버전 설명 필드를 비워 둘 수 있습니다. 다음으로 게시 를 클릭합니다.
완료. 컨테이너가 게시되었습니다.
4. Google 태그 관리자를 확인하세요
사이트에 태그 관리자 코드를 추가한 후 특수 Google Tag Assistant 확장 프로그램을 사용하여 데이터가 올바르게 전송되고 있는지 확인할 수 있습니다. 이것은 귀하의 사이트에 설치된 Google 제품 태그와 작동 방식을 보여주는 Chrome 브라우저에 추가된 것입니다.
추가 기능을 다운로드하여 설치하면 Chrome 툴바에 이 아이콘이 표시됩니다.
. 그것을 클릭하고 확인하려는 시스템 태그와 페이지를 선택하십시오. 완료 를 클릭합니다.
그런 다음 확인하려는 페이지로 이동하여 Tag Assistant 아이콘을 클릭합니다. 확장을 활성화하려면 활성화 를 클릭합니다.
현재 페이지를 새로 고치면 Tag Assistant가 페이지에 설치된 태그와 작동 방식을 보여줍니다. 녹색 아이콘은 데이터가 불만 없이 전송되고 있음을 나타내고, 파란색은 심각한 문제가 없음을 나타내고, 빨간색은 심각한 문제를 나타냅니다.
특정 태그를 클릭하면 오류의 가능한 원인과 해결 방법에 대한 팁을 볼 수 있습니다.
Tag Assistant에 대한 자세한 내용은 Google 도움말에서 찾을 수 있습니다.
몇 가지 추가 팁
사이트에 GTM 코드를 설치할 때 개발자에게 Google 최적화 도구 스니펫을 동시에 추가하도록 요청하세요. 지금 당장 사이트의 콘텐츠를 실험하지 않더라도 이것은 좋은 생각입니다. A/B 테스트를 하고 싶을 때마다 모든 것이 준비되어 있습니다.
이 코드 스니펫은 Google 최적화 도구 컨테이너를 비동기식으로 로드하고 컨테이너가 로드될 때까지 원본 페이지를 표시하지 않는 데 필요합니다. 최적화 스니펫을 사용하면 테스트의 변경사항이 있는 페이지가 로드될 때까지 사용자에게 페이지의 원본 콘텐츠가 표시되지 않습니다.
Google 태그 관리자에 수동으로 삽입한 태그를 전송할 때 데이터가 중복되지 않도록 사이트의 코드에서 태그를 제거하는 것을 잊지 마십시오. 이것은 중요한 포인트입니다.
무엇 향후 계획
사이트에 코드를 설치한 후 태그 관리자 인터페이스에서 태그와 변수를 추가하고 구성해야 합니다. 이를 수행하는 방법을 알아보려면 Google 태그 관리자란 무엇이며 이를 사용하여 Google 애널리틱스를 설정하는 방법 또는 웹 세미나 한 단계 앞서: Google 태그 관리자를 사용하는 기술 및 미묘함 문서를 참조하세요.
추신: 정확하고 완전한 데이터를 기반으로 결정을 내리기 위해 마케팅 분석가가 수행해야 하는 20단계의 체크리스트를 준비했습니다. 양식을 작성하시면 체크리스트를 이메일로 보내드립니다.