[퍼포먼스 마케팅] 페이스북 픽셀의 작동 원리/픽셀 기능 정리

/*네이버 boostcourse '유성민' 강사님의 [이화여대X부스트코스] 페이스북 인스타그램 마케팅 강의 메모입니다.*/

 

 

4단계. 실제 웹 사이트에 들어온 사람을 잡아라!

 

1. 페이스북 픽셀이란?

: 눈에 보이지 않는 픽셀 크기의 명령어를 웹사이트에 설치해 사용자의 행동을 측정하는 것.

 

-온라인에서 사용자를 추적하기 위한 GPS와 같은 기능

 

-데이터를 추적해 그 데이터를 페이스북 광고 계정으로 보내주는 자바스크립트 명령어

 

-페이스북 기본 픽셀과 페이스북 이벤트 픽셀로 나뉜다. 

 

▷페이스북 기본 픽셀: Page View (데이터를 전송)

--> 모든 웹페이지에 설치되어있어야 한다.

 

▷페이스북 이벤트 픽셀: Add to Cart/Purchase/View Contents/Complete Registration (특별한 경우에만 데이터를 전송)

--> 장바구니 페이지에만 설치되어야 한다. 

 

2. 픽셀 설치 시 장점

-전환 캠페인(성과 최적화)

 

-성과 모니터링(사이트 성과)

 

-리마케팅 모수 기능(맞춤 타겟 저장)

 

3. 설치 방법

3-1. 컨테이너 만들고 그 컨테이너 웹사이트에 설치

-자바스크립트 명령어를 설치하기 위해 container라는 명령어 담아두는 박스를 둔다.

-이를 통해 개발 지식 없이 컴퓨터에 페이스북 픽셀을 설치할 수 있다. 

-container: 구글 태그 매니저 (명령어를 관리하는 시스템)

*'태그'는 명령어를 의미

 

1. 컨테이너 만들기

구글 태그 매니저 검색

marketingplatform.google.com/intl/ko/about/tag-manager/

웹 및 모바일 태그 관리 솔루션: Google 태그 관리자

-> 무료 사용 버튼 클릭

-> 구글 태그 매니저 계정 추가

 

*컨테이너 설정에서 컨테이너 이름에 굳이 사이트 주소 안 적고 이름 똑같이 적어도 된다. 

*타겟 플랫폼: 웹사이트에 설치 시 웹 클릭 / 안드로이드 혹은 iOS 사용 시 그거 클릭

 

 

2. 만든 컨테이너 웹사이트에 설치

-웹사이트가 없으니 hmlt, css, js 편집 가능한 티스토리에서 테스트해보기

-티스토리 계정 생성(없다면)

-> 계정 생성 후 블로그 관리 페이지에서 '스킨편집'으로 이동

-> 우측에 'html 편집' 클릭

-> 구글 태그 매니저에서 받은 코드를 head와 body 태그 부분에 추가하기

-> 적용시키면 티스토리 블로그 웹사이트에 컨테이너 배치 완료!

 

*구글 태그 매니저 인터페이스 살펴보기

1. 대카테고리(공간/버전/관리자)

 

1-1. 작업 공간

: 어떤 명령어를 발행할 때 그 명령어가 설치돼 있는 상황판의 역할.

 

1-2. 버전

: 웹사이트에 명령어를 만들어 발행할 때 버전이 하나씩 올라가게 된다. 

--> 태그 매니저 내에서 어떤 활동을 했느냐에 대한 작업 내역을 보여준다. 

 

1-3. 관리자

-사용자 권한: 다른 사람 초대 가능(오른쪽 상단 '+' 버튼에 지메일 입력하면 된다.)

*컨테이너 권한: 권한 따로따로 줄 수 있다. 

 

2. 소카테고리(개요/태그/트리거/변수/폴더/템플릿)

 

2-1. 개요

: 상황판의 역할

 

2-2. 태그

: 명령어의 역할(광고 계정으로 데이터를 쏜다)

-조건 값에 대한 명령

 

**태그 만드는 법**

-페이스북의 경우 구글 태그 매니저에서 태그를 지원하지 않기에 태그 유형을 맞춤 HTML을 통해 설정해야 한다. (이벤트 픽셀도 마찬가지)

-추후에 나오는 픽셀 스크립트를 컨테이너에 넣는 과정에서 맞춤 HTML에 기본 코드를 복사, 붙여넣기 한다. 

 

2-3. 트리거: 명령어가 발동되는 시점을 정의하는 역할

-변수가 발동되는 조건

-기본 픽셀의 경우 'All Pages' 트리거 그냥 사용하면 된다.

 

2-4. 변수: 특정 값을 담아두는 가상의 메모리 영역

-특정 값

 

2-5. 폴더: 명령어를 태그별로 정리할 수 있는 기능

 

2-6. 템플릿: 다른 사람이 만들어놓은 명령어를 템플릿 형태로 다운 받을 수 있다. 

 

3-2. 페이스북 픽셀 스크립트 다운 받아 컨테이너에 넣기

1. 페이스북 픽셀을 삽입하는 법 (순서)

페이스북 광고 관리자 '비즈니스 도구' 메뉴에서 '이벤트 관리자' 클릭

 

-> 데이터 소스에 연결에서 '웹'/'앱' 중 구글 태그 매니저 만들면서 설정했던 걸로 진행

*안드로이드 혹은 iOS는 앱을 선택하고, 웹페이지 선택했었을 경우 웹 버튼 클릭.

 

-> 페이스북 픽셀 이름 설정하고 만든 티스토리 계정 url에 첨부하기(픽셀 설치할 링크 가져오면 됨.)

 

-> '계속' 누르면 나타나는 창.

'웹사이트에 픽셀 코드 직접 추가' 버튼 클릭

*카페24 같은 서버 연결 도와주는 쇼핑몰 솔루션의 경우에는

페이스북 픽셀 쉽게 도와주는 확장 프로그램 존재.

(이럴 경우 파트너 통합 사용)

 

-> 웹사이트에 픽셀 코드 직접 추가 선택 시 나타나는 창.

기본 코드 복사해서 구글 태그 매니저로 이동해 페이스북 기본 픽셀을 설치.

(웹사이트에 직접 코드를 붙여넣지 않고 그 중간 과정인 컨테이너_구글 태그 매니저를 사용하는 방법!)

 

-> 구글 태그 매니저 맞춤 HTML에 기본코드를 복사해 붙여넣는다. 

(명령어를 웹페이지에 쏜다는 의미)

*태그 매니저 관련 내용 앞 쪽에 구글 태그 매니저 인터페이스 살펴보는 부분에 자세히 설명 나와있음.

-----여기까지 태그 설정 끝!-----

 

-> 트리거 설정: 기본 픽셀의 경우 'All Pages' 트리거 사용하면 된다. 

*아직 웹사이트에 명령어가 발행된 것은 아니다. 

 

-> '제출' 버튼 클릭

-제출 구성 단계에서 사용자 추가 시 다른 사람도 알아보기 쉽도록 버전 이름과 버전을 설명.

*혼자 사용하거나 태그 매니저 전문가들끼리 사용할 경우에는 그냥 넘어가기도 함.

 

-> 버전에 기본 픽셀 설치 확인

 

 

3-3. 웹사이트에 기본 픽셀 설치 확인

크롬 확장 프로그램에서 'Facebook Pixel Helper' 설치

 

-> 확장 프로그램 추가 후 픽셀 추가한 웹사이트에서 확인해보기

(불이 켜있으면 픽셀이 정상적으로 추가된 상태)