워드프레스 구글 애널리틱스 태그 추가하는 법(2) – 구글 태그매니저 사용

워드프레스 구글 애널리틱스 태그 추가하는 법(2) – 구글 태그매니저 사용

구글 태그매니저를 이용해서 구글 애널리틱스 추적코드 삽입하기

이번에는 이전 포스팅에서 발급받은 구글 애널리틱스 추적코드를 구글 태그관리자(Google Tag Manager, 줄여서 GTM)를 이용해 워드프레스 웹사이트에 삽입하는 방법에 대해 알아볼 예정입니다.

아직 구글 애널리틱스 추적코드를 발급받지 않으셨다면?

먼저 구글 태그매니저가 무엇인지 간단하게 살펴본 후, GTM을 이용해서 GA 추적코드를 설치하는 절차를 자세하게 알아보겠습니다.

구글 태그매니저(GTM)란?

구글 태그 매니저(혹은 구글 태그 관리자)는 그 이름에서도 알 수 있듯이 여러가지 태그를 관리하기 위한 도구입니다.

태그(Tag)란?

– 웹사이트에 심어 사용자의 정보를 수집해서 서버로 전송하기 위한 작은 코드 덩어리를 의미한다.

구글 애널리틱스 추적 코드도 태그라고 할 수 있고, 페이스북 픽셀이나 검색포탈 키워드 광고의 전환 추적 코드도 태그에 해당하는데요. 큰 웹사이트나, 특히 쇼핑몰 같은 경우에는 이런 태그들을 발급받고 설치할 일이 많이 생깁니다. 고객의 행동을 추적하고 전환시키기 위해 여러가지 솔루션들을 사용하기 때문인데요. 이때 이용하는 솔루션들이 하나 둘 늘어감에 따라, 앞서 살펴본 구글 애널리틱스 추적 코드를 삽입한 것처럼, 각 솔루션들의 태그를 웹사이트에 삽입해야합니다.

이러한 과정을 쉽고 편리하게 도와주는 도구가 바로 구글 태그 관리자(Google Tag Manager)입니다.ㅈ

구글 태그매니저는 누가, 왜 사용해야 할까?

먼저 ‘누가’ 구글 태그 매니저를 사용해야 할까요?

GTM은 물론 누구나 사용할 수 있는 무료 툴입니다. 하지만 특히 ‘개발 지식이 없거나 부족한‘ 사람들이 웹사이트를 운영함에 있어서 구글 애널리틱스와 같은 여러 솔루션을 사용하고자 할 때 유용합니다. 왜냐하면 웹사이트의 소스코드를 직접 건드리지 않고 편리한 UI에서 태그들을 관리하고 수정할 수 있기 때문인데요. 그래서 비개발자가 사용하기 편하죠.

개인적으로 작은 블로그를 운영하는데는 구글 태그매니저까지는 필요없다고 생각하지만, 관심이 있다면 충분히 활용해봐도 좋습니다. 그리고 그 절차도 그렇게까지 복잡해지지 않으니 더더욱 그렇죠.

구글 태그매니저 사용의 장점은 무엇일까?

구글태그매니저 인터페이스
구글태그매니저 인터페이스
  • 비개발자가 접근하기 쉽다
    • 태그를 삽입해야하는 여러가지 솔루션을 사용하는 경우, 추적코드 삽입이나 제거를 위해 매번 개발자에게 부탁해야하는 번거로움이 있을 수 있는데요. GTM을 활용하면 맨 처음 한 번 세팅을 하고 나면, 비개발자도 쉬운 UI를 활용해 간편하게 여러 솔루션의 태그들을 추가하고 삭제할 수 있습니다. 심지어 처음 설치도 잘 따라하면 굳이 개발자의 도움이 필요없죠.
  • 세밀하고 정교한 분석을 위한 설정이 쉽다
    • 구글 태그매니저를 이용하면 구글 애널리틱스의 기본 설정에서는 추적할 수 없었던 여러 이벤트들을 쉽고 간편하게 추가해서 방문자들의 행동을 추적할 수 있어요. 약간의 코딩 지식이 필요할 수 있으나, 검색을 통해 쉽게 해결할 수 있습니다. 커뮤니티도 방대해 비슷한 고민을 한 사람들이 적어놓은 글들을 참고하면 비개발자도 웹사이트의 소스코드를 직접 만지지 않고 비슷한 일을 해낼 수 있죠.
  • 버전 관리가 자동으로 되어 히스터리 추적과 복원이 쉽다
    • 구글 태그 매니저에서는 사용자가 새로운 태그를 추가하거나 새로운 업데이트를 할때 마다 해당 업데이트 내용을 담은 최신 버전이 생성됩니다. 예를 들어, 현재 버전이 5월 14일 버전이라면, 구글 애널리틱스를 GTM을 통해 추가하고 몇 가지 설정을 한 버전은 5월 17일 버전으로 이름 붙일 수 있습니다. 그리고 그것이 내 웹사이트에 현재 적용 중인 최신 버전이 되는 거죠. 만약 최신으로 업데이트한 버전에 뭔가 오류가 있거나, 추가한 솔루션이 유용하지 않을 때, 이전 버전으로 쉽게 복원할 수 있어 부담이 적습니다.

이 외에도 체계적으로 태그들을 관리할 수 있다는 점, 실제 배포하기 전 내 사이트에서 태그가 제대로 작동하는지 테스트를 할 수 있는 도구를 제공한다는 점 등 구글 태그매니저에는 많은 장점이 있습니다.

본인이 디지털 마케터이거나 고객 행동 데이터 수집에 어느 정도 관심이 있다면 꼭 써보는 것을 추천드립니다.

구글 태그매니저의 작동원리는?

앞선 GTM을 이용하지 않는 구글 애널리틱스 추적코드 삽입에 대한 글을 읽고 왔다면 이 부분에 대한 이해가 쉬울 건데요. GTM을 이용하지 않았을 때는 웹사이트 소스코드에 구글 애널리틱스 추적 코드를 직접 붙여 넣었습니다. 플러그인을 활용했다고 하더라도, 결국에는 그 플러그인이 추적 코드를 웹사이트 특정 부분에 삽입해주는 일을 뒤에서 하고 있었던 것이죠.

이 상황에서 만약 내가 Hotjar라는 고객 행동 분석 솔루션 태그와 Google Ads 광고 전환태그를 삽입해야 한다고 해보죠. 그럼 아래 <그림1>처럼 또 다시 소스코드를 만져야하거나 각 솔루션의 태그를 쉽게 삽입할 수 있게 도와주는 플러그인을 추가로 설치해야하는 경우가 생길 수 있습니다.

다양한 서비스의 태그 직접 삽입하기
<그림 1> 다양한 서비스의 태그 직접 삽입하기

반면, GTM을 이용하면 웹사이트에 구글태그매니저 컨테이너(Container)를 딱 한 번만 삽입하면 됩니다.

이름에서도 알 수 있듯이 컨테이너란 여러가지 태그들을 담는 그릇의 역할을 하는데요. 컨테이너 태그만 내 웹사이트에 삽입되어 있으면, 추가적으로 태그를 삽입하고 싶을 때 구글 태그매니저 사이트에서 간편한 인터페이스를 활용해 쉽게 추가할 수 있습니다. 이때 소스코드를 만지거나 다른 별도의 플러그인을 설치하지 않아도 되는데, 이런 쉬운 과정때문에 비개발자가 많이 이용하는 것이죠.

GTM에서 추가하는 태그들은 이미 웹사이트에 삽입되어있는 구글 태그매니저 컨테이너 태그에 알아서 담긴다고 생각하면 쉽습니다. 아래 <그림2>와 같이 모든 태그들은 GTM 컨테이너에 모이고 GTM에서는 태그들을 한 눈에 보고 관리할 수 있어 편리하죠.

다양한 서비스의 태그 GTM 이용해서 삽입하기
<그림 2> 다양한 서비스의 태그 GTM 이용해서 삽입하기

웹사이트에 구글 애널리틱스 추적코드(tracking code) 삽입하기 – GTM 이용

지금까지 구글 태그 관리자(GTM)에 대해 알아보았는데요. 이제 이 GTM을 활용해서 워드프레스 웹사이트에 구글 애널리틱스 추적코드를 삽입해보겠습니다.

Step 1. 구글 태그매니저(Google Tag Manager) 계정 생성하기

먼저 구글 태그매니저 계정을 생성하기 위해 아래 링크로 공식 사이트로 이동합니다.

https://tagmanager.google.com/

Create account 버튼을 누르면 아래와 같이 계정 생성화면이 뜨는데, 여기서 필요 내용을 입력하고 Create 버튼을 누르면 됩니다.

Google tag manager 계정 생성하기
GTM 계정 생성하기
  1. Account name – 계정명으로 주로 회사명을 사용
  2. Country – ‘South Korea’로 선택
  3. 데이터 공유 옵션 – 데이터를 공유할 것인지 여부를 체크하는 것인데, 마음대로 해도 됨
  4. Container name – 컨테이너명을 입력하는 곳으로 주로 도메인명을 입력
  5. Target platform – 웹사이트를 위해 생성하고 있으므로 Web을 선택

이후 나오는 이용 약관에 동의하고나면 아래와 같이 복잡한 코드가 나오는데, 이게 바로 구글 태그매니저 컨테이너 태그입니다.

구글태그매니저 GTM 컨테이너 태그
GTM 컨테이너 태그의 모습

이 컨테이너 태그를 최초 한 번만 웹사이트에 심어놓으면, 그 다음부터 모든 솔루션의 태그를 추가하고 수정하고 삭제하는 작업들은 구글 태그매니저 유저 인터페이스(UI)를 통해 진행할 수 있게 됩니다.

우선 여기까지 진행하고 다음 step으로 넘어가겠습니다.

Step 2. 웹사이트에 GTM 컨테이너 삽입하기 – gtm4wp 플러그인 사용

구글 태그매니저(GTM)도 구글 애널리틱스와 마찬가지로 솔루션과 본인의 웹사이트를 연결하기 위해 컨테이너 태그를 웹사이트에 삽입해야 합니다.

GA에서 사용했던 방법과 동일하게 직접 소스코드를 수정하는 방법과 플러그인을 활용하는 방법이 있는데 여기서는 구글 태그매니저를 쉽게 설치하고 관리할 수 있도록 도와주는 플러그인을 사용하도록 하겠습니다.

먼저 워드프레스 어드민 페이지 플러그인 탭에서 google tag manager for wordpress를 검색하고 설치 후 활성화합니다.

gtm4wp 플러그인 설치 및 활성화
gtm4wp 플러그인 설치 및 활성화

설치된 플러그인의 설정으로 들어가면 아래와 같은 화면이 나오는데요.

gtm4wp 플러그인 구글태그매니저 ID 입력하기
구글태그매니저 ID 입력하기

빨간 네모로 표시된 Google Tag Manager ID를 입력하는 곳에 본인이 생성한 구글 태그매니저 컨테이너 ID를 넣고 Save Changes를 눌러주면 됩니다.

입력해야 할 컨테이너 ID는 구글 태그매니저 우측 상단에서 아래와 같이 확인할 수 있습니다.

구글태그매니저 ID 확인방법
구글태그매니저 ID 확인방법
  • 컨테이너가 제대로 설치되었는지 확인하는 방법

먼저 구글 태그매니저 우측 상단에서 Preview를 클릭합니다. 그러면 실제 GTM에서 우리가 변경한 사항들이 잘 작동하는지 테스트해 볼 수 있는 미리보기 모드로 들어가는데요. 동일한 브라우저의 새로운 탭에서 본인의 웹사이트를 접속했을때, 브라우저 하단에 아래와 같이 GTM 상태창이 뜬다면 성공적으로 컨테이너 태그가 설치된 것입니다.

구글태그매니저 preview 모드
구글태그매니저 preview 모드

Step 3. GTM에 구글 애널리틱스 태그 추가하기

Step 2 까지 완료했다면 아래 그림에서 1번 단계를 끝낸 것입니다.

구글태그매니저 태그 추가하기

이제 더 이상 웹사이트의 소스코드를 수정할 필요는 없어진 상태입니다. 이제 마지막으로 2번 단계, 즉 구글 태그매니저의 유저 인터페이스를 활용해 구글 애널리틱스(GA) 태그를 추가해주면 됩니다.

먼저 구글 태그매니저로 이동합니다.

아래 화면에서 태그 새로 만들기(Add a new tag)를 클릭합니다.

구글태그매니저 새로운 태그 추가하기
새로운 태그 추가(Add a new tag)

태그 구성(tag configuration)을 클릭하고 아래와 같이 유니버설 애널리틱스(Universal Analytics)를 선택해줍니다.

태그 유형 Google analytics: Universal Analytics
태그 유형 – Google analytics: Universal Analytics

추적 유형(track type)은 페이지뷰(Page view)로 설정하고, 이 태그의 설정 재정의 사용(Enable overriding settings in this tag)을 클릭하고, 추적 ID(Tracking ID) 부분에 구글 애널리틱스 추적 코드를 입력해줍니다.

Enable overriding settings in this tag

다음으로 트리거를 클릭하고 All pages를 선택합니다.

GTM 트리거 설정 all pages

그리고 나서 저장하기를 누르면 구글 애널리틱스 태그가 생성된 것입니다.

GTM 컨테이너 태그가 제대로 심어졌는지 체크했던 것과 동일하게, 미리보기(Preview) 모드로 들어가 웹사이트 접속을 해보면 구글 애널리틱스 코드가 정상적으로 추가되었는지 확인할 수 있는데요.

아래처럼 방금 추가한 GA_base 태그가 Fired 되었다고 나오면 정상적으로 추가된 것입니다.

구글애널리틱스 태그 fired
GA_base는 임의로 정한 태그 이름

태그가 잘 추가된 것이 확인되었다면 다시 구글 태그매니저로 돌아와 해당 버전명과 변경사항을 기록하고 우측 상단 제출(Submit) 버튼을 눌러줍니다.

Google Tag Manager 버전 관리
Google Tag Manager 버전 관리

버전관리는 구글 태그매니저의 유용한 기능 중 하나입니다. 나중에 이전 버전들에서 어떤 변경사항이 있었는지 히스토리를 확인할 수도 있고, 이전 버전의 설정값으로 바로 바꿔서 적용할 수도 있습니다.

아무튼 여기까지 마치면 구글 태그매니저를 이용한 구글 애널리틱스 태그 설치가 완료된 것입니다. GA 태그 하나만 삽입하기에는 GTM을 이용하는 과정이 비교적 더 복잡하고 길어 보이지만, 추후에 광고최적화나 다른 웹로그 분석 솔루션의 태그를 추가하고 수정하고 관리하는데 있어서 큰 도움이 될 수 있으니 필요에 따라 사용하면 됩니다.

지금까지 알아본 것처럼 설치 방법도 다양하고 각 방식의 장단점도 있어 어떻게 워드프레스 웹사이트와 구글애널리틱스를 연결해야 할지 고민이 될 수도 있습니다. 하지만 더 중요한 것은 데이터를 실제로 분석하고 활용하는 단계이므로, 세팅에 너무 오랜 시간을 쏟지 말고 가장 간편한 방법으로 일단 시작해보길 추천드립니다. 그리고 나서 구글 애널리틱스에서 제공하는 데이터를 전혀 사용하지 않는 사람들도 있을 것이고, 방문자들의 더 세부적인 행동들을 추적하고 싶으나 여러 한계에 직면하는 분들도 있을 것입니다. 그때 필요한 툴과 추가적인 지식에 대해 공부하고 검색하면서 알아가도 늦지 않습니다. 툴을 우선 정복하고 실제로 사용해야지라는 마음은 내려놓고 우선 시작하시길 추천드립니다.

This Post Has 2 Comments

  1. 신달

    2단계에서 컨테이너가 제대로 설치됬는지 확인위해 미리보기 하면 연결이 안됨. 싸이트에 아무런 표시가 없구요.
    그냥 연결이 안되는건….기다려야 하나요? 아님 원드프래스 구글태그플러그인 아이디 삽입시. 위치를 첫번째 체크말고 다른곳으로 해야하는지요 전 여기서 멈추어서 질문 드립니다.

  2. 신달

    웓드프래스 amp 플러그인 활성화 해제하니 되네요. ㅜㅜ 충돌인가 봅니다.

Leave a Reply