자사몰 픽셀 연동

전환 추적 코드 생성하기

위 페이지의 가이드에 따라 전환 추적 코드를 생성해야 토스 픽셀을 사용할 수 있어요

토스 픽셀 설치하기

(공통) 픽셀 설치

<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>

회원가입 완료 페이지에 삽입하는 것을 권장해요.
전환코드는 토스애즈에서 생성한 값을 문자열(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({
        revenue: "{전체 상품 가격}",
        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({
         lead_type: 'Consultation',
    });
</script>

아래 항목을 참고하여, 업종에 적합한 lead_type으로 삽입해주세요.

이벤트 참여

Event

상담 신청

Consultation

시승 신청

TestDrive

무료체험 신청

FreeTrial

사전예약

Preorder

보험료 조회

QuoteCheck

대출한도 조회

LoanCheck

토스 픽셀 이벤트 수집 확인 방법

픽셀 이벤트 수집 확인하기

위 가이드로 토스 픽셀이 제대로 설치되어 이벤트가 수집되고 있는지 확인할 수 있어요

이전토스 픽셀 연동하기 다음카페24 픽셀 연동

마지막 업데이트 2개월 전

hashtag전환 추적 코드 생성하기

hashtag토스 픽셀 설치하기

hashtag(공통) 픽셀 설치

hashtag이벤트 별 스크립트 코드

hashtag페이지 방문 (page view)

hashtag회원가입 (sign up)

hashtag상품/콘텐츠 상세페이지 조회 (product view)

hashtag장바구니 담기 (add to cart)

hashtag구매 (purchase)

hashtag리드 수집 (lead)

hashtag토스 픽셀 이벤트 수집 확인 방법

전환 추적 코드 생성하기

토스 픽셀 설치하기

(공통) 픽셀 설치

이벤트 별 스크립트 코드

페이지 방문 (page view)

회원가입 (sign up)

상품/콘텐츠 상세페이지 조회 (product view)

장바구니 담기 (add to cart)

구매 (purchase)

리드 수집 (lead)

토스 픽셀 이벤트 수집 확인 방법