2022.09.05 - [퍼포먼스마케팅] - 퍼포먼스마케팅 픽셀 1. 개념과 원리
퍼포먼스마케팅 픽셀 1. 개념과 원리
픽셀 개념 개념 : 광고 플랫폼에서 제공하는 자바스크립트 코드 (페이스북/카카오/DSP 등에서 발행) *웹 페이지중 극히 일부분의 작은 코드를 삽입한다고 하여 픽셀이라고 지칭됨 기능 : 랜딩페이
silver-liq9118.tistory.com
2022.09.27 - [퍼포먼스마케팅] - 퍼포먼스마케팅 픽셀 2. 픽셀 발급 방법 (페이스북 픽셀, 카카오 픽셀)
퍼포먼스마케팅 픽셀 2. 픽셀 발급 방법 (페이스북 픽셀, 카카오 픽셀)
2022.09.05 - [퍼포먼스마케팅] - 퍼포먼스마케팅 픽셀 1. 개념과 원리 퍼포먼스마케팅 픽셀 1. 개념과 원리 픽셀 개념 개념 : 광고 플랫폼에서 제공하는 자바스크립트 코드 (페이스북/카카오/DSP 등에
silver-liq9118.tistory.com
설치방법 개념
소유 또는 위탁중인 랜딩페이지, 즉 픽셀을 설치하고자 하는 페이지가 있으면, 당연히 해당하는 소스 "코드" 가 존재하고
픽셀은 광고 플랫폼에서 제공하는 "자바스크립트 코드" (웹 에서 작동하는 코드) 이기 때문에,
랜딩페이지 웹 페이지 코드에 픽셀 코드 추가하기를 진행해야한다.
자신이 뛰어난 웹 개발자이면 직접 코드를 추가하여 랜딩페이지를 운영하는 것에 어려움이 없지만,
코드를 쉽게 추가할 수 있도록 도와주는 도구를 이용하여 픽셀을 설치하는 방법을 주로 사용하고 있고,
(**메타 (페이스북) 에서는 내부에서 픽셀 설치를 쉽게할 수 있도록 픽셀설치 도구 제공 )
보통은 GTM이라는 도구를 통해서 픽셀을 설치 하는 과정을 거친다.
광고플랫폼에서 코드를 발급받고 GTM을통해서 랜딩 페이지에 코드를 심는 과정을 통해
픽셀을 설치한다 라고 할 수 있다.
GTM 이란?
- GTM ( Google Tag Manager ) : 구글에서 제공되는 코드 조각을 쉽고 빠르게 업데이트할 수 있는 태그 관리 시스템으로 여기서 태그는 픽셀과 거의 같은 개념
→ 소스코드를 직접 수정하고 웹페이지를 업데이트 하지 않아도 픽셀을 심을 수 있도록 도와주는 도구 이므로 퍼포먼스 마케팅에서 픽셀과 GTM은 같이 언급 되는 것 이다.
더 자세한 개념
* 구글태그매니저란? : https://support.google.com/tagmanager/answer/6102821?hl=ko&ref_topic=3441530
* 태그매니저 시스템이란? : https://en.wikipedia.org/wiki/Tag_management_system
설치방법
1) GTM을통해 픽셀설치하기 (카카오,네이버, DSP등 픽셀발급만 가능한 광고플랫폼)
1. GTM 초기설정하기
코드를 쉽게 심을수 있는 도구를 사용하기 위해서는 최초의 직접적인 코드설치가 필요하다.
이후에는 GTM의 내부 UI만으로도 쉽게 코드를 설치 할 수 있다.
https://tagmanager.google.com/
Google 애널리틱스
로그인 Google 애널리틱스로 이동
accounts.google.com
GTM 접속, 로그인
태그관리자 계정만들기
여기서 계정은 회사 등으로 구분하면 된다.
ex) A사 B사 구분
계정만들기 (**이미 연동된 GTM이 있을경우 계정만들기는 스킵)
이름기입, 웹 코드를 관리하기때문에 웹으로 설정
컨테이너 : 관리하고자 하는 웹사이트 전체를 통으로 하나라고 생각하면 된다.
**브랜드 사이트 내에서 페이지가 여러개여도 컨테이너는 "브랜드사이트" 라는 전체에 묶이기 때문에 페이지별로 컨테이너를 만들 필요가 없다
**네이버사이트는 네이버블로그, 네이버카페등등 많은 하위페이지가 있지만 "네이버"라는 하나의 개념으로 묶이는것과 같다
약관 동의하기
동의후 컨테이너 생성이완료 되었고,
초기연동 작업이 필요하다.
모든 페이지에 해당코드 삽입이 필요하다.
1. 내부의 개발팀이 있는경우 해당코드와 코드삽입 부분을 전달
2. 카페24 호스팅 업체를 사용하는경우
https://ecsupport.cafe24.com/board/tip/read.html?board_no=5&no=675
*카페 24 고객센터 참고
3. 사이트를 직접 운영중인 경우는 각 <head></head> 태그에서 가장 상단에 1번째 박스 코드를,
<body></body> 태그네 2번째 박스 코드를 삽입하여 주면 된다. *모든 페이지에 해당코드 삽입이 필요하다.
해당코드페이지를 벗어나 코드를 다시 확인하고 싶을때는
해당 GTM 컨테이너 태그관리자 안에서
해당부분의 컨테이너 ID 클릭하면 다시 확인할 수 있다.
해당코드를 잘설치했다면,
미리보기를 클릭 후
미리보기후 사이트주소를 입력후 Connect
코드가 잘 설치되었다면 해당 성공 메세지가 나온다.
설치가 잘 되지않았다면 해당 화면이 나온다.
초기설정 완료
2. GTM 픽셀설치기초 (PageView)
픽셀을 설치 시 "내가 추적하고 싶은 특정한 행동(전환지표)" 가 있을 것이고,
특정한 행동에 따라 각각 다른 픽셀을 삽입할 수 있다
기초전환지표로는 PageView, Click 등이 있다.
GTM을 접속해서 좌상단 메뉴들을 보면
"태그"와 "트리거"를 확인할 수 있고 GTM 작동의 기본 원리가 된다
- 트리거 : 추적하고싶은 특정한 행동
- 태그 : 행동에 대한 결과
트리거는 방아쇠로, 웹페이지에서 특정한 행동이 일어 났을때, 태그(픽셀 실행)을 시켜
정보를 전달하는 구조를 가지고 있다
1) Page View 픽셀
태그 생성 (픽셀코드 삽입)
태그 > 새로만들기
태그구성을 클릭하면 태그유형 (행동이 일어났을때 결과로 무엇을 할 것인지 ) 우측에 여러가지가 존재한다
GTM에서 픽셀을 설치하기 위해서 맞춤 HTML을 선택
미리 저장해놓은 픽셀코드를 해당 부분에 삽입
트리거 설정 ( 전환 지표 설정 )
트리거 박스 > 트리거 선택창 우상단 +
(** 모든 페이지 전환을 추적하고 싶다면 GTM 에서 제공하는 All Page 트리거 선택 가능 )
트리거 구성 > 오른쪽 트리거 유형 선택 > 페이지 뷰
- 모든페이지뷰 : 모든 페이지뷰에 대한 카운트
- 일부페이지뷰 : 특정페이지만 카운트
* 모든페이지뷰 > 저장
일부 페이지뷰 설정 방법
* 여러가지 방법이 있으나 보편적이고 쉬운방법으로 기술
첫번째 박스 > Page URL , 두번째박스 > 포함
URL에 특정 단어가 포함되면 픽셀을 실행시켜주는 방법으로 사용
랜딩페이지 URL에서 UTM을 제외한 / 뒤 마지막 키워드 확인 > 해당 예시 : index
세번째박스에 해당 키워드 삽입 > 저장 > 저장
(* 랜딩페이지 URL을 전부 삽입하지 않는 이유 : 랜딩페이지에는 보통 UTM 이라는 어떤 광고로 랜딩페이지를 유입했는지 URL로 구분하는 인자를 기입하기 때문에 모든 페이지뷰 집계를 내기 위해서는 키워드로 삽입해 주는것이 유리하다 )
태그생성완료
GTM 메인페이지, 우 상단 제출을 클릭하면 웹페이지에 적용된다
* 코드를 삽입하는것이기때문에 바로 제출 방법을 추천 하지 않음
미리보기를 통해 태그/트리거 작동여부를 확인하고 제출하는 것을 권장
미리보기
미리보기를 통해 태그/트리거가 내가원하는 행동에, 잘 설치되었는지 확인 할 수 있다.
GTM 메인페이지 우상단 미리보기
랜딩페이지 URL 삽입 > Connect
(*초기설정이 잘되었다면 연결이 문제없이 진행된다)
탭에 각 화살표가 잘 떠있는지 확인후 연결을 확인한다
랜딩페이지에서 행동을 하였을때 태그/트리거가 잘 작동했는지 미리 확인 할 수 있다.
Tages Fired 에서 내가 설치한 태그/트리거가 실행됬는지 확인
확인후 웹페이지에 적용하면된다.
2) 메타 내부 툴을 통해 설치하기 (기초)
비즈니스매니저 > Event Manger
*초기설정은 해당 링크 참조
2022.10.07 - [퍼포먼스마케팅] - 페이스북 픽셀 발급 방법
페이스북 픽셀 발급 방법
페이스북 픽셀 발급방법 https://www.facebook.com/business/help/952192354843755?id=1205376682832142 Facebook 픽셀을 설정하고 설치하는 방법 | Meta 비즈니스 지원 센터 Facebook 픽셀을 사용하여 고객 행동..
silver-liq9118.tistory.com
Event Manager > Data Sources
픽셀이름 확인후 > Settings
Event Set Up > Open Event Setup Tool
입력칸에 랜딩페이지 주소를 입력 > Connect
Disconnect라고 뜨면 잘 연결된것
*잘 설치했는데 오류가 나온다면 일단 엔터 or 해당 랜딩페이지에 접속 해보면 연결되는 경우가 있다
연결된 랜딩페이지 왼쪽상단에보면 Facebook Event Setup Tool 박스가 생기게되고,
여기서 픽셀들을 설치할 수 있다
Track New Botton을 누르면 해당페이지의 픽셀을 심을수 있는 요소들을 자동으로 보여주고, 원하는위치에 픽셀을 심기에 편하게 제공된다.
만약, Item One을 클릭하거나 장바구니에 담는 사람들을 추적하고싶다면 Item One 글씨를누르고,
원하는 지표를 고른후 확인을 눌러주면된다
'퍼포먼스마케팅' 카테고리의 다른 글
| [퍼포먼스 마케팅] 카카오모먼트 픽셀 발급 방법 (0) | 2022.10.07 |
|---|---|
| [퍼포먼스 마케팅] 페이스북 픽셀 발급 방법 (0) | 2022.10.07 |
| [퍼포먼스 마케팅] 픽셀 2. 픽셀 발급 방법 (페이스북 픽셀, 카카오 픽셀) (0) | 2022.09.27 |
| [퍼포먼스 마케팅] 픽셀 1. 개념과 원리 (0) | 2022.09.05 |
| [퍼포먼스 마케팅] GA (Google Analytics) - Tistory 연동하기 (0) | 2021.05.21 |