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

페이스북에서는 '픽셀'이란걸 제공해서 이걸 이용해 고객들에게 광고를 할 수 있도록 하고 있습니다.

페이스북을 이용해서 사업을 하게 되면 필수요건이라고 생각하면 됩니다.

기본 가이드라인

영문 https://developers.facebook.com/docs/facebook-pixel/api-reference

한글 https://www.facebook.com/business/help/www/952192354843755#has_old_ca

이벤트 구현 가이드 라인

한글 https://www.facebook.com/business/help/402791146561655?helpref=faq_content

영문 https://developers.facebook.com/docs/marketing-api/audiences-api/pixel

일단 가이드라인은 한글로 읽고 좀 부족한 부분은 영문으로 보면 쉽게 이해가 됩니다.

한글 가이드라인은 좀 간단히 되어있어서 세세한 코드 부분이 빠져 있습니다

뭐 이거 안 읽어도 설치하는덴 이상없습니다.

그리고 픽셀 설치에 앞서 '픽셀헬퍼'를 크롬에 설치합니다.

용도는 사이트에서 픽셀이 제대로 작동하는지 오류가 나면 어떤 오류인지 알려주는 확인용입니다.

https://chrome.google.com/webstore/detail/facebook-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc

픽셀에선 기본코드와 이벤트 코드로 나뉘게 됩니다.

기본코드는 모든 페이지에 적용하는게 기본이기에 보통 헤더에 설치하게 됩니다.

그리고 이벤트 코드는 이벤트에 맞게 각각의 페이지에 추가로 설치하게 됩니다.

우선 광고관리자-픽셀 메뉴로 이동합니다.

그리고 상단의 픽셀 설정을 누루면 나오는 팝업에서 '코드 복사하여 붙여넣기'를 선택합니다.

아래 화면이 나오면 픽셀 부분을 클릭하면 자동으로 복사됩니다.

이제 퍼스트몰 관리자로 접속해서 헤더 파일을 엽니다.

경로는 '스킨폴더/_modules/common/html_header.html' 입니다.

아니면 아이디자인 모드에서 에디터를 띄우고 왼쪽 폴더에서 선택하시면 됩니다.

그리고 편하게는 가장 하단 즈음에서 </head> 위쪽에다 그대로 붙여넣기 하면 됩니다.

보통은 이렇게 하면 기본 코드는 설치가 완료지만 퍼스트몰에선 추가 작업이 필요합니다.

퍼스트몰 상품 상세페이지에서 QnA와 상품후기 게시판은 아이프레임으로 가져오게 되어있습니다.

문제는 이 게시판을 가져올때 각각의 게시판에서도 헤더가 작동이 되기에 페이스북 기본 코드가 총 3번 작동하게 됩니다.

헬퍼에서 보면 오류가 보일겁니다.

그래서 아이프레임에선 픽셀을 불러오지 않도록 해야 합니다.

아래 볼드로 해놓은 것처럼 픽셀 소스 위에 한줄. 끝나고서 한줄.

이렇게 해주면 해당 코드 안에 있는 소스들은 아이프레임 적용을 안받게 됩니다.

<!--{? !_GET.popup && !_GET.iframe }--> 

<!-- Facebook Pixel Code -->

<script>

!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?

n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;

n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;

t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,

document,'script','https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '페이스북아이디'); // Insert your pixel ID here.

fbq('track', 'PageView');

</script>

<noscript><img height="1" width="1" style="display:none"

src="https://www.facebook.com/tr?id=페이스북아이디&ev=PageView&noscript=1"

/></noscript>

<!-- DO NOT MODIFY -->

<!-- End Facebook Pixel Code -->

 

<!--{/}-->

이러면 퍼스트몰에서도 픽셀이 정상적으로 작동하게 됩니다.

다음 이벤트 코드 설치하기 ▼ 클릭

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