자사몰 픽셀 연동
전환 추적 코드 생성하기
전환 추적 코드 생성하기
위 페이지의 가이드에 따라 전환 추적 코드를 생성해야 토스 픽셀을 사용할 수 있어요
토스 픽셀 설치하기
(공통) 픽셀 설치
<script type="text/javascript" charset="UTF-8" src="https://static.toss.im/lex/v1.js"></script>토스 픽셀을 활용하기 위해서는, <head>와 </head> 태그 사이에 script tag 를 추가해주셔야 이벤트 데이터 수집이 가능해요.
이벤트 별 스크립트 코드
토스 픽셀이 지원하는 이벤트 목록은 아래와 같아요.
페이지 방문
pageView
회원가입
signUp
상품 상세페이지 조회
productView
장바구니 담기
addToCart
구매
purchase
리드 수집
lead
이벤트 별 스크립트 코드는 전환 이벤트가 발생하는 지점에 맞춰서 삽입해주셔야 정합성 높게 전환 이벤트 데이터를 수집할 수 있어요.
예를 들어, 상품 상세 페이지를 조회하고 → 이어서 장바구니 담기까지 완료한 이벤트를 추적하고 싶으시다면,
(1) 상품 상세페이지에 “상품/콘텐츠 상세페이지 조회” 이벤트 스크립트 코드 삽입
(2) 장바구니 추가 버튼 클릭 이벤트 발생 시 “장바구니 담기” 이벤트 스크립트 코드 삽입
을 진행하시면 2가지 이벤트를 원활하게 추적할 수 있어요.
페이지 방문 (page view)
사용자가 방문하는 모든 페이지에 설치하는 것을 권장해요.
전환코드는 토스애즈에서 생성한 값을 문자열(string) 형태로 사용해주세요.
<script type="text/javascript" charset="UTF-8" src="https://static.toss.im/lex/v1.js"></script>
<script type="text/javascript">
new TossPixel('전환 코드').pageView();
</script>회원가입 (sign up)
회원가입 완료 페이지에 삽입하는 것을 권장해요.
전환코드는 토스애즈에서 생성한 값을 문자열(string) 형태로 사용해주세요.
<script type="text/javascript" charset="UTF-8"src="https://static.toss.im/lex/v1.js"></script>
<script type="text/javascript">
new TossPixel('전환 코드').signUp();
</script>상품/콘텐츠 상세페이지 조회 (product view)
상품 상세 페이지, 혹은 콘텐츠의 상세 페이지를 방문할 때 발생하는 이벤트에요.
상품/콘텐츠의 상세 페이지에 삽입하는 것을 권장해요.
전환코드는 토스애즈에서 생성한 값을 문자열(string) 형태로 사용해주세요.
스크립트 내 { } 안의 값은 실제 데이터로 변경해주세요.
<script type="text/javascript" charset="UTF-8" src="https://static.toss.im/lex/v1.js"></script>
<script type="text/javascript">
new TossPixel('전환 코드').productView({
product_id: "{상품ID}",
prodcut_name: "{상품명}",
category_id: "{상품 카테고리 ID}",
category_name: "{상품 카테고리명}",
price: {상품 가격},
currency: '{통화명 ex. KRW, USD}',
});
</script>위 스크립트 내 파라미터 값들 중 존재하지 않는 값은 제외하고 전달주셔도 돼요.
장바구니 담기 (add to cart)
유저가 상품/콘텐츠 등을 장바구니에 담을 때 발생하는 이벤트에요.
장바구니 추가 버튼을 누르는 것과 같은 이벤트에 동적으로 스크립트가 작동하는 방식으로 구현하는 것을 권장해요.
전환코드는 토스애즈에서 생성한 값을 문자열(string) 형태로 사용해주세요.
스크립트 내 { } 안의 값은 실제 데이터 값으로 변경해주세요.
<script type="text/javascript" charset="UTF-8" src="https://static.toss.im/lex/v1.js"></script>
<script type="text/javascript">
new TossPixel('전환 코드').addToCart({
total_price: "{전체 상품 가격}",
currency: "{통화명 ex. KRW, USD}",
total_quantity: "{전체 상품 개수}",
products: [
{
product_id: "{상품ID}",
category_id: "{상품 카테고리 ID}",
category_name: "{상품 카테고리명}",
options:[
{option_name: "{옵션명 ex)색상}", option_value: "{옵션값 ex)아이보리}"},
{option_name: "{옵션명 ex)사이즈}", option_value: "옵션값 ex)L"}
]
price: "{상품 가격}",
quantity: "{상품 개수}"
},
{
product_id:
...
}
]
});
</script>위 스크립트 내 파라미터 값들 중 존재하지 않는 값은 제외하고 전달주셔도 돼요.
구매 (purchase)
유저가 상품/콘텐츠 등을 구매할 때 발생하는 이벤트에요.
구매 완료 페이지에 삽입하는 것을 권장해요.
전환코드는 토스애즈에서 생성한 값을 문자열(string) 형태로 사용해주세요.
스크립트 내 { } 안의 값은 실제 데이터 값으로 변경해주세요.
<script type="text/javascript" charset="UTF-8" src="https://static.toss.im/lex/v1.js"></script>
<script type="text/javascript">
new TossPixel('전환 코드').purchase({
total_price: "{전체 상품 가격}",
currency: "{통화명 ex. KRW, USD}",
total_quantity: "{전체 상품 개수}",
products: [
{
product_id: "{상품ID}",
category_id: "{상품 카테고리 ID}",
category_name: "{상품 카테고리명}",
options:[
{option_name: "{옵션명 ex)색상}", option_value: "{옵션값 ex)아이보리}"},
{option_name: "{옵션명 ex)사이즈}", option_value: "옵션값 ex)L"}
]
price: "{상품 가격}",
quantity: "{상품 개수}"
},
{
product_id:
...
}
]
});
</script>위 스크립트 내 파라미터 값들 중 존재하지 않는 값은 제외하고 전달주셔도 돼요.
리드 수집 (lead)
사용자가 이벤트 참여, 상담 신청 등을 하기 위해 DB를 제출했을 때 발생하는 이벤트에요.
상담 신청하기, 보험료 조회하기 등 리드 제출 버튼을 누르는 것과 같은 이벤트에 동적으로 스크립트가 작동하게 구현하거나, 리드 제출 완료 페이지에 삽입하는 것을 권장해요.
전환코드는 토스애즈에서 생성한 값을 문자열(string) 형태로 사용해주세요.
<script type="text/javascript" charset="UTF-8"src="https://static.toss.im/lex/v1.js"></script>
<script type="text/javascript">
new TossPixel('전환 코드').lead({
leadType: 'Consultation',
});
</script>아래 항목을 참고하여, 업종에 적합한 leadType으로 삽입해주세요.
상담 신청
Consultation
시승 신청
TestDrive
무료체험 신청
FreeTrial
사전예약
Preorder
보험료 조회
QuoteCheck
대출한도 조회
LoanCheck
토스 픽셀 이벤트 수집 확인 방법
픽셀 이벤트 수집 확인하기위 가이드로 토스 픽셀이 제대로 설치되어 이벤트가 수집되고 있는지 확인할 수 있어요
Last updated