구글 태그 매니저의 구동 원리와 픽셀 설치

 

지난번 장표에서 페이스북 기본 픽셀과 이벤트 픽셀의 차이에 대해서 살펴보았습니다. 구글 태그 매니저의 구조를 모르는 상황에서 페이스북 이벤트 픽셀을 설치하는 것은 다소 어려울 수 있으니, 페이스북 기본 픽셀 설치를 하면서 자연스럽게 구글 태그 매니저의 원리를 살펴봅시다.

 

1. 구글 태그 매니저의 구성 요소

 

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

 

구글 태그 매니저의 [작업 공간]이라는 영역으로 들어갑니다. 상단 메뉴바를 주목해봅시다. [작업 공간], [버전], [관리자] 3개의 메뉴가 나타납니다. 작업 공간에서는 현재 발행된 명령어는 몇 개이고, 그 명령어가 무엇인지에 대한 개요가 정보로 나타나게 됩니다. 하지만, 우리는 아직 아무것도 건드리지 않았기 때문에 모든 변경사항이 0으로 나타납니다.

 

 

[버전] 메뉴는 말 그대로, 우리가 명령어를 수정하거나, 저장하거나, 실제 웹사이트에 발행하는 등, 구글 태그 매니저 내에서 발생하는 모든 변경 기록을 히스토리로 나타내는 곳입니다. 누가 몇 시에 어떤 명령어를 어디에 삽입했는지 히스토리 조회가 가능합니다. 아직은 어떤 변경도 없기 때문에 제일 처음 구글 태그 매니저를 만들면 버전은 0입니다. 다음, [관리자] 메뉴로 이동해 봅시다.

 

 

[관리자] 메뉴는 말 그대로 컨테이너를 수정하고, 설정할 수 있는 영역을 의미합니다. 우리가 컨테이너 삽입을 위한 코드 (위, 아래 2개 있던 코드)를 다시 볼 때에는 구글 태그 매니저 설치라는 항목을 누르면 다시 컨테이너 코드가 나타납니다. 그리고 사용자 관리를 통해 이 컨테이너를 다른 동료들이 들어와 함께 관리할 수도 있습니다.

 

 

다음엔 작업공간으로 다시 돌아와서 왼족 카테고리 메뉴를 살펴보겠습니다. 사실 이 부분이 중요합니다. 구글 태그 매니저에서 명령어를 발행하는 데에는 크게 3가지로 나뉩니다. 지금 위 화면에서는 메뉴가 총 5개 나타납니다. [개요]는 말 그대로, 우리가 만드는 태그들의 현황을 보여주는 역할일 뿐이며, 제일 아래 있는 [폴더]는 우리가 만든 태그들을 폴더로 정리하는 역할일 뿐입니다. [템플릿] 역시 명령어가 정리된 것을 한 번에 옮기는 경우 사용하게 됩니다.

 

사실 구글 태그 매니저의 기본 요소는 태그, 트리거, 변수 3가지로 이루어져 있고, 이 3단계 순으로 페이스북 기본 픽셀과 이벤트 픽셀을 삽입할 수 있습니다. 구글 태그 매니저의 핵심 요소인 [태그], [트리거], [변수]에 대해서 자세히 알아봅시다.

 

1) 태그(Tag) : 사실 태그는 다양한 분야에서 사용되고 있는 단어이지만, 구글 태그 매니저에서는 자바스크립트로 구성된 [명령어]라는 의미를 가지고 있습니다. 즉, 명령하는 말이라고 이해하면 됩니다.

 

2) 트리거(Trigger) : 트리거를 한국어로 번역하면 방아쇠입니다. 트리거는 태그가 발생되는 시점을 정의해주는 용도로 사용됩니다.

 

3) 변수(Variables) : 변수는 말 그대로 우리가 수학 시간에 배우는 변할 수 있는 수를 의미합니다. 하지만 이 정도 설명으로 변수를 이해하기엔 다소 한계가 있습니다. 변수에 대해서는 내용 후반부에 자세히 다루도록 하겠습니다.

 

태그, 트리거, 변수에 대한 정의를 더욱 깊게 이해하기 위해서, 예시 문장을 하나 써보겠습니다.

 

"빨간 모자를 쓴 사람이 문을 열고 들어오면 박수를 쳐러."

 

라는 문장이 있습니다. 여기서 태그(명령어)는 무엇일까요? 태그는 명령하는 말이라고 했으니, 위 문장에서는 "박수를 쳐라." 라는 부분이 태그의 역할을 하고 있습니다. 그렇다면 트리거는 무엇인가요? "문을 열고 들어오면~" 까지가 트리거입니다. 마지막으로 변수는, 모든 사람들이 아니라 "빨간 모자를 쓴 사람" 하나만 지칭했습니다. 빨간 모자를 쓴 사람이 변수가 되는 것입니다.

 

빨간 모자를 쓴 사람이 (변수)

문을 열고 들어오면 (트리거)

박수를 쳐라 (태그)

 

여기서 한 문장을 더 써보겠습니다.

 

장바구니 페이지에

트래픽이 도착하면

이벤트를 발생시켜 광고 계정으로 쏴라!

 

이 문장에서 변수, 트리거, 태그가 무엇인지 구분할 수 있어야 합니다. 이것은 실제 장바구니 이벤트 픽셀을 설치하는 원리입니다. 그렇다면 페이스북 기본 픽셀은 어떻게 문장으로 쓸 수 있을까요?

 

모든 웹 페이지에

트래픽이 도착하면

광고 계정으로 데이터를 쏴라

라고 문장이 만들어 질 수 있습니다. 이 원리를 가지고 우리는 태그 매니저로 돌아가 페이스북 기본 픽셀을 설치해보도록 하겠습니다.

 

2. 페이스북 기본 픽셀 웹사이트에 설치하기

사실 태그 매니저에 익숙한 사람들은 변수 - 트리거 - 태그 순으로 명령어를 만들지만, 우리는 아직 구글 태그 매니저가 낯설기도 하고, 처음으로 해보는 것이니 태그 - 트리거 - 변수 순으로 페이스북 기본 픽셀을 설치해보도록 하겠습니다.

 

모든 웹 페이지에

트래픽이 도착하면

광고 계정으로 데이터를 쏴라

 

이 문장을 기억한 상태 그대로, 태그 매니저로 이동해보겠습니다.

 

 

1) 태그 매니저 홈 화면에서, 태그 메뉴를 눌러 빨간색의 [새로 만들기] 버튼을 눌러줍니다.

 

 

2) 우리가 알아볼 수 있도록 태그 이름을 바꿔줍니다. 네모칸이 2개 보입니다. 위에 있는 네모칸은 태그, 즉 명령어를 정의해주는 곳입니다. 아래에 있는 네모칸은 트리거를 정의해주는 것이지요.

 

 

3) 이름을 바꾸었으면, 태그부터 만들기 위해 태그 구성 영역의 비어있는 공간을 클릭합니다. 그렇게 하면 태그의 타입을 결정하라는 안내가 오른쪽에서 나타납니다. 태그 타입을 자세히 보면, Google Analytics, Google Optimize, Google Adwords 등등 구글과 관련된 다양한 제품들이 태그 타입으로 자리 잡혀있습니다.

 

구글 태그 매니저가 구글사의 상품이기 때문에, 구글에서는 구글 관련 제품들에 한해서는 명령어를 좀 쉽게 설치할 수 있도록 솔루션을 제공해줍니다. 하지만 안타깝게도 페이스북은 솔루션이 따로 없습니다. 그래서 우리는 아래쪽에, "우리가 직접 명령어를 만들어 정의해준다." 라는 의미의 '맞춤 HTML' 태그 타입을 사용합니다. 앞으로 우리가 설치할 모든 페이스북 기본 픽셀과, 이벤트 픽셀의 태그 타입은 100% "맞춤 HTML" 입니다.

 

 

4) 맞춤 HTML로 태그 타입을 설정하였더니, "직접 정의해서 명령어 짜 봐" 라고 보란 듯이 네모칸이 나와서 코드를 입력하라는 창이 나타납니다. 우리는 여기서 당황할 필요 없이, 페이스북 기본 픽셀 코드를 복사해서 붙여넣기만 해 주면 됩니다. 태그는 명령어를 지정해주는 곳이니까, 수많은 명령어들 중 하나인 페이스북 기본 픽셀을 태그에다가 넣어주면 되는 것입니다.

 

 

5) [코드 복사] 버튼을 클릭하여 페이스북 광고 관리자로 돌아가 기본 픽셀을 복사합니다.

 

 

6) 복사한 기본 픽셀을 맞춤 HTML 영역에 그대로 붙여 넣기를 하면, 태그 설정은 모두 끝났습니다. 이제는 밑에 있는 네모칸을 눌러 트리거를 정의해주기만 하면 끝납니다.

 

 

7) 페이스북 기본 픽셀의 트리거는 "모든 웹페이지에 도착하면 데이터를 광고 계정으로 쏴라" 였습니다. 그렇기 때문에, 트리거를 선택해서 All pages 트리거를 사용하게 되면, 이는 자동으로 모든 웹 페이지가 됩니다. 태그 매니저는 기본적으로 All pages view 트리거는 제공해주기 때문이지요.

 

 

8) 위 이미지와 똑같이 설정을 해주면 트리거와 태그 세팅이 모두 마치게 되면서, 페이스북 기본 픽셀이 정의됩니다. 우리도 충분히 보고 해석할 수 있습니다. 오른쪽 상단에 저장 버튼을 클릭하여, 만들어둔 태그를 저장해둡니다.

 

9) 그 다음, 오른쪽 상단 [프리뷰 또는 미리 보기] 버튼을 클릭하여, 문제가 없는지 확인합니다. (만약 문제가 있으면 버튼을 눌렀을 때, 팝업창이 뜨면서 에러의 원인을 알려줄 것입니다.) 화면 변화가 없으면 SUBMIT(제출) - PUBLISH(게시) - CONTITUE(계속)의 3단계로 된 확인 버튼을 눌러주시면 모두 완료가 됩니다.

 

이번 글에서는 구글 태그 매니저의 구성 원리를 파악하고 페이스북 기본 픽셀을 태그 매니저의 원리에 따라 설치해보는 실습을 다루어보았습니다. 다음 글에서는 페이스북 기본 픽셀이 잘 설치되었는지 여부를 확인하는 방법과 이벤트 픽셀을 설치하는 방법을 게재해보겠습니다. 긴 글 읽어주셔서 감사합니다.

 

 

 

 

 

출처 : brunch.co.kr/@seongminyoo/80