[GTM] 구글 태그매니저 설치하는 법

안녕하세요 묵은지입니다.

구글 태그매니저 설치하는 방법에 대해 알려드릴게요!

필요한 부분이 따로 있다면 아래 목록 참고해서 쭉 넘어가시면 되겠습니다😊

 

 

목록

• 구글 태그매니저 사용해야 하는 이유?
• 구글 태그매니저 설치하기(티스토리 버전)
• 구글 태그매니저 설치 후 확인 방법

 

 

구글 태그매니저 사용해야 하는 이유?

사이트를 만들면

1) 유저들이 사이트에서 어떤 행동을 하는지 궁금하고

2) 광고 등을 이용해서 내 사이트로 유저를 데려오고

데려온 유저들이 사이트에서 어떻게 행동하는지 알고 싶어하기 마련이죠!

 

위 니즈 중 1)은 구글 애널리틱스(GA4)를 이용하고,

2)은 메타(페이스북, 인스타) 광고, 구글 광고, 네이버 파워링크 등등

다양한 광고를 활용해서 사이트로 유저를 유입시키죠

 

 

1)번을 사용하기 위해서는 GA 추적 스크립트를,

2)번은 메타 픽셀, 구글 애드워즈 리마케팅, 전환 추적 스크립트 등을 심어야 원하는 정보를 볼 수 있습니다.

 

이 말만 들어도 복잡해 보이는 스크립트들을

모두 사이트에 일일히 심으려면 휴.. 

말 안해도 스트레스가 장난 아니쥬

 

 

 

개발자 분이 계시다면

사이트의 소스코드가 망가지지 않도록

일정한 규칙 안에서 필요한 스크립트를

설치해주시겠지만

 

인력이 충분치 않은 경우, 마케터 혹은 대표님이 직접 진행하셔야 하는 경우가 왕왕 있습니다

 

이 때! 사용하시면 좋은 것이 바로 바로

구글 태그 매니저입지요

 

GTM(Google Tag Manager), 구글 태그 매니저는 

쉽게 말해서 태그 관리 시스템입니다.

 

웹사이트나 모바일 앱에서 스크립트(추적 코드, 코드 조각 등)들을

GTM 하나로 관리할 수 있게 해준다고 보면 되는데요!

 

개발 지식이 없더라도 스크립트를 쉽게 설치, 제거, 수정할 수 있어서 마케터에게도 부담이 없습니다.

 

그리고 GTM 내에서 미리보기로 웹에 적용된 모습을 살펴볼 수 있고,

스크립트 적용시에도 사이트 전체 서버를 배포하지 않아도 됩니다😁

 

 

주절주절 설명했지만!

아래의 이유들로 구글 태그 매니저는 웹/앱을 운영하신다면 꼭 설치하시는 것을 추천드리는 바입니다.

 

 

구글 태그 매니저의 장점(꼭 설치하세용)

1. 개발자, 외주 개발사에 손 벌리지 않고 간편히 작업 가능
2. 디버그(미리보기)로 작업 내용이 잘 작동하는지 체크 가능
3. 웹/앱 서버 전체 배포 없이 GTM안에서 배포하면 됨

 

 

 

구글 태그매니저 설치하기(티스토리 버전)

구글 태그매니저를 설치하는 방법에 대해서 쓸 건데요

저는 우선 제 티스토리 사이트를 기준으로 설치하는 방법을 소개드리겠습니다.

이 글 반응이 좋으면 플랫폼(아임웹, 카페24 등) 별 GTM 삽입 방법에 대해 글을 써볼게요!

 

계정 생성

구글 태그매니저에 접속해주세요

'계정 만들기' 버튼을 클릭해줍니다.

 

계정 설정 값을 입력해줍니다.

계정 이름은 내가 보기 쉬운 이름으로,

국가는 대한민국

 

 

컨테이너 이름의 경우 웹사이트 주소를 넣어줍니다.

타겟 플랫폼은 웹으로 선택해준 후 만들기 버튼 클릭

 

 

이용 약관 체크 박스에 체크한 후 예 버튼을 눌러줍니다.

 

 

 

 

구글 태그 관리자 설치 안내 팝업

짜잔 이 화면이 나오면 계정은 생성된 것입니다.

바로 설치안내 팝업인데요, 이제 이 코드들을 내 웹사이트에 넣어주어야 합니다.

 

*내 웹사이트와 GTM을 한 번만 연결하면,

그 다음에 사이트에 설치해야 할 코드들은

GTM을 통해 설치할 수 있습니다!

 

 

 

구글 태그 관리자 추적 코드 삽입

위의 추적 코드를 복사해서 내 사이트에 넣어줍니다.

모든 페이지에서 불러오는 예를 들어 index.html 파일에 넣어주시면 됩니다.

 

아임웹, 카페24, 워드프레스 같은 홈페이지의 경우

head, body 에 코드를 넣을 수 있는 란이 있을 거예요

해당 란을 찾아서(보통 SEO 라는 이름으로 있는 경우가 많음) 넣어주면 됩니다.

아래 이미지는 아임웹 화면입니다:)

 

 

티스토리 기준으로도 보여드릴게요!

티스토리 설정 > 꾸미기 탭 > 스킨 편집 > HTML 편집 으로 이동해줍니다.

head, body 태그 바로 밑에 구글 태그 관리자 추적 코드를 입력해주었습니다.

모두 마친 뒤 적용 버튼 클릭

 

 

 

 

 

구글 태그매니저 설치 후 확인 방법

자 이제 설치는 완료되었습니다!

사이트에 설치가 정상적으로 완료되었는지 

다시 한번 확인해보면 좋겠죠?

 

내 사이트에서 개발자 도구를 실행해줍니다.

• Window : Ctrl + Shift + I or F12
• Mac : Alt + Command + I

 

개발자 도구 첫 번째 탭(Elements)에서

Ctrl+F를 누른 뒤

"GTM-"을 검색해줍니다.

 

아까 내가 추가한 GTM 코드가 잘 보인다면

정상적으로 설치된 것입니다!

 

 

자 여기까지 따라오시느라 수고 많으셨습니닷

다음번에는 구글 태그 매니저에서 클릭 이벤트 잡는 법에 대해서 글을 적어볼게요><!