분류 기타

Google 태그 관리자를 사용하여 Google 웹 로그 분석 및 기타 마케팅 태그를 유지 관리하는 방법

컨텐츠 정보

  • 조회 540 (작성일 )

본문

웹 사이트나 앱에서 코드 스니펫과 픽셀을 관리하여 트래픽을 측정하는 것은 특히 스트레스가 많은 마케팅 팀이 있는 경우 특히 스트레스가 될 수 있습니다. 

운 좋게도 Google 태그 관리자와 같은 도구를 사용하면 좀 더 쉽게 풀 수 있습니다.


https://www.freecodecamp.org/news/how-to-use-google-tag-manager-to-maintain-google-analytics-and-other-marketing-tags/ 


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


어떤 종류의 분석 소프트웨어를 사용해 본 적이 있거나 마케팅 팀과 함께 일한 적이 있다면 아마도 픽셀이라는 단어를 들어봤을 것입니다. 픽셀은 말 그대로 이미지 요청을 통해 서버에 정보를 보내는 1x1 이미지입니다.

google-analytics-pixel-request.jpg 

Google 웹 로그 분석 픽셀 요청


픽셀은 여전히 ​​흔하지만 많은 팀이 HTML의 나머지 부분과 함께 작은 자바스크립트 스니펫으로 이동했습니다. 

브라우저가 자바 스크립트를 실행하지 않는 경우 Google 애널리틱스와 같은 소프트웨어가 페이지에서 자체 스크립트를 실행할 수 있으며 때로는 픽셀 백업으로도 가능합니다.


crazy-egg-tracking-snippet.jpg 

크레이지 에그 스니펫


이 픽셀과 스니펫은 훌륭하게 작동합니다. 그러나 많은 데이터를 처리 할 때 모두 동일한 데이터를 사용하는 경우 관리가 불가능한 일회용 코드 스니펫이 제대로 작동하지 않는 것처럼 추가 할 수 있습니다.


Google 태그 관리자 또는 GTM은 이러한 픽셀 및 스니펫을 관리하기 위한 소프트웨어 솔루션입니다. 시작하기 위해 GTM은 코드 스니펫 자체이므로 다른 코드 스니펫과 거의 비슷하게 작동합니다. 그러나 빛나는 곳은 GTM 내부의 데이터 흐름과 함께 나머지 픽셀 및 스니펫을 관리하여 코드 내에서 관리 할 수 있는 유일한 스니펫이라는 점입니다.


왜 사용하고 싶습니까? 


코드 변경 횟수 감소, 배포 횟수 감소 


대부분의 경우 코드에서 이러한 스니펫을 관리하는 경우 변경 사항을 가져 오려면 각 변경 사항마다 다른 병합 요청과 다른 배치가 필요합니다. 코드를 다시 변경해야 하므로 위험이 더 커질 뿐만 아니라 배포 파이프 라인을 처리하고 모든 것이 제대로 작동하는지 확인하는 데 시간이 더 걸립니다.


GTM을 사용하면 해당 흐름에서 벗어날 수 있어 UI 오류를 수정하는 데 필요한 통찰력을 제공하거나 결론에 약간의 부담을 줄 수 있는 변경 사항을 보다 유연하게 얻을 수 있습니다.


보다 관리 하기 쉬운 데이터 흐름 


응용 프로그램 전체에 걸쳐 다양한 변수를 모두 정리하여 올바른 위치에서 모든 변수를 사용할 수 있는지 확인하고 변경 사항을 피하지 않는 것이 어려울 수 있습니다. 또한 코드가 깨지기 쉽고 부서지기 쉽습니다.


Google 태그 관리자는 dataLayer라고 부르는 것을 활용합니다. dataLayer는 기본적으로 청취하는 이벤트 배열처럼 작동합니다. 이를 통해 GTM 자체에서 사용할 수 있도록 새 데이터를 푸시하거나 시드할 수 있습니다. 이는 코드에서 모든 변수를 한 지점으로 퍼널링 한다는 의미입니다. 이를 통해 GTM을 관리하는 사람은 나머지 작업을 수행 할 수 있습니다. 10 개 지점 중 1 개를 업데이트 한 것을 잊어 버린 후에도 데이터 흐름이 중단되지 않음을 알고 안심하고 해당 데이터를 사용할 수 있습니다.


마케팅 담당자에게 조금 더 액세스 할 수 있는 기능 


마케팅 팀이 태그 변경에 대한 중개인이 아닌 태그 변경을 처리하도록 하여 시간을 절약 할 수 있는 기회입니다. 분석 소프트웨어의 ID를 조정해야 하거나 Crazy Egg를 추가하고 싶을 수도 있습니다. 올바른 권한 (나중에 설명)을 사용하면 게시하기 전에 모든 작업을 수행하고 검토를 위해 변경 사항을 보낼 수 있습니다.


이것이 Google 웹 로그 분석과 어떤 관련이 있습니까? 


직접적인 관계는 없습니다. 그러나 Google Analytics와 함께 GTM은 Google Marketing Platform의 또 다른 도구이며 Google Analytics 설치를 보다 쉽게 ​​관리 할 수 있는 즉각적인 기능을 제공합니다. GA에는 GTM 내부에 사전 구축 된 태그가 포함되어있어 설정하기가 쉽습니다.


이것을 위해 다른 무엇을 사용할 수 있습니까? 


Google 웹 로그 분석은 이 코드를 사용할 수 있는 많은 코드 스니펫 중 하나입니다. 이상적으로는 전체 사이트를 여기에 쓰지 않을 것입니다. 그러나 Google이 멀웨어로 간주하지 않는 한 자신의 사이트에서 원하는 모든 작업을 수행 할 수 있습니다.


다른 사용 사례에는 다음이 포함됩니다.

위의 예제와 같이 많은 기능이 있으므로 코드를 망칠 필요가 없습니다. ID 또는 설정을 추가하고 이동하십시오. 그러나 필요한 사용자 정의 솔루션 또는 태그에 대해 언제든지 HTML을 수동으로 설정할 수 있습니다.


뛰어 들기 전에 알아야 할 것이 있습니까? 


바로 뛰어 들기 전에 이 라이딩을 조금 더 쉽게 할 수 있는 몇 가지 핵심 용어를 숙지하십시오.


Tags 


GTM의 태그는 픽셀 또는 코드 스니펫입니다. 태그에는 하나의 함수에 사용되는 포함 된 코드 조각의 단일 인스턴스가 포함됩니다.


예 : Google 웹 로그 분석 스니펫은 하나의 태그가 되고 Crazy Egg를 추가하면 다른 태그가 됩니다.


Variables 


변수는 미리 결정된 값 또는 동적 값을 제공하는 이름입니다. 변수는 다양한 다른 것을 기반으로 할 수 있으므로 이름은 "variable"입니다. 그러나 그것은 당신이 제공하고 참조 할 수 있는 단일 이름으로 사용되며 그것을 사용할 때 절대 바뀌지 않을 것입니다.


예 : Google 웹 로그 분석 ID를 변수로 설정합니다. 즉, GA 태그 자체에서 해당 변수를 사용하게 됩니다. 해당 ID를 업데이트해야 하는 경우 태그 또는 변수를 사용하는 다른 태그를 수정할 필요가 없습니다. 변수 자체 만 업데이트 하면 됩니다.


Triggers 


트리거는 태그를 실행하거나 로드하는 이벤트 또는 동작입니다. 이는 전체 또는 특정 페이지가 로드 될 때, 클릭 할 때 또는 완전히 사용자 정의 된 이벤트가 있을 때와 같이 다양한 방법으로 발생할 수 있습니다.


예 : Google 웹 로그 분석을 설정하면 페이지가 로드 될 때 트리거 됩니다.


Container 


GTM을 사용하면 조직 내의 여러 "컨테이너"또는 태그 그룹을 관리 할 수 ​​있습니다. 이것은 다른 웹 사이트 속성을 가진 회사가 하나 있을 때 유용합니다.


예 : 귀하는 모회사의 소규모 회사입니다. 모회사는 하나의 조직을 유지하려고 하지만 각 소규모 회사는 태그와 코드 스니펫에 대한 개별 요구가 있으므로 자체 컨테이너를 가져옵니다.


어떻게 설정합니까? 


계정 설정하기 


가장 먼저 해야 할 일은 계정을 설정하는 것입니다. 태그 관리자 홈페이지로 이동 한 후 기존 Google 계정을 사용하고 싶을 것입니다. 조직에 조직을 설정 한 경우 비즈니스 이메일을 사용하고 싶을 수 있습니다. 그렇지 않으면 개인 계정도 정상적으로 작동합니다.


다음으로 새로운 GTM 계정을 만듭니다.


google-tag-manager-new-account.jpg 



일단 거기에, 양식을 적절히 작성하십시오. 계정 이름은 계층의 최상위 수준을 나타내며 컨테이너 이름은 특정 설치 인스턴스를 나타냅니다.

google-tag-manager-new-account-container.jpg 

Google 태그 관리자 새 계정 컨테이너


대상 플랫폼은 어느 것이 적합한 지 선택하십시오. 웹 사이트 또는 웹앱 인 경우 웹이 가장 적합합니다.


스니펫 찾기 및 설치 


이용 약관에 동의하고 생성을 누르면 바로 작은 모달로 스니펫이 표시됩니다. 정확히 말한 대로 지침에 따라 스니펫을 설치해야 합니다.


google-tag-manager-install-snippet.jpg 

Google 태그 관리자 설치 스니펫


화면이 나타나지 않거나 실수로 종료되지 않았습니까? 상단 탐색 메뉴에서 관리자로 이동하여 오른쪽의 컨테이너 아래에서 Google 태그 관리자 설치를 클릭하여 스니펫을 다시 찾을 수 있습니다.


작동하는지 테스트 


작동하는지 확인하기 위해 몇 가지 사항을 확인하겠습니다.

  • 우리는 계정을 만들었습니다
  • 컨테이너를 만들었습니다
  • 페이지에 Google 태그 관리자 스니펫을 설치했으며 변경 사항이 적용되었습니다

이러한 사항이 모두 충족되면 페이지 오른쪽 상단의 미리보기 버튼을 클릭하십시오.


google-tag-manager-preview.jpg 

Google 태그 관리자 미리보기


성공하면 페이지 상단에 미리보기 모드라는 주황색 배너가 표시됩니다.

google-tag-manager-preview-mode.jpg 

Google 태그 관리자 미리보기 모드


이제 GTM을 설치 한 웹 사이트로 이동하면 페이지 하단에 배너가 표시됩니다. GTM의 미리보기 작업을 위한 디버거 역할을 합니다.


google-tag-manager-debugger.jpg 

Google 태그 관리자 디버거


당신은 그것과 비슷한 것을 보게 될 것입니다. ?


참고 : GA와 유사한 광고 차단기가 있는 경우 설치 중인 페이지에서 광고 차단기를 사용 중지해야 작동 할 수 있습니다.


멋지다. 구글 애널리틱스는? 


기본 GTM 설치 작업이 완료되었으므로 Google 웹 로그 분석을 설정하겠습니다. 먼저 준비를 하고 싶으므로 Tag Manager 대시 보드로 다시 넘어가겠습니다.


설정 변수 생성 


왼쪽 사이드 바에서 변수로 이동 한 다음 사용자 정의 변수 옆에 있는 새로 만들기를 클릭하십시오.

google-tag-manager-new-variable.jpg 

Google 태그 관리자 새로운 변수


이름으로 'GA 설정'을 입력하고 변수 유형 아래를 클릭하여 Google 웹 로그 분석 설정을 선택합니다. 해당 입력란에 Google 웹 로그 분석 추적 ID (또는 속성 ID)를 입력하고 마지막으로 저장을 클릭하면 새로운 설정 변수가 생깁니다.


새 GA 태그 만들기 


왼쪽 사이드 바에서 태그로 이동 한 다음 태그 옆에 있는 새로 만들기를 클릭하십시오.


google-tag-manager-new-tag.jpg 

Google 태그 관리자 새 태그


이름으로“GA-All Pages”를 입력하십시오. 태그 유형 아래에서 오른쪽에서 튀어 나오는 패널에서 Google 웹 로그 분석 : 범용 웹 로그 분석을 클릭하여 선택합니다.


태그 유형을 선택한 후 Google 웹 로그 분석 설정에서 이전 단계에서 변수를 선택하십시오.


그런 다음 트리거 상자 가운데를 클릭하여 새 UI를 열어 트리거를 선택해야 합니다.


google-tag-manager-trigger.jpg 

Google 태그 관리자 트리거


모든 계정을 선택하십시오. 새 계정에 있는 경우 유일한 트리거 여야 합니다. 새로 선택한 트리거를 사용하여 새 태그 UI로 돌아갑니다.


위 작업이 완료되면 UI 오른쪽 상단에서 저장을 클릭 한 다음 새 Google 웹 로그 분석 태그를 저장하고 만듭니다.


GTM이 작동하는지 테스트 


시작하기 위해 GTM을 설치했을 때와 비슷하게 왼쪽 사이드 바에서 개요를 클릭하여 Workspace 홈으로 돌아갑니다. 그런 다음 오른쪽 상단에서 미리보기를 클릭하십시오.


google-tag-manager-debugger-google-analytics.jpg 

Google 웹 로그 분석이 포함 된 Google 태그 관리자 디버거


GTM이 설치되어있는 페이지를 열면 디버거가 다시 표시되지만 이번에는 Google 웹 로그 분석 태그가 로드 됩니다.


아직 끝났나요? 


좀 빠지는. GA가 작동하지만 GA와 GTM이 올바르게 작동하도록 구성을 조정해야 합니다.


페이지 스니펫 업데이트 


Google 웹 로그 분석 및 Google 태그 관리자 스니펫을 업데이트하기 위해 코드를 한 번 더 살펴 보겠습니다.


여기서 설정 한 설치 문제는 GA 지침 및 GTM 내부의 GA를 통해 GA를 설치했다는 것입니다. 이것은 GA가 두 번 설치되었음을 의미합니다. 실제로 GA는 기본 설치에서 1 페이지 뷰를 보낸 다음 GTM을 통해 다른 페이지 뷰를 보낼 수 있습니다. 이를 방지하기 위해 기본 GA 스니펫에서 페이지 뷰를 제거하려고 합니다.


당신이 슈퍼 기본 기본 설치를 가지고 있다면, 나는 당신을 위해 일했고 당신은 계속해서 아래의 스니펫을 복사 할 수 있습니다. [YOUR GA PROPERTY ID]를 GA 속성 ID로, [YOUR GTM CONTAINER ID]를 GTM 컨테이너 ID로 바꾸고 페이지의 기존 GA 및 GTM 설치를 위해 교체하십시오.


<script>
// Set up an initial dataLayer configuration
window.dataLayer = window.dataLayer || [{
  "gaPropertyId": "[YOUR GA PROPERTY ID]"
}];

// Configure gtag and your GA ID
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[YOUR GA PROPERTY ID]');

// Google Tag Manager snippet
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl+'&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', '[YOUR GTM CONTAINER ID]');
</script>

현재 Google 웹 로그 분석 스니펫이 있으면 이를 교체해야 합니다. 그렇지 않으면 가능한 한 <head> 태그의 상단에 있지만 charset 메타 태그 아래에 있어야 합니다.


고급 사용자의 경우 페이지 스니펫과 생성 한 GTM 태그간에 중복 페이지 뷰나 중복 이벤트를 보내지 않도록 하십시오.


GA가 작동하는지 테스트 


위 단계에 따라 GA가 디버거와 함께 표시되는지 확인합니다.


마지막으로 해야 할 일은 Google의 Tag Assistant 확장 프로그램을 사용하여 설치가 작동하는지 확인하는 것입니다. 확장 프로그램을 설치 한 후에는 페이지로 돌아가서 확장 프로그램 UI에서 사용을 클릭하십시오.

google-tag-assistant-record.jpg 

Google Tag Assistant 사용 기록


페이지를 새로 고치면 GA 및 GTM이라는 2 개의 태그가 표시됩니다.


google-tag-assistant-results.jpg 

Google 태그 도우미 결과


내 GA 태그가 파란색이고 귀하의 태그도 파란색 일 수 있습니다. 자세한 내용을 보려면 Google 웹 로그 분석을 클릭하십시오.


google-tag-assistant-implementation.jpg 

Google Tag Assistant 비표준 구현


보시다시피, 건강한 1 페이지 뷰 요청과 비표준 구현 (따라서 파란색)이라는 메모가 있습니다. 이는 기본 페이지 대신 GTM으로 설치했기 때문입니다.


게시 및 배포! 


마지막 단계는 컨테이너를 게시하고 변경 사항을 적용하는 것입니다.

google-tag-manager-submit.jpg 

Google 태그 관리자 제출 버전


개요 UI에서 제출을 클릭하고 이름과 설명을 입력하십시오.


google-tag-manager-version-configuration.jpg 

Google 태그 관리자 버전 구성


마지막으로 게시를 클릭하면 변경 사항이 사이트에 게시 됩니다!


더 알아야 할 것이 있습니까? 


더 많은 이야기를 할 수 있지만 다른 날입니다. 새로운 태그를 추가하고 Google 웹 로그 분석 기능을 탐색하는 데 도움이 되는 수많은 리소스가 온라인에 있지만 GTM에 대해 명심해야 할 몇 가지 사항이 있습니다.


권한 


1,000 명 팀의 모든 마케팅 담당자가 GTM 컨테이너에 대한 공개 액세스 권한을 갖기를 원하지 않을 것입니다. 컨테이너 관리, 검토 및 게시를 담당하는 한 명 또는 몇 명의 직원이 다른 사람을 모두 낮은 액세스 역할로 유지하는 것이 가장 좋습니다. 이를 통해 더 큰 팀 내에서 우발적 인 변경이나 남용을 방지 할 수 있습니다.


보안 


권한은 안전한 설치를 유지하기 위한 첫 번째 단계입니다. 그러나 Google은 추가 단계를 수행하여 코드 오류 확인 및 맬웨어 검사와 같은 몇 가지 작업을 수행합니다. 이것이 훌륭하지만 사이트의 무결성과 상태를 그대로 유지하려면 다른 코드와 마찬가지로 태그의 활발한 검토 주기를 계속 유지하는 것이 중요합니다.


컨벤션 


태그, 변수, 트리거 및 실제로 GTM 내에서 무엇이든 구성 할 때 이름 지정 규칙 및 모범 사례로 시작하는 것이 좋습니다. 물건의 이름을 짓는 다른 방법은 얼마나 많은 사람들이 일하고 있는지에 따라 통제에서 벗어날 수 있습니다. 이렇게 하면 작품을 찾기가 어려워 지므로 컨벤션에서 팀과 합의하여 일찍 사용하고 오른발로 내리는 것이 가장 좋습니다.


단일 페이지 앱 


이는 단일 페이지 앱이 GTM 및 GA 설정에 미치는 영향을 설명하지 않습니다. 여기에서 설정 한 트리거는 페이지가 로드 될 때 발생하며 이는 브라우저가 새 페이지를 로드 하여 정의됩니다. 단일 페이지 앱은 실제로 새 페이지를 로드하지 않습니다. 오히려 앱 내의 JavaScript는 새 페이지가 로드 된 것으로 표시하므로 여기에서 트리거는 첫 번째 페이지 뷰 만 시작합니다. GTM에서 직접 사용할 수 있는 정보는 포함되어 있지 않지만 GA 설명서에는 이러한 유형의 앱 추적에 대한 유용한 정보가 있습니다.


GDPR 


GTM만으로는 (현재) GDPR을 위반하지 않지만, 사용하는 태그가 자신의 입지에 어떤 영향을 미치는지 여전히인지해야합니다. 이 안내서는 이 부분을 다루지 않으므로 숙제를 해야 합니다.


디버거 종료 


한 가지 방법은 쿠키를 지우는 것이지만 항상 GTM 개요 페이지로 이동하여 페이지 상단의 주황색 미리보기 모드 배너 바로 아래에 있는 "미리보기 모드 나가기"를 누르십시오.


무엇 향후 계획? 


여기에서 GTM을 통해 태그 및 픽셀 관리를 시작할 수 있습니다.이를 통해 해당 태그에 단일 한 일관된 데이터 흐름을 제공 할 수 있습니다. 디버거를 실험하고 사용하여 마케팅 측면에서 작업 할 수 있는 새로운 방법이 많이 생겨납니다.



Google 태그 관리자Google 웹 로그 분석