Meta 픽셀

고급

단일 페이지 웹 앱의 픽셀을 사용한 대안적인 구현 및 버튼 클릭과 페이지 스크롤을 통한 전환 추적을 위한 팁입니다.

개인정보보호 규정

개인정보보호 규정(GDPR)을 따르는 국가에서 비즈니스를 운영하는 경우 규정 준수 방법을 알아보려면 GDPR 문서를 참조하세요.

IMG 태그를 사용한 픽셀 설치

IMG 태그를 사용하여 픽셀을 설치할 수는 있지만 구현 가이드에서 다른 방법을 참조하는 것이 좋습니다.

가벼운 구현을 사용하여 픽셀을 설치해야 하는 경우 <img> 태그를 사용하여 설치할 수 있습니다. 이렇게 하려면 웹사이트의 헤더 또는 본문 내의 <noscript> 태그의 열기 및 닫기 지점 사이에 코드를 추가하고 {pixel-id}를 픽셀 ID로 교체하고 {standard-event}를 표준 이벤트로 교체합니다.

<img src="https://www.facebook.com/tr?id=&#123;pixel-id&#125;&amp;ev=&#123;standard-event&#125;" height="1" width="1" style="display:none"/>

<img> 태그를 사용하여 설치된 픽셀은 쿼리 문자열에 포함할 수 있는 매개변수도 지원합니다. 예를 들면 다음과 같습니다.

<img src="https://www.facebook.com/tr?id=12345
  &amp;ev=ViewContent
  &amp;cd[content_name]=ABC%20Leather%20Sandal
  &amp;cd[content_category]=Shoes
  &amp;cd[content_type]=product
  &amp;cd[content_ids]=1234
  &amp;cd[value]=0.50
  &amp;cd[currency]=USD" height="1" width="1" style="display:none"/>

제한 사항

  • 페이지를 읽어들일 때마다 여러 번 실행할 수 없습니다.
  • UI 상호작용(예: 버튼 클릭)으로 트리거되는 표준 또는 맞춤 이벤트를 추적할 수 없습니다.
  • 맞춤 데이터 또는 긴 URL을 전송할 때 HTTP GET 제한이 적용됩니다.
  • 비동기식으로 읽어들일 수 없습니다.

IMG 태그 설치 예시

가상 웹사이트의 주요 페이지에 가상의 픽셀 ID(12345)와 맞춤 매개변수(예: cd[currency]=USD)를 사용하여 Meta 픽셀 IMG 태그를 설치하는 예시는 다음과 같습니다.

제품 페이지에서 PageView 이벤트를 추적하는 픽셀과 ViewContent 이벤트를 추적하는 픽셀:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=ViewContent"/>

장바구니에 담기 페이지에서 맞춤 설정 데이터를 포함하는 PageView 이벤트를 추적하는 픽셀과 AddToCard 이벤트를 추적하는 픽셀:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=AddToCart&cd[currency]=USD&cd[value]=0.00"/>

구매 페이지에서 구매에 관한 데이터를 포함하는 PageView 이벤트를 추적하는 픽셀과 Purchase 이벤트를 추적하는 픽셀:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=Purchase&cd[currency]=USD&cd[value]=0.00"/>

iOS 14.5 이상에 대한 취합된 이벤트 측정 IMG 픽셀

Meta의 취합된 이벤트 측정은 iOS 14.5 이상 버전 기기 사용자로부터 발생하는 웹 및 앱 이벤트를 측정할 수 있도록 지원하는 프로토콜입니다. 통계 모델링을 사용할 수 있으며, 데이터가 없거나 일부만 있을 때 결과를 보다 완전하게 확인할 수 있도록 설계되었습니다.

IMG 태그를 사용할 때는 이 문서의 IMG 태그를 사용한 픽셀 설치 섹션을 따르는 것이 좋습니다. IMG 태그를 사용하지 않는 경우에는 구현 가이드를 따르시기 바랍니다.

IMG 픽셀 데이터 누락

런타임 JavaScript

Image 클래스를 웹사이트의 DOM 트리에 덧붙이지 않고 런타임 JavaScript를 사용하여 JavaScript Image 클래스를 생성하는 방법(예: 타사 JavaScript 라이브러리를 사용하여 IMG 픽셀 보내기)으로 IMG 픽셀을 설정할 경우 다음 코드를 추가해야만 Meta에서 IMG 픽셀 데이터를 수신할 수 있습니다.

var nativeBridge = window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.receiveImgPixel;
if (nativeBridge) {
    const postObj = {
        id: {pixel-id},
        ev: {standard-event},
        cd: {stringified-custom-data},
        dpo: {data-processing-options},          // Optional CCPA param
        dpoco: {data-processing-option-country}, // Optional CCPA param
        dpost: {data-processing-option-state},   // Optional CCPA param
    };
    nativeBridge.postMessage(JSON.stringify(postObj));
}

샌드박스 속성

sandbox 속성이 있는 iframe 안에 픽셀 IMG를 넣을 경우 allow-scripts 값을 추가하지 않으면 Facebook에서 IMG 픽셀 데이터를 수신하지 않습니다.

자동 리디렉션 시나리오에 대해 AEM 활성화

광고주의 최적화된 픽셀 이벤트가 실행되는 모든 광고주 관련 웹페이지에서 전환을 고려할 수 있도록 AEM 기능을 확장했습니다(광고주가 URL 단축 서비스나 위치 기반 리디렉션을 사용하는 특수 상황인 경우, 여러 비즈니스 라인을 보유하거나 대행사에 광고 게재를 맡길 수 있습니다). 다음 중 한 가지 시나리오에 해당하고 AEM을 활성화하고자 하는 경우 다음의 권장 사항을 따르는 것이 좋습니다.

  • 전환을 얻으려는 모든 관련 도메인에서 동일한 Meta 픽셀(즉, 동일한 픽셀 ID 및 픽셀 이벤트 이름 쌍)을 사용합니다.
  • 이와 같은 모든 도메인에서 전환을 얻으려는 AEM 이벤트를 우선순위로 설정합니다.

버튼 클릭 추적

방문자가 버튼을 클릭하면 Meta 픽셀의 JavaScript 코드가 관련 양식 필드를 자동으로 감지하고 Meta에 전달합니다.

예를 들어 이커머스 웹사이트를 운영하고 있는데 이 사이트의 '장바구니에 담기' 버튼이 새로운 페이지로 연결되지 않는 경우를 가정합니다. 이 경우 버튼이 클릭될 때 이벤트를 활성화해야 할 수 있습니다.

이 예시에서는 페이지를 읽어들일 때 ViewContent 표준 이벤트를 활성화합니다. 누군가가 '장바구니에 담기' 버튼을 클릭하면 AddToCart 표준 이벤트를 활성화합니다.

이렇게 하려면 먼저 페이지를 읽어들일 때 실행하려는 Meta 픽셀 코드를 읽어들입니다.

<!-- Facebook Pixel Code --> <script> fbq('track', 'ViewContent', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 0.50, currency: 'USD' }); </script> <!-- End Facebook Pixel Code -->

새로운 페이지를 읽어들이거나 '장바구니에 담기' 버튼을 클릭했을 때 AddToCart를 실행합니다. 버튼 클릭을 처리하는 방법은 여러 가지가 있습니다. eventListener를 버튼에 추가하는 예시는 다음과 같습니다.

<!-- Somewhere there is a button that performs Add to Cart --> <button id="addToCartButton">Add To Cart</button> <!-- Add Pixel Events to the button's click handler --> <script type="text/javascript"> var button = document.getElementById('addToCartButton'); button.addEventListener( 'click', function() { fbq('track', 'AddToCart', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 4.99, currency: 'USD' }); }, false ); </script>

클릭 이벤트를 처리하는 방법에는 여러 가지가 있지만 클릭 후에는 언제나 fbq 함수를 호출해야 합니다.

픽셀 구현 방법에 따라, 버튼을 클릭하기 전에 픽셀 지원 도구가 오류를 표시할 수 있습니다. 버튼을 클릭하면 픽셀 지원 도구의 오류가 닫히고 픽셀이 올바르게 실행되었는지 확인할 수 있습니다.

공개 범위에 따라 이벤트 트리거

이 예시에서는 블로그의 글 내용 전체를 읽은 사용자를 추적하려고 합니다. 해당 사용자는 페이지 끝까지 스크롤하는 동작 외에 다른 행동이 없습니다.

픽셀을 읽어들일 페이지의 샘플 HTML:

<!DOCTYPE html> <html> <head> <!-- 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', '<FB_PIXEL_ID>'); fbq('track', "PageView"); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<FB_PIXEL_ID>&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code --> </head> <body> <h1>Scroll Page until the Lead event is fired</h1> <div style="height: 120vh; width: 100vw; background-color: #00f;"></div> <h1 id="fb-fire-pixel">Lead event will fire when this phrase enters the screen</h1> <div style="height: 120vh; width: 100vw; background-color: #000;"></div> </body> </html>

id=fb-fire-pixel을 포함한 h1 요소가 나타나면 Lead 표준 이벤트를 실행해야 합니다. 화면에 요소가 보이는지 확인하기 위해 다음 코드를 해당 페이지에 추가합니다.

// This code should be loaded together with Meta Pixel

var executeWhenElementIsVisible = function(dom_element, callback) {

  if (!(dom_element instanceof HTMLElement)) {
    console.error('dom_element must be a valid HTMLElement');
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function isOnViewport(elem) {
    var rect = elem.getBoundingClientRect();
    var docElem = document.documentElement;
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || docElem.clientHeight) &&
      rect.right <= (window.innerWidth || docElem.clientWidth)
    );
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && isOnViewport(dom_element)) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  window.addEventListener('scroll', executeCallback, false);
};

그런 다음 요소가 화면에 보일 때 픽셀을 실행하는 방법을 정의해야 합니다.

// Get the element that should be visible to trigger the pixel fire
var element = document.getElementById('fb-fire-pixel');

// Then, set the event to be tracked when element is visible
// Note that second parameter is a function, not a function call
executeWhenElementIsVisible(element, function() {
  fbq('track', 'Lead');
});

페이지 길이 또는 비율에 따라 이벤트 트리거

이 예시에서는 사용자가 읽은 페이지 길이 또는 비율에 따라 사용자를 추적하려고 합니다. 해당 사용자는 원하는 페이지 길이나 비율까지 스크롤하는 동작 외에 다른 행동이 없습니다.

첫 번째 예시에서는 사용자가 읽은 페이지의 길이를 추적합니다. 이 예시에서는 사용자가 페이지에서 500px까지 읽은 경우 잠재 고객 픽셀을 실행합니다.

var executeWhenReachedPageLength = function(length, callback) {
  if (typeof length !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof length,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getCurrentScrolledLengthPosition() > length) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getWindowLength() >= length) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPageLength(10, function() {
  fbq('track', 'Lead');
});

두 번째 예시에서는 사용자가 읽은 페이지의 비율을 추적합니다. 이 예시에서는 사용자가 페이지의 75%까지 읽은 경우 잠재 고객 픽셀을 실행합니다.

var executeWhenReachedPagePercentage = function(percentage, callback) {
  if (typeof percentage !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof percentage,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getDocumentLength() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    )
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getScrollableLength() {
    if (getDocumentLength() > getWindowLength()) {
      return getDocumentLength() - getWindowLength();
    } else {
      return 0;
    }
  }

  var scrollableLength = getScrollableLength();

  window.addEventListener("resize", function(){
    scrollableLength = getScrollableLength();
  }, false)

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  function getPercentageScrolled() {
    if (scrollableLength == 0) {
      return 100;
    } else {
      return getCurrentScrolledLengthPosition() / scrollableLength * 100;
    }
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getPercentageScrolled() > percentage) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getDocumentLength() == 0 ||
    (getWindowLength()/getDocumentLength() * 100 >= percentage)) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPagePercentage(75, function() {
  fbq('track', 'Lead');
});

지연된 픽셀 실행

예를 들어 픽셀 이벤트를 실행하기 몇 초 전에 웹사이트와 상호작용한 사용자를 추적하려고 합니다. 이 경우에는 setTimeout 함수를 사용합니다.

// Delay pixel fire by 3 seconds
var seconds = 3;
setTimeout(function() {
  fbq('track', 'Lead');
}, seconds * 1000);

이 방법으로 콘텐츠를 너무 빠르게 넘기지 않고 실제로 읽고 있는, 페이지에 '참여하는' 방문을 추적하는 데 사용할 수 있습니다.

세션별로 읽은 아티클에 따라 이벤트 트리거

사이트에서 특정 수의 글을 읽은 사용자를 알고 싶은 경우 세션 카운터를 설치하고 세션이 발생할 때마다 Meta 픽셀 코드를 읽어들일 수 있습니다.

세션은 사이트 요청 1건당 일정 시간 내에 발생할 수 있는 웹사이트와 사용자 간 상호작용의 모음입니다. 일정 시간 내에 사용자 활동이 탐지되는 동안은 페이지 조회수가 증가합니다.

site_request별로 달라질 수 있는 sessionCountViews가 있다고 가정하면 카운트한 페이지 조회수에 따라 Meta 픽셀 코드를 추가할 수 있습니다.

조회한 6번째 아티클에 대해서만 카운트하는 예시

if (site_request.sessionCountViews == 6) {
  fbq('track', "ViewContent", {
    sessionCountViews: site_request.sessionCountViews,
  });
}

여러 픽셀을 사용하는 선택적 이벤트 추적

같은 페이지에 여러 개의 픽셀이 있고 각 고유 픽셀에서 이벤트를 선택적으로 실행하려는 경우 trackSingle 및 trackSingleCustom 기능을 사용해야 합니다.

여러 개의 픽셀이 초기화된 페이지에서 track 함수(여러 기본 코드를 사용하거나 하나의 기본 코드 내에 결합하여 사용하는 방식)를 사용하면 과도한 실행이나 예상치 못한 동작이 발생할 수 있기 때문에 이 방법은 특정 상황에만 적용해야 합니다.

초기화된 픽셀 양쪽 모두에서 PageView 이벤트를 실행한 다음, 한 픽셀에서는 표준 이벤트(Purchase)를 실행하고 두 번째 픽셀에서는 맞춤형 이벤트를 실행하는 예시입니다.

fbq('init', '<PIXEL_A>');
fbq('init', '<PIXEL_B>');
fbq('track', 'PageView'); //fire PageView for both initialized pixels

// only fire the Purchase event for Pixel A
fbq('trackSingle', '<PIXEL_A>', 'Purchase', {
      value: 4,
      currency: 'GBP',
});

// only fire the custom event Step4 for Pixel B
fbq('trackSingleCustom', '<PIXEL_B>', 'Step4',{
  //optional parameters
});

각 픽셀에 대한 이벤트 추적

웹사이트에 설치된 픽셀 중 하나에만 이벤트를 전송해야 하는 특수한 경우가 있습니다. 예를 들어 전송되는 데이터를 웹사이트의 픽셀 하나로 제한할 수 있습니다. 이러한 메서드는 단일 픽셀에 대한 픽셀 실행을 추적합니다. 이 경우 다음 호출을 사용합니다.

fbq('trackSingle', 'FB_PIXEL_ID', 'Purchase', customData);
fbq('trackSingleCustom', 'FB_PIXEL_ID', 'CustomEvent', customData);

자동 구성

Meta 픽셀은 웹사이트의 버튼 클릭 및 페이지 메타데이터(예: Opengraph 또는 Schema.org 형식에 따라 구조화된 데이터)를 전송하여 광고 게재와 측정을 개선하고 픽셀 설정을 자동화할 수 있습니다. Meta 픽셀이 이런 추가 정보를 전송하지 않도록 구성하려면 Meta 픽셀 기본 코드의 init 호출 위에 fbq('set', 'autoConfig', 'false', 'FB_PIXEL_ID')를 추가하세요.

<!-- 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'); 
// Line to enable Manual Only mode.
fbq('set', 'autoConfig', false, 'FB_PIXEL_ID'); 
//Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID'); 
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

콘텐츠 보안 정책

웹사이트에 콘텐츠 보안 정책이 있으면 JavaScript를 https://connect.facebook.net에서 읽어들이도록 허용해야 합니다. 참고: 픽셀은 두 가지 경로(/en_US/fbevents.js와 /signals/config/{pixelID}?v={version})에서 스크립트를 읽어들입니다.