가비아 퍼스트몰에 페이스북 픽셀 설치하기 - 이벤트코드

기본코드 설치를 한 지난글(가비아 퍼스트몰에 페이스북 픽셀 설치하기 - 기본코드)에 이어 이번에는 이벤트 코드 설치 내용입니다.

기본코드에서는 페이스북 사용자들이 들어오면 그걸 체크해놓고서 방문자 수를 모아둡니다.

이벤트 코드에선 좀더 세세한 내용을 수집을 합니다.

검색, 콘텐츠조회, 장바구니 담기, 위시리스트추가, 결제시작, 결제정보추가, 구매, 잠재고객, 회원가입, 맞춤이벤트

이중에서 제가 설치하는건 검색, 콘텐츠조회, 장바구니담기, 결제시작, 구매, 회원가입 이렇게 6가지입니다.

나머지도 자기가 원하면 설치 가능합니다.

이벤트 코드는 해당 이벤트 페이지에 설치를 추가로 해야합니다.

회원가입 이벤트를 할려면 회원가입완료 페이지에 소스를 설치하는식입니다.

아까와 같이 픽셀 설치 페이지로 이동하고 2번. 이벤트 코드 설치를 클릭하면 아래와 같은 화면이 나옵니다.

자기가 원하는 이벤트를 선택하면 해당 이벤트의 소스가 나옵니다.

그리고 상단의 기본, 권장, 고급 이렇게 3가지가 있는데

기본은 해당 이벤트가 있는 페이지로 들어왔을때 기본 코드같이 '체크'만 하게 됩니다.

권장은 몇가지 정보를 더 가져오도록 하고 있습니다.

고급에선 DA광고를 위해서 좀더 많은 정보를 요구하고 있습니다.

자기가 생각했을때 많은 정보가 필요없다고 하면 기본만 설치해도 됩니다만

정보는 얻을 수 있을때 최대한 많이 모아놔야 나중에 사용가능합니다.

* DA 광고는 개인광고계정일땐 사용을 못하고 비지니스 계정일때만 사용가능합니다.

* 저는 DA광고에 필요한 정보까지 설치를 하고 있습니다. 

필요한 정보가 'content_type' 과 'content_ids' 인데 비지니스 계정이 아닐경우에는 픽셀 헬퍼에서 

비지니스 계정이 필요하다는 안내가 나오게 됩니다. 필요없다면 무시해도 됩니다.

* 각 이벤트 소스에선 페북에서 필요로 하는 정보가 아니라도 자기가 필요하면 항목을 더 넣어서 수집이 가능합니다.

* 소스는 pc스킨과 모바일스킨 동일하게 넣어야 합니다. 경로는 똑같습니다.

- 콘텐츠조회

보통 쇼핑몰 상품페이지에 넣어서 상품(콘텐츠)을 보는걸 체크하는게 기본입니다.

아래 소스를 복사해서 상품페이지에 넣으면 됩니다.

경로는 '스킨폴더/goods/view.html' 입니다.

상품이름, 카테고리, 상품코드 이렇게 3가지 정보를 수집하는 소스입니다.

content_type: 'product' 는 DA용을 구분할때 필요한 부분으로 고정입니다.

<!-- Facebook Pixel Code -->

<script>

fbq('track', 'ViewContent', {

value: '{goods.sale_price}',

currency: 'KRW',

content_name: '{goods.goods_name}',

content_category:'{=implode("|",goods.category)}',

content_type: 'product',

content_ids: [{goods.goods_seq}]

});   

</script> 

<!-- End Facebook Pixel Code -->

- 장바구니 넣기

이 부분은 예전부터 많이 고민해왔던건데 사람들이 장바구니 페이지보단 상품페이지에서 장바구니 버튼을 클릭해서 넣는걸

체크하는게 더 좋겠단 생각을 해와서 이번에 그렇게 처리했습니다.

기본 소스는 페이스북 픽셀 설정에서 2-2에서 2가지타입. 페이지 읽어들일때 이벤트 전송과 액션시 이벤트 보내기중

액션 시 이벤트 보내기 소스입니다. 마침 장바구니 소스로 되어있습니다.

기존 콘텐츠조회와 마찬가지로 상품 페이지에 넣으면 됩니다.

그리고 퍼스트몰에서 장바구니 페이지에서는 상품이 여러개 담겨있을때 상품 id값을 불러올 수 있는 함수가 없습니다.

그래서 상품페이지에서 장바구니 버튼 액션으로 상품 정보를 보내면 유실없이 처리가 가능합니다.

* 퍼스트몰의 기본 장바구니 소스를 수정하면 id값이 안맞을 수 있습니다.

* 장바구니 버튼 소스보다는 아래에 있어야 정상작동 합니다.

<!-- Facebook Pixel Code -->

<!-- Add event to the button's click handler -->

<script type="text/javascript">

$( '#addCart').click(function() {

fbq('track', 'AddToCart', {

content_ids: [{goods.goods_seq}] ,

content_type: 'product',

value: '{goods.sale_price}',

currency: 'KRW',

content_name: '{goods.goods_name}',

content_category:'{=implode("|",goods.category)}'

});

});

</script>

<!-- End Facebook Pixel Code -->

이렇게 소스를 넣고서 상품페이지로 이동해서 픽셀 헬퍼를 보면 하단 이미지처럼 장바구니 부분에 오류가 보입니다.

이 부분은 아직 장바구니 이벤트가 작동을 안하지만 스크립트를 발견했기에 나오는 메세지입니다.

장바구니 버튼을 누룬 후 다시 헬버를 확인해보면 오류가 해결되어진 상태로 보입니다.

혹시라도 이때에도 오류가 보이면 문제가 있는것입니다.

- 결제시작

크게 중요하진 않지만 여기를 해두면 결제시작하고서 실패비율을 체크 할 수 있습니다.

경로는 '스킨폴더/order/settle.html' 입니다

<!-- Facebook Pixel Code -->

<script>

fbq('track', 'InitiateCheckout');

</script>

<!-- End Facebook Pixel Code -->   

- 결제완료

가장 중요한 결제 완료 페이지입니다. 약간의 추가 스크립트가 필요합니다.

이벤트 소스 위에 있는 부분이 추가 스크립트이니 같이 넣어주면 됩니다.

경로는 '스킨폴더/order/complete.html' 입니다

<!-- Facebook Pixel Code -->

<script>

var ids = new Array();

{ @ items}

  ids.push({.goods_seq});

{/}

fbq('track', 'Purchase', {

content_ids: eval(ids),

content_type: 'product',

value: parseInt({orders.tot_price}),

currency: 'KRW'

});

</script>

<!-- End Facebook Pixel Code -->

- 검색페이지

원래는 검색시 나오는 상품 id까지 수집하도록 되어있는데 그건 사용자에게 큰 의미가 없다고 판단해서 검색어만 수집합니다. 

맘에 드는 상품이 있다면 상품을 보게되고 그러면 '콘텐츠 조회'에서 수집이 되게 됩니다.

경로는 '스킨폴더/goods/search.html' 입니다.

<!-- Facebook Pixel Code -->

<script>

fbq('track', 'Search', {

search_string: '{=htmlspecialchars(sc.search_text)}'

});

</script>

<!-- End Facebook Pixel Code -->

- 회원가입

경로는 '스킨폴더/member/register_ok.html' 입니다

<!-- Facebook Pixel Code -->

<script>

fbq('track', 'CompleteRegistration');

</script>

<!-- End Facebook Pixel Code -->

* 퍼스트몰에서 sns 회원가입 기능을 사용할 경우 sns로 회원가입을 하게 되면 랜딩페이지가 메인페이지로 빠지게 되어있습니다.

그래서 회원가입 전환을 못잡았는데 3월 패치에서 회원가입완료 페이지로 랜딩 페이지가 변경되어서 전환 체크하는데 문제 없습니다.

이 패치 날짜 이후에 새로 스킨을 받았거나 새로 설치한 분들은 하실 필요없고 그 이전에 사용중이신 분들중에 이 패치를 적용안 하셨으면

페북만이 아니고 다른 로그분석을 위해서라도 패치를 권장해 드립니다.

https://firstmall.kr/ec_hosting/customer/patch_view.php?patchSeq=867

이 패치중에서 /member/agreement.html , _modules/common/html_heaer.html 파일 부분만 패치하면 됩니다.

---

모든 스크립트를 설치가 됐으면 회원가입부터 검색, 장바구니, 주문까지 테스트를 하면서 

각 페이지마다 픽셀 헬퍼로 체크해서 이상유무를 체크하면 됩니다.

그리고 약 10분쯤 지나서 페이스북 광고관리자 픽셀 메뉴로 들어가보면 각 픽셀에서 데이터가 수집이 됐으면 '활성'이 되어지고

오른쪽에 눈 부분을 누루면 해당 데이터가 상세하게 나옵니다.

이제 페이스북을 활용해서 열심히 광고하면 됩니다. ;ㅁ;