React | 페이스북 픽셀 연결하기 (React Facebook Pixel)

✋🏻잠깐! 들어가기 전에

• React-pixel 라이브러리를 사용하여 구현하였습니다.
• 광고를 통해 들어온 사람들만의 행동을 따로 측정할 수 있도록 하였습니다.
• 픽셀의 고급 매칭 기능은 자세히 다루지 않습니다.
• 앞 부분은 설명입니다. 바로 구현하길 원하시는 분은 React Facebook Pixel - 실제사용법 부터 봐주세요

 

페이스북 픽셀이란?

페이스북 픽셀은 잠재 고객이 광고를 클릭한 이후에 웹사이트에 도착해서 어떤 특정 행동을 하는지 알려 줍니다. 페이스북 픽셀을 사용함으로써 이 타겟을 기반으로 광고 효율을 높일 수 있습니다.

 

픽셀로 사용자들의 어떤 행동들을 확인할 수 있을까요? 전반적으로 페이지를 보거나, 상품을 구매하거나 문서를 등록하는 행동들을 통계로 확인할 수 있게됩니다. 버튼을 클릭하는 것으로 이벤트 관리자 페이지에서 픽셀을 등록할 수 있지만 직접 개발자가 코드에 픽셀을 심게 되면 기존 이벤트뿐만 아니라 특정 커스텀 이벤트를 만들 수 있습니다.

 

기본적으로 픽셀은 페이스북 광고를 보고 유입된 사람과 광고를 보지않고 들어온 사람의 행동을 모두 수집합니다. 광고를 보고 유입된 사람들의 행동만 추적하게 하고 싶다면 쿠키를 체크하거나 광고를 보고 들어온 파라미터를 체크 후 분기 처리하면 광고를 본 사람들의 행동만 통계에서 볼 수 있습니다.

 

 

픽셀 설치 (SPA가 아닌 프로젝트일때)

페이스북 관리자에서 픽셀을 추가하면 해당 코드를 복사하여 자신의 프로젝트 head에 붙여 넣을 해당 코드를 제공합니다.

<!-- Meta 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', '1234567891011121'); //PIXEL 생성된 ID
      fbq('track', 'PageView'); // 모든 페이지를 조회하는 기능
    </script>
    <noscript>
       <img
        height="1"
        width="1"
        style="display: none"
        src="https://www.facebook.com/tr?id=1234567891011121&ev=PageView&noscript=1"/>
    </noscript>
    <!-- End Meta Pixel Code -->

 

자 그럼 해당 코드를 한번 살펴보겠습니다.

- 모든 코드는 공통적인 부분이며, 해당 부분의 픽셀 ID의 값만 자신의 픽셀 값으로 적용하면 됩니다.

fbq('init', '1234567891011121');

<img
...
src="https://www.facebook.com/tr?id=1234567891011121&ev=PageView&noscript=1"/>

 

- 페이지를 조회했을 때, 물건을 구매했을 때 등의 이벤트들에 픽셀을 심고 싶다면 페이스북 픽셀 표준 이벤트 사양을 참고하여 이벤트에 맞는 코드를 추가해주면 됩니다.

fbq('track', 'PageView');

 *페이스북 픽셀 표준 이벤트 사양

https://www.facebook.com/business/help/402791146561655?id=1205376682832142

 

react는 하나의 index.html이 모든 페이지에 공통적으로 적용되기 때문에, 페이지 조회와 같은 이벤트는 사용할 수 있지만 구매, 회원가입, 로그인, 로그아웃 등등 특정 이벤트에 픽셀을 심기에는 어려움이 있었기에 리액트에서 픽셀을 쉽게 심기 위해 React Facebook Pixel 라이브러리를 사용해야 했습니다.

 

 

REACT Facebook Pixel

npm install --save react-facebook-pixel

 

How to use - 라이브러리 내용 

import ReactPixel from 'react-facebook-pixel';

const advancedMatching = { em: 'some@email.com' }; // optional, more info: https://developers.facebook.com/docs/facebook-pixel/advanced/advanced-matching
const options = {
  autoConfig: true, // set pixel's autoConfig. More info: https://developers.facebook.com/docs/facebook-pixel/advanced/
  debug: false, // enable logs
};
ReactPixel.init('yourPixelIdGoesHere', advancedMatching, options);

ReactPixel.pageView(); // For tracking page view
ReactPixel.track(event, data); // For tracking default events. More info about standard events: https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking#standard-events
ReactPixel.trackSingle('PixelId', event, data); // For tracking default events.
ReactPixel.trackCustom(event, data); // For tracking custom events. More info about custom events: https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking#custom-events
ReactPixel.trackSingleCustom('PixelId', event, data); // For tracking custom events.

라이브러리 공식 페이지에 나와있는 사용법을 한번 훑어보겠습니다.

라이브러리를 import 해서.. 초기 세팅을 해주고.. ReactPixel.pageView(),ReactPixel.track(event, data) 등의 명령어를 사용하여 픽셀을 심어주는구나..! 그럼 고급 매칭에 대한 정보는 필수인가? 처음에 받았던 코드는 그대로 사용하는 건가? 너무 간략화된 설명으로 의문이 풀리지 않아 처음 사용해보려는데 많은 애를 먹었습니다 ㅠㅠ

검색 중에 해당 라이브러리의 index.js를 살펴보면 큰 도움이 될 거라는 글을 보고 index 파일을 펼쳐보는 순간, ReactPixel에 해당하는 함수들의 의미를 이해할 수 있었습니다.

https://github.com/zsajjad/react-facebook-pixel/blob/master/src/index.js

GitHub - zsajjad/react-facebook-pixel: React JS wrapper for Facebook's Pixel

 

 

How to use - 실제 사용법 

init

// src> index.tsx
import ReactPixel from 'react-facebook-pixel';

const PIXEL_ID = '1234567891011121';
ReactPixel.init(PIXEL_ID);

react pixel init은 윗줄의 코드로 index.tsx에 초기화를 할 수 있습니다. react pixel 라이브러리는 픽셀 생성 시 받았던 초기화 코드를 함수 안에 모두 포함하고 있으므로 따로 head 안에 script로 작업을 해주지 않아도 됩니다.

 

*고급 매칭 기능

고급 매칭 기능은 옵션이므로, 사용하고자 할 때 추가해주면 됩니다.

const PIXEL_ID = '1234567891011121';
const adMatching = {
  em: 'myemail@gamil.com',
  country: 'ko',
  db: '19990101',
  fn: 'ye',
  ln: 'dio',
  ge: 'f',
  ph: '01022223333',
  ct: '',
  st: '',
  zp: '',
};
ReactPixel.init(PIXEL_ID, adMatching);

 

pageView()

 ReactPixel.pageView();

페이지를 조회했을 때 일어나는 기본 이벤트이며, 저는 모든 페이지의 조회수를 알기 위해 Router 안에 따로 컴포넌트를 만들어 추가하였습니다. 

// Router.tsx

export default function Router() {
  return (
    <BrowserRouter>
      <EventTracker />
      <Routes>
          <Route path="/" element={<Main />} />
      </Routes>
      </HeaderTop>
      <Footer />
    </BrowserRouter>
  );
}

// EventTracker.tsx

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import ReactPixel from 'react-facebook-pixel';

export default function EventTracker() {
  const location = useLocation();

  useEffect(() => {
    ReactPixel.pageView();
  }, [location]);

  return <div />;
}

 

 

픽셀 이벤트 심기

페이스북에서 제공하는 픽셀 표준 이벤트 사양의 코드는 react pixel에서 어떻게 사용하면 될까요?

ReactPixel.track('Purchase', {currency: 'KRW',value: clickedPoint});
ReactPixel.trackCustom('ShareDiscount', {promotion: 'share_discount_10%'});

페이스북에서 제공하는 픽셀 표준 이벤트 사양의 코드는 ReactPixel.track으로 심고자 하는 함수에 심으면 되고, 개인이 커스텀해서 제작하고자 하는 이벤트는 ReactPixel.trackCustom을 사용해서 심으면 됩니다.

 

해당 사이트에서 이벤트 테스트 시 보이는 화면.

위와 같은 작업을 끝내고 해당 프로젝트를 배포한다면 페이스북 이벤트 관리자에서 사이트에서 모든 사용자들이 하는 행동들을 추적할 수 있게 되고, 일자별 통계를 확인할 수 있습니다.

저도 픽셀은 처음인지라.. 페이스북 광고를 통해 들어오는 사람들이 아니라, 사이트를 방문하는 모든 사용자들의 행동을 추적하게 되면 페이스북 픽셀을 사용하는 의미가 없지 않을까?라는 의문이 계속 들었어요

아니라 다를까 페이스북 광고에서 url을 통해 들어온 사용자들의 행동을 추적해달라고 수정 요청이 들어왔습니다.

마케팅 팀이 페이스북 채널에 게시된 광고를 직접 클릭했더니, 그동안의 의문이 풀렸고, 페이스북 광고를 보고 들어온 사람들만의 추적을 할 수 있었습니다.

 

추가. 페이스북 광고를 통해 들어온 사람들만의 행동을 추적하게 수정하기

페이스북 광고를 게재한 링크를 타고 사이트에 들어온다면, 두 가지 변화를 감지할 수 있게 됩니다.

사이트 url 뒤에 붙는 ?fbclid=~~~~~~~~

fbclid= 하고 뒤에 붙는 주소는 다른 페이지로 넘어가면 자동으로 사라집니다.

 

쿠키에 생성되는 _fbc

해당 밸류에는 ?fbclid= 뒤에 붙는 값과, 픽셀 ID 값이 저장됩니다.

 

 

코드 작업

픽셀 이벤트를 실행하기 전에 _fbc 쿠키값을 가지고 있는지 체크를 하고, 가지고 있다면 이벤트를 실행시키게 하면 됩니다.

export const getCookieValue = (key: string) => {
  let cookieKey = key + '=';
  let result = '';
  const cookieArr = document.cookie.split(';');

  for (let i = 0; i < cookieArr.length; i++) {
    if (cookieArr[i][0] === ' ') {
      cookieArr[i] = cookieArr[i].substring(1);
    }

    if (cookieArr[i].indexOf(cookieKey) === 0) {
      result = cookieArr[i].slice(cookieKey.length, cookieArr[i].length);
      return result;
    }
  }
  return result;
};



...


if (getCookieValue('_fbc')) {
  ReactPixel.trackCustom('Login');
}

위 작업은 사이트의 쿠키를 토대로 통계를 보내기 때문에 유저가 쿠키를 삭제하거나, 다른 PC 혹은 다른 브라우저에서 접속 시에는 추적할 수는 없을 겁니다. 또한, 기본적으로 _fbc에 담긴 쿠키는 만료기간이 3개월 이후로 저장되는데 이 기간이 너무 길다고 생각되신다면, _fbc가 아닌 직접 쿠키를 생성하면 만료기간을 원하는 기간으로 설정해놓을 수 있습니다.

 

이벤트 테스트 시 잘 들어오는지 확인!