픽셀은 모든 웹페이지에 기본적으로 들어가는 기본 픽셀, 그리고 특정 사용자의 행동을 추적하는 이벤트 픽셀 두 가지 종류로 나뉜다.
예를 들어 쇼핑몰이라면 장바구니 페이지, 고객 문의 페이지, 상세 페이지 등 모든 웹 페이지에 방문할 때마다 고객의 데이터를 전송해야 한다. 그렇기 때문에 모든 웹페이지에는 이런 데이터들을 추적하여 전송하는 '기본 픽셀'이 설치가 되어야 한다.
이번 시간에는 이 중 기본 픽셀을 수동으로 설치하는 방법에 대해서 다뤄보고자 한다. 개발 지식이 전혀 없는 마케터라도 걱정하지 말자. 하나하나 차근차근 따라 하다 보면 픽셀 설치는 물론이고, 나아가 활용까지 할 수 있다.
[전체 과정]
•
1단계: 페이스북 기본 픽셀 코드 발급받기
•
2단계: 픽셀을 담을 '컨테이너' 만들어 웹사이트에 설치하기구글 태그 매니저에서 컨테이너 만들기컨테이너를 웹사이트에 설치하기
•
3단계: '컨테이너' 안에 페이스북 기본 픽셀 삽입하기
•
4단계: 픽셀 설치가 잘 됐는지 확인하기
[Step 1] 페이스북 기본 픽셀 코드 발급받기
우선 웹사이트에 페이스북 기본 픽셀을 설치하기 위해서는 '페이스북 픽셀' 자바스크립트 코드를 발급받아야만 한다. 비즈니스 계정에서는 여러 개의 자바스크립트 코드를 발급받아 관리할 수 있으며, 개인 광고 계정의 경우 1개의 픽셀만 발급받을 수 있다.
왼쪽 상단 햄버거 모양의 메뉴를 클릭하여 [이벤트 관리자] 쪽으로 이동.
[새로운 데이터 소스 추가], [시작하기(or 픽셀 만들기)] 등의 버튼이 있다. 계정의 업데이트 버전에 따라 인터페이스가 달라질 수 있다만, 대부분 어렵지 않게 찾을 수 있다. '픽셀 만들기'에 해당하는 버튼을 클릭하자.
그러면 아래와 같은 팝업창이 나타난다. 픽셀 이름은 당신이 알아볼 수 있는 이름으로 적어주면 된다.
[계속] 버튼을 클릭하면, 아래와 같은 옵션이 나타난다. [Facebook 픽셀] 옵션을 선택하자.
'연결' 버튼을 누르면 2가지의 옵션이 나타난다. 우리는 페이스북 픽셀을 직접 웹사이트에 설치해 볼 것이기 때문에 [웹사이트에 픽셀 코드 직접 추가] 옵션을 선택.
그럼 아래 이미지와 같이 짧게 생략된 페이스북 픽셀 코드가 나타난다. 이 코드를 우리는 '페이스북 기본 픽셀'이라고 부른다. 페이스북 기본 픽셀은 특정 사용자가 우리 웹사이트에 방문하면 그들에게 GPS를 달아 행동 데이터를 추적한 후, 우리의 광고 계정으로 데이터를 전송하는 역할을 한다. 그렇기 때문에 우리 웹사이트 전체 웹페이지에 기본적으로 설치가 돼 있어야만 한다.
위 이미지 단계까지 도착하면 픽셀 발급은 일단 마무리됐다. 이제 발급된 페이스북 픽셀 코드를 웹사이트에 설치할 차례.
[Step 2] 구글 태그 매니저로 '컨테이너' 만들기
페이스북 픽셀은 페이스북 바깥에서 떨어지는 트래픽들에 GPS와 같은 추적 장치를 달아 그들의 행동을 관찰하고, 특정 행동을 완료한 유저들을 리마케팅 모수로 묶어주는 역할을 하는 자바스크립트 명령어의 일종이다.
만약 인간의 뇌에 명령어가 동시다발적으로 발생하면 어떻게 될까? 우리는 혼란에 빠지게 된다. 웹사이트도 마찬가지이다. 명령어가 너무 많이 발생할 경우, 사이트가 다운될 수 있다. 또한 자바스크립트를 바로 웹사이트에 복사, 설치하는 것은 굉장히 위험하다. 명령어들끼리 충돌할 수도 있고, 명령어의 기능이 제대로 작동하지 않을 수도 있다.
그래서 우리는 컨테이너(container)를 만들어 페이스북 픽셀을 담아둘 것이다. 컨테이너를 사용하면 사이트 내에 있는 소스 코드를 직접 수정하지 않고 스크립트를 웹사이트에 넣을 수 있기 때문에 훨씬 더 안전하다.
기억하자. 페이스북 기본 픽셀을 설치하기 이전에 우리는 이 '가상의 그릇'을 웹사이트에 심어야만 한다. 먼저 컨테이너를 웹사이트에 삽입하는 방법에 대해 알아보자.
1) 컨테이너 만들기
*컨테이너를 만드는 시스템을 구글 태그 매니저(Google Tag Manager)라고 한다. 구글 태그 매니저는 페이스북 픽셀과 같은 다양한 명령어를 웹·앱에서 유동적으로 설치 또는 삭제하면서 관리할 수 있는 툴로, 개발지식이 없는 사람들도 여러 명령어를 쉽게 관리할 수 있다는 장점이 있다.
'새 계정 추가' 창이 뜨면, 픽셀 이름을 브랜드명으로 작성했던 것처럼 여러분들이 알아볼 수 있는 계정 이름을 생성해주면 된다. 국가는 당연히 대한민국.
계정을 만들었다면, 계정에 포함된 컨테이너 하나를 생성할 수 있다. 지금 만들 이 컨테이너가 페이스북 픽셀과 같은 명령어들을 삽입 혹은 제거하며 유동적으로 관리할 수 있는 장소이다.
알아볼 수 있는 컨테이너 이름을 설정하면 컨테이너를 사용할 위치가 나온다. 웹, IOS, 안드로이드, AMP가 있다.*
*웹은 말 그대로 우리가 생각하고 있는 웹사이트, IOS와 안드로이드는 앱, AMP는 구글에서 자체적으로 개발한 웹이라고 보면 된다.
다른 것들은 개발에 대한 상당한 수준의 지식이 필요하기 때문에 우리는 웹을 중심으로 페이스북 픽셀을 삽입한다는 가정하에 계속 진행해보겠다. [웹]을 클릭하고 [만들기] 버튼을 눌러 태그 매니저 계정을 생성한다.
'만들기' 버튼을 누르면 컨테이너 역할을 해줄 코드가 생성된다. 여기까지 컨테이너를 생성했으니, 이젠 컨테이너를 우리 웹사이트에 설치해 보자.
2) 생성한 컨테이너를 웹사이트에 설치하기
만든 컨테이너를 웹사이트에 설치해야 하지만, 이 가이드를 읽는 분들 중에는 본인의 웹사이트가 없는 분들도 있을 것이다.
실습하기 위해서는 코드를 자유자재로 수정할 수 있는 웹사이트가 필요하기 때문에, 여기에서는 '티스토리 블로그'에 페이스북 픽셀을 설치할 것이다.*
*아쉽게도 네이버 블로그나 스마트 스토어에서는 코드를 수정할 수 없다(즉, 페이스북 픽셀을 설치할 수 없다는 뜻)
티스토리 블로그가 없다면, 만들면 된다. 티스토리 블로그 외에 다른 방식으로 연습을 해보고 싶다면 카페24, 아임웹과 같은 무료 쇼핑몰을 만들 수 있는 사이트도 괜찮다.
티스토리 블로그가 만들어졌다는 가정하에, [관리자] 메뉴로 이동하여 티스토리 블로그에서 코드를 수정해 보자. 티스토리 블로그 홈에서 실습을 진행할 블로그의 톱니바퀴 모양의 아이콘을 클릭.
그리고 [관리자] 메뉴 - [꾸미기] 영역에서 [스킨 편집]을 클릭한다.
[스킨 편집]에서 [html 편집] 메뉴를 선택.
[html 편집] 버튼을 누르면 내 블로그를 만드는 데 사용된 코드들이 나타난다. 굉장히 복잡해 보이지만, 우리는 태그 매니저 코드만 삽입하면 되기 때문에 어렵게 생각할 것 없다. 삽입할 코드를 복사해 오기 위해, 태그 매니저로 다시 한번 돌아가 보자.
태그 매니저 컨테이너를 웹사이트에 설치하기 위해서는 총 2개의 코드를 붙여넣어야 하는데, 태그 매니저 계정을 생성했을 때 뜬 팝업창에 이 코드들이 있다. 팝업창에 적힌 설명대로, 위에 있는 코드는 <head>라는 영역에서 가장 높은 위치에, 아래에 있는 코드는 <body> 영역 바로 뒤쪽에 코드를 붙여넣어 보자.
<중략>
[Step 3] 페이스북 기본 픽셀 설치하기
이제 앞에서 만든 컨테이너 안에 페이스북 기본 픽셀을 심어두면 설치가 끝난다. 다시 컨테이너를 만들었던 구글 태그 매니저로 돌아가 보면, 아래와 같은 기본 화면이 나온다.
픽셀을 바로 설치하는 방법을 배우기 위해 왼쪽 메뉴 영역을 살펴보자. 왼쪽 메뉴 영역은 개요, 태그, 트리거, 변수, 폴더, 템플릿의 6가지 메뉴로 구성돼 있다.
구글 태그 매니저에서 페이스북 픽셀과 같은 자바스크립트 명령어를 실제 웹사이트에 적용하기 위해서는 태그, 트리거, 변수라는 3가지 개념을 알고 있어야만 한다.
*지금 위 화면의 6개의 메뉴 중 나머지 3개는 간단히 설명하고 넘어가도록 하겠다. [개요]는 말 그대로 우리가 만드는 태그들의 현황을 보여주는 역할, [폴더]는 우리가 만든 태그들을 묶어 정리하는 역할, [템플릿]은 다른 사람들이 설정해놓은 설정값들을 그대로 가져오는 용도.
구글 태그 매니저에서 명령어를 구성하는 단위는 태그, 트리거, 변수 3단계로 이루어져 있고, 이 3단계 순으로 페이스북 기본 픽셀과 이벤트 픽셀을 삽입할 수 있다.
•
태그(Tag): 태그는 명령어 하나를 나누는 단위이자 명령하는 말이라고 이해하면 된다.
•
트리거(Trigger): '방아쇠'라는 뜻의 트리거는 '어떤 행동이 발생할 때까지'를 의미한다. 명령어가 발생되는 시점을 정의해주는 것.
•
변수(Variables): 변수는 말 그대로 우리가 수학 시간에 배운 '변할 수 있는 어떤 값'을 의미한다.
정의만 보면 이해하기 어렵게 느껴진다. 간단한 예시문을 하나 작성해보겠다.
빨간 모자를 쓴 사람이 문을 열고 들어오면 박수를 쳐라
위 문장에서 태그(명령어)는 '박수를 쳐라'입니다. 트리거는 '문을 열고 들어오면~'까지인데 박수를 치라는 명령어가 발동되는 시점이기 때문이다. 변수는 모든 사람이 아니라 구체적으로 지칭한 '빨간 모자를 쓴 사람'이다. 정리하면 아래와 같다.
빨간 모자를 쓴 사람이 (변수)
문을 열고 들어오면 (트리거)
박수를 쳐라 (태그)
응용된 문장을 써보겠다.
장바구니 페이지에
트래픽이 도착하면
이벤트를 발생시켜 광고 계정으로 쏴라!
이 문장에서 우리는 변수, 트리거, 태그가 무엇인지 구별할 수 있다. '장바구니 페이지'가 변수, '트래픽이 도착하면'이 트리거, '이벤트를 발생시켜 광고 계정으로 쏴라'가 태그가 된다.
그렇다면, 지금 우리가 설치해야 할 페이스북 기본 픽셀은 어떻게 문장으로 쓸 수 있을까?
모든 웹 페이지에 (변수)
트래픽이 도착하면 (트리거)
광고 계정으로 데이터를 쏴라 (태그)
위와 같은 문장이 만들어질 수 있다. 이 문장을 기억한 상태로 태그 매니저로 이동해 픽셀을 설치해 보겠다.
태그 매니저 홈 화면에서 [태그] 메뉴 - [새로 만들기] 버튼을 클릭.
우리가 알아볼 수 있도록 태그 이름을 바꿔주자. 좌측 상단 '페이스북 기본 픽셀'이라고 적힌 곳이다. 2개의 네모 칸 중 위쪽은 태그, 즉 명령어를 정의하는 영역, 아래쪽은 트리거를 정의하는 영역.
이름을 바꿨으면 태그를 먼저 만들기 위해 '태그 구성' 칸을 클릭한다. 태그의 타입을 결정하라는 안내가 오른쪽에 나타나는데 타입들을 자세히 보면 구글 애널리틱스(Google Analytics), 구글 옵티마이즈(Google Optimize), 구글 애드워즈(Google Adwords) 등 구글과 관련된 다양한 제품들이 태그 타입으로 자리 잡고 있다.
구글 태그 매니저가 구글의 상품이기 때문에 관련 제품들에 한해서는 명령어를 좀 쉽게 설치할 수 있도록 솔루션을 제공한다. 하지만 안타깝게도 페이스북은 솔루션이 따로 없기 때문에 우리는 '우리가 직접 명령어를 정의한다'는 의미의 '맞춤 HTML' 태그 타입을 사용한다. 앞으로 우리가 설치할 모든 페이스북 기본 픽셀과 이벤트 픽셀의 태그 타입은 모두 '맞춤 HTML'.
맞춤 HTML로 태그 타입을 설정하니 '직접 정의해서 명령어 짜봐'라는 듯 코드를 입력하라는 창이 나타난다. 우리는 당황할 필요 없이 페이스북 기본 픽셀 코드를 복사해서 붙여넣어 주면 된다. 태그는 명령어를 지정해주는 곳이기 때문에 수많은 명령어 중 하나인 페이스북 기본 픽셀을 넣어주는 것.
픽셀을 발급받았던 [이벤트 관리자] 영역으로 이동하여 초록색의 [코드 복사] 버튼을 클릭.
복사한 코드를 아래 이미지와 같이 그대로 붙여 넣어주면 된다. 이렇게 설정했다면 태그, 트리거, 변수의 3단계 중 태그 영역 설정이 마무리되었다.
이제 [트리거 설정] 영역이다. 트리거에서는 명령어가 발생하는 시점을 정의해주어야만 한다. [트리거]를 클릭해보자. 단 하나의 트리거가 들어가 있는 것을 볼 수 있다. 해당 트리거의 이름은 [All Pages]. 말 그대로 '웹사이트가 가지고 있는 모든 웹 페이지에 페이지뷰가 발생하면~' 이라는 의미를 가진 트리거이다.
기본 픽셀은 모든 웹페이지에서 발생이 되어야 하므로 [All Pages]를 그대로 클릭한다. 그러면 아래 이미지와 같이 설정이 완료된다. 이제 하나의 태그가 만들어졌다. "모든 웹페이지의 페이지뷰가 발생하면, 우리 광고 계정으로 데이터를 쏴라!"라는 뜻의 기본 픽셀이 완성된 것. 오른쪽 상단 [저장] 버튼을 클릭한다.
[저장]을 클릭하면 [태그] 영역에 우리가 만들어준 이름인 '페이스북 기본 픽셀'이 새로 생긴 것을 볼 수 있다. 하지만 여기서 끝이 아니다. 현재 이 명령어는 컨테이너 안에는 저장이 되었지만, 실제 웹사이트에는 명령어 적용을 하지 않은 상태.
오른쪽 상단 [제출]이라는 파란색 버튼이 있다. [제출] 버튼을 클릭하고, 명령어가 실제로 게시되어야만 사이트에도 적용된다. [제출] 버튼을 클릭하면 버전*의 이름과 설명을 기재하라는 칸이 나온다. 버전 이름과 설명은 특정 명령어를 웹사이트에 적용할 때, 다른 사람들이 알 수 있도록 해당 히스토리의 제목과 부가적인 설명을 적어주는 선택 공간이. 생략하고 [게시] 버튼을 클릭한다.
*여기서 버전이란 구글 태그 매니저에서 명령어를 하나 [게시]할 때마다 생기는 히스토리의 단위. 새로 계정을 만들었을 때는 '버전 0', 지금 명령어를 게시하는 순간 '버전 1'이 된다.
조금 기다려달라는 안내와 함께 명령어가 실제로 웹사이트에 적용돼 '버전 1'로 넘어간 것을 볼 수 있다.
해당 과정까지 따라왔다면 페이스북 기본 픽셀 설치가 완료됐다. 하지만 사이트에는 아무런 변화가 없을 것이다. 우리 눈에는 보이지 않는 명령어를 웹사이트에 적용했기 때문이다. 픽셀이 제대로 설치됐는지 확인하는 대표적인 방법을 배워보자.
[Step 4] 픽셀이 정상적으로 설치됐는지 확인하기
특정 웹사이트의 픽셀이 정상적으로 설치됐는지 확인해주는 도구의 이름은 페이스북 픽셀 헬퍼(Facebook Pixel Helper)이다. 크롬 확장 프로그램에서 다운로드받을 수 있다.
크롬 웹스토어 링크로 이동하여 검색하면 확장 프로그램 도구가 나타난다. 확장 프로그램이 설치되면 파란색의 [Chrome에서 삭제] 버튼이 나타난다. 설치가 안 됐다면 [설치하기] 버튼을 클릭하여 다운로드받아보자. 설치 완료되면 북마크 영역 위쪽에 조그맣게 아이콘이 생기는 것을 볼 수 있다.
현재는 불이 꺼져 있지만, 픽셀이 제대로 설치된 웹사이트로 이동하면 픽셀의 불이 켜지는 것을 확인할 수 있다. 실습용 티스토리 블로그의 메인 페이지에서 새로고침해 보았다. 꺼져 있던 불이 켜지면서 페이스북 픽셀이 정상적으로 설치됐다는 신호를 볼 수 있다.
이제는 이벤트 픽셀이다
페이스북 픽셀 설치 원리와 페이스북 기본 픽셀 설치 실습을 진행했다. 구글 태그 매니저를 사용하여 자바스크립트 명령어를 삽입하는 방법을 배운다면 페이스북 픽셀뿐만이 아니라, 구글 애즈 전환 태그, 카카오 픽셀 등 다양한 광고 매체 스크립트들을 쉽게 설치하고 통합적으로 관리할 수 있다.
단순히 따라 하는 것이 아닌 원리를 이해해가며 페이스북 기본 픽셀 설치 방법을 충분히 익혀야 한다.
요약 정리
1. 페이스북 픽셀 설치 순서
•
명령어를 담아둘 컨테이너를 만든다.
•
컨테이너를 웹사이트에 설치한다.
•
픽셀 명령어를 컨테이너를 통해 설치한다.
2. 구글 태그 매니저의 3요소
•
태그: 명령하는 말
•
트리거: 명령어가 발동되는 시점
•
변수: 변할 수 있는 특정 값
3. 페이스북 픽셀 확장 프로그램
•
크롬 확장 프로그램 페이스북 픽셀 헬퍼(Facebook Pixel Helper)를 통해 웹사이트에 픽셀 정상 설치 여부를 확인할 수 있다.