2023년 6월 22일 목요일

구글 태그관리자(GTM) 회원 가입(계정 생성) 및 웹사이트( 블로그)에 태그 관리자 설치 하는 방법

 



구글 태그관리자(Google Tag Manager)는 구글에서 제공하는 온라인 마케팅 도구 중 하나로 웹사이트( 블로그 등) 또는 모바일 앱에서 태그라고 통칭되는 추적 코드 및 관련 코드 스니펫을 쉽고 빠르게 업데이트할 수 있는 태그 관리 시스템입니다. 즉,  ‘태그(tags)’들을 한 곳에 모아 관리할 수 있도록 해주는 도구라고 보시면 됩니다. 웹사이트 데이터를 분석하거나 방문자의 사용 패턴을 추적할 때, 광고를 게재하고 관리할 때 등 여러 용도에서 다양하게 사용할 수 있습니다. 

html 문서를 편집할 필요가 없으며, 자바스크립트 코드를 직접 수정하지 않고 기본 양식(틀)에 값을 넣는 방식을 사용하므로 개발자가 아니라도 손쉽게 기능을 구현할 수 있습니다.

구글 태그관리자(GTM)의 장점

1. 빠르고 효율적

태그를 추가하거나 업데이트할 때 웹사이트의 소스 코드를 수정할 필요 없이, 태그 관리자를 통해 마케터가 직접 태그를 적용함으로써 빠르고 효율적인 작업이 가능합니다.

2. 규칙 기반의 태그 실행

페이지 로드 시점뿐만 아니라 링크/버튼 클릭, 동영상 재생, 스크롤 깊이 등 다양한 조건에서 태그가 실행되도록 설정이 가능합니다. 이에 따라 구글 애널리틱스 이벤트 설정에 의한 사용자 행동 데이터 수집 등 고급 설정이 가능합니다.

3. 사전 테스트

디버깅 툴이 내장되어 있어 태그를 생성한 후 실제 적용에 앞서 태그가 정상적으로 작동하는지 여부를 확인할 수 있습니다.

4. 체계적 관리

소스 코드에서 태그를 추가하는 경우 누가, 언제, 어떤 페이지에, 어떤 코드를 심었는지를 파악하는 게 쉽지 않은 반면, 태그매니저를 사용하여 추가된 태그는 한 눈에 이를 파악할 수 있습니다. 이에 따라 중복 설치나 에러 등을 방지할 수 있고, 태그를 체계적으로 관리할 수 있습니다.
 

구글 태그관리자 계정 생성하기

구글 애널리틱스 4 계정생성과 마찬가지로 구글 계정을 이용할 수 있습니다.

1. 구글 태그관리자 웹사이트(https://tagmanager.google.com)에 접속합니다.

2. 계정만들기 버튼을 클릭합니다.



3. 계정 설정 및 컨테이너 설정을 해야합니다. 계정이름은 보통 "회사명"을 사용하고 국가는 대한민국을 선택합니다. 컨테이너 이름에는 웹사이트 주소 혹은 웹사이트(블로그) 이름을 사용합니다. 하나의 계정 아래 여러 개의 웹사이트를 운영하는 경우 웹사이트별로 컨테이터를 생성하여 사용한다고 보면 됩니다. 


4. "만들기" 버튼을 클릭하여 다음으로 넘어갑니다.


5. Google 태그 관리자 서비스 이용약관 동의 합니다.

"하단에 GDPR에서 요구하는 데이터 처리 약관에도 동의합니다." 체크 후  상단에 "예" 버튼을 클릭합니다.


6. 계정생성(회원가입)이 마무리 되었습니다. Google 태그 관리자 설치 팝업이 나타납니다.



태그관리자를 설치하기 위해서는 본인의 웹사이트 또는 블로그의 HTML 편집기를 열고 

위 2개의 스크립트를 추가해주어야합니다.


내 웹사이트에 태그 관리자 스크립트를 추가하기

구글 블로그에 태그관리자를 추가하는 예시 방법을 보여드리겠습니다.

1. 내 구글 블로그(www.blogger.com)에 로그인합니다.

2. 왼쪽 메뉴에서 "테마"를 선택합니다.

3. "맞춤설정" 버튼을 클릭 후 HTML편집 메뉴를 선택합니다.

4. html 코드 편집기가 열리면 최상단 <head></head>태그 안에 위에서 복사했던 스크립트를 추가해줍니다. 필자의 경우 보통 </head> 태그 바로 위에 추가합니다.

   ..............생략...............

    <!-- Google tag (gtag.js) -->

    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>

    <script>

      window.dataLayer = window.dataLayer || [];

      function gtag(){dataLayer.push(arguments);}

      gtag('js', new Date());


      gtag('config', 'G-XXXXXXXX');

    </script>


<!-- Google Tag Manager -->

<script>(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;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-XXXXXXXX');</script>

<!-- End Google Tag Manager -->

  </head>

  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

<!-- Google Tag Manager (noscript) -->

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"

height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<!-- End Google Tag Manager (noscript) -->

........생략.........

  5. 상단에 디스켓 모양의 아이콘을 클릭하여 저장합니다.


이것으로 태그 관리자 설치가 완료되었습니다.

구글 태그관리자는 작업공간의 개요, 태그, 트리거, 변수, 폴더, 템플릿 항목으로 구성됩니다. 각종 태그 및 태그를 구성하는 트리거, 변수 등을 생성하고 관리하는 작업이 이뤄지는 공간입니다.


이번 포스팅에서는 구글 태그관리자 계정 생성방법에 대해 알아보았습니다. 


[REFERENCE]

구글 태그관리자 고객센터(support.google.com/tagmanager)

구글 태그관리자 개발자문서(https://developers.google.com/tag-manager/quickstart)


Share this

0 Comment to "구글 태그관리자(GTM) 회원 가입(계정 생성) 및 웹사이트( 블로그)에 태그 관리자 설치 하는 방법"

댓글 쓰기