2013-10-09 2 views
14

저는 아직 자바 스크립트에 익숙하지 않지만 실제로 "확인"/ "감사합니다"페이지를로드하지 않고서는 Facebook 변환 픽셀을 실행하는 가장 좋은 방법이 무엇인지 궁금합니다 (아래).Facebook 전환 픽셀 시작

<script type="text/javascript"> 
var fb_param = {}; 
fb_param.pixel_id = 'XXXXXXXXXXX'; 
fb_param.value = '0.00'; 
fb_param.currency = 'USD'; 
(function(){ 
    var fpw = document.createElement('script'); 
    fpw.async = true; 
    fpw.src = '//connect.facebook.net/en_US/fp.js'; 
    var ref = document.getElementsByTagName('script')[0]; 
    ref.parentNode.insertBefore(fpw, ref); 
})(); 
</script> 
<noscript><img height="1" width="1" alt="" style="display:none" 
src="https://www.facebook.com/offsite_event.php?id=XXXXXXXXXX&amp;value=0&amp;currency=USD" /></noscript> 

페이스 북은 우리는 그들이 (등, 구매를, 양식을 작성)로 변환 한 후 방문자가 볼 것이 우리의 "감사 페이지"로이 연결해야한다고 말한다. 그러나 양식 중 일부는 팝업 옆에있는 사이드 바의 양식으로, 확인 페이지에서 독자를 안내하지 않기를 바랍니다.

Google 웹 로그 분석을 사용하면 _gaq.push ([ '_ trackPageview'])를 실행하여 '보이지 않는'페이지 뷰를 만들 수 있습니다. 잠재 고객에게 보이지 않는 페이지 뷰를 목표 달성으로 간주해야한다고 알릴 수있는 코드입니다.

내 사이트에서 FB 픽셀을 실행하는 데 필요한 일반적인 내용이 있습니까?

답변

13

편집 : 이전에 언급하지 않은 코드가 업데이트되었습니다. @Flambino에게 지적 해 주셔서 감사합니다.

이것은 변환 픽셀을 전달하는 스크립트가 아닌 픽셀을 사용하는 수정 된 답변입니다. 내가 How to track a Google Adwords conversion onclick? 게시물을 참조하십시오 :

<head> 
<script type="text/javascript"> 
function facebookConversionPixel(fb_pixel, fb_value){ 
    var image = new Image(1,1); 
    image.src = "//www.facebook.com/offsite_event.php?id=" + fb_pixel + "&amp;value=" + fb_value + "&amp;currency=USD"; 
} 
</script> 
</head> 

<body> 
<a href="#" onclick="facebookConversionPixel(123456,0.00);">FBCONV</a> 
</body> 
+0

고마워요! 는 오른쪽 원래 화소의 일부를 제거 '' 은 비록 께 섹션이로드 될 때 모든 뷰에로드 자바 스크립트 한국어 화소가 실제로되지 않음을 의미한다고 가정하는가요 onclick 코드가 클릭에 의해 활성화 될 때까지 해고 당했습니까? – dataprointhemaking

+0

맞습니다. 나는 '

+0

모두 지워 줘서 고마워! – dataprointhemaking

5

그냥 전체 이벤트 코드를 원하는 이벤트로 이동하십시오. 그런 다음 코드의 1 부분 만 변경하십시오. 당신이해야 할 일은 로컬이 아닌 fb_param을 글로벌하게 만드는 것입니다. 에 의해, 기본 코드가 설치되어

후, 같은 버튼을 클릭 등의 페이지 작업을 추적 할 수 있습니다

은에 주석 FB 워드 프로세서 "How to track in-page events"에서

$('.button').click(function() { 
    window.fb_param = {}; // must be global by adding `window.` 
    fb_param.pixel_id = '123456789'; 
    fb_param.value = '0.00'; 
    fb_param.currency = 'USD'; 
    (function(){ 
     var fpw = document.createElement('script'); fpw.async = true; fpw.src = '//connect.facebook.net/en_US/fp.js'; 
     var ref = document.getElementsByTagName('script')[0]; 
     ref.parentNode.insertBefore(fpw, ref); 
    })(); 
}); 
8

에서 아래를 참조하십시오 서로 다른 이벤트 핸들러를 HTML DOM 요소에 등록하여 변환 픽셀에 대한 _fbq.push ('track') 호출을 작성합니다. 예 :

function trackConversionEvent(val, cny) { 
    var cd = {}; 
    cd.value = val; 
    cd.currency = cny; 
    _fbq.push(['track', '<pixel_id>', cd]); 
} 
<button onClick="trackConversionEvent('10.00','USD');" /> 
0

나는 비슷한 종류의 문제가 있었지만 여러 번 추가하여 픽셀 코드를 추적하고 추적 할 수없는 몇 가지 이유를 알고 싶습니다. 내가 한 것은 현재 페이지에서 footer에 픽셀 코드를 추가하고 자바 스크립트 함수 을 호출하여 내 아약스 버튼을 제출할 때 호출하는 것입니다.

먼저 기본 코드를 설치 한 후, 여러함으로써 동일한 웹 페이지 내에서 다수의 전환을 추적 할 수있는 여러 전환 이벤트

을 추적하는 방법 페이스 북 문서 페이지

https://developers.facebook.com/docs/ads-for-websites/conversion-pixel-code-migration#multi-conv-events

참조 _fbq.push ('track')는 각 전환 픽셀 ID를 호출합니다. 예를 들어 :

_fbq.push(['track','<pixel_id1>',{'value':'10.00','currency':'USD'}]); 
_fbq.push(['track','<pixel_id2>']); 

어떻게 기본 코드를 설치 한 후

, 당신은 _fbq.push함으로써, 이러한 버튼 클릭 등의 페이지 작업을 추적 할 수 있습니다에서 페이지 이벤트 추적 ('track')은 HTML 픽셀 요소에 다른 이벤트 핸들러를 등록하여 변환 픽셀을 호출합니다.예를 들어 : 또한

function trackConversionEvent(val, cny) { 
    var cd = {}; 
    cd.value = val; 
    cd.currency = cny; 
_fbq.push(['track', '<pixel_id>', cd]); 
} 
<button onClick="trackConversionEvent('10.00','USD');" /> 

, 페이스 북의 픽셀 추적 코드 크롬 부가 기능을 추가하고 페이스 북 픽셀 도우미 페이지를 참조하십시오 https://developers.facebook.com/docs/ads-for-websites/pixel-troubleshooting

을 내 아래 솔루션을 참조하십시오/답변

현재 페이지에서

페이스 북 추적 코드 (함수() { VAR _fbq window._fbq = || (window._fbq = []); (_fbq.loaded 있으면) { VAR의 FBD가 = document.createElement ("스크립트")! fbds.async = true; fbds.src = '//connect.facebook.net/en_US/fbds.js'; var s = document.getElementsByTagName ('script') [0]; s.parentNode.insertBefore (fbds, s); _fbq.loaded = true; } })(); window._fbq = window._fbq || []; window._fbq.push ([ 'track', 'yourid', { 'value': '1.00', 'currency': 'USD'}]); 아약스 양식을 제출하거나 버튼

<script> 
function trackConversionEvent(val, cny) { 
var cd = {}; 
cd.value = val; 
cd.currency = cny; 
_fbq.push(['track', 'yourid1', cd]); 
_fbq.push(['track', 'yourid1', cd]); 

} 
</script> 

하고 통화 아약스가

jQuery(form).ajaxSubmit({ 

    type:"POST", 

    data: $(form).serialize(), 

    url:"process.php", 

    success: function() { 
    **trackConversionEvent**('1.00','USD'); 
    } 
    ...... 
0

페이스 북은 자신의 픽셀을 업데이트했습니다라는 기능을 클릭하면

<!-- Facebook Conversion --> 
    <script>(function() { 
    var _fbq = window._fbq || (window._fbq = []); 
    if (!_fbq.loaded) { 
    var fbds = document.createElement('script'); 
    fbds.async = true; 
    fbds.src = '//connect.facebook.net/en_US/fbds.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(fbds, s); 
    _fbq.loaded = true; 
    } 
    })(); 
    window._fbq = window._fbq || []; 
    window._fbq.push(['track', 'yourid', {'value':'1.00','currency':'USD'}]); 
    </script> 

그리고 자바 스크립트 코드 때문에, 호출 페이스 북에 제출하기 위해 매개 변수를 함께 동적으로 넣을 사용자 정의 함수를 만들었습니다.

단계 1. 모든 페이지에서 머리 페이지의 you've initialised your pixel을 확인하십시오.

2 단계. 내가 만든이 사용자 지정 함수를 추가합니다 (첫 번째 초안이므로 약간 자세한 정보가 있으므로 사용자의 이익을 위해 최적화 할 수있는 방법이 있습니다).

triggerFacebookPixel: function(type, price, product_id, product_name, product_category, num_items) { 
    //See https://developers.facebook.com/docs/ads-for-websites/pixel-events/v2.8#events for documentation 
    //type = "ViewContent"|"AddToCart"|"Search"|"AddToWishlist"|"InitiateCheckout"|"AddPaymentInfo"|"Purchase"|"Lead"|"CompleteRegistration" 
    //product_id = Numeric Product ID. String or Integer accepted for single product events, or an array of integers for multiple products. 
    //price = Decimal/Float number of individual product's price or total price paid in conversion, or the user's status for 'CompleteRegistration' 
    //product_name = Optional. String of individual product's name or string of search query 
    //product_category = Optional. String of product category, hierarchy's accepted. E.g. "Clothing > Shirts > Men's > T-Shirts" 
    //num_items = Optional. Total number of products. 
    var data = { 
     value: typeof(price) == 'string' ? parseFloat(price) : price, 
     currency: 'USD' 
    } 
    switch (type) { 
     case 'Search': 
      data.content_ids = product_id; 
      data.search_string = product_name; 
      if (product_category !== undefined && product_category != '') { 
       data.content_category = product_category; 
      } 
      break; 
     case 'Lead': 
      data.content_name = product_name; 
      data.content_category = product_category; 
      break; 
     case 'CompleteRegistration': 
      data.status = product_id; 
      data.content_name = product_name; 
      break; 
     default: 
      //Product Specific Calls 
      //ViewContent|AddToCart|AddToWishlist|InitiateCheckout|AddPaymentInfo|Purchase 
      if (num_items == 1) { 
       data.content_ids = [typeof(product_id) == 'string' ? parseInt(product_id) : product_id]; 
       data.content_category = product_category; 
       data.content_name = product_name; 
      } else { 
       data.content_ids = product_id; 
      } 
      //"num_items" is only a parameter used in these two types 
      if (type == 'InitiateCheckout' || type == 'Purchase') { 
       data.num_items = num_items 
      } 
      //"content_type" is only a parameter used in these three types 
      if (type == 'Purchase' || type == 'AddToCart' || type == 'ViewContent') { 
       data.content_type = 'product'; 
      } 
      break; 
    } 
    fbq('track', type, data); 
} 

단계 3. 해당 매개 변수를 사용하여 해당 기능을 호출하십시오.

구매 후 팝업 주셔서 감사합니다. 사용자가 여러 항목과 반대되는 항목 1 개를 구매하면 픽셀이 다르게 발생합니다. 기본적으로 Facebook은 하나의 제품 일 경우 제품 이름 및 카테고리에 대한 매개 변수를 허용하지만 여러 제품 인 경우 해당 매개 변수를 허용하지 않습니다.

  • 제품 이름 : 다음 예를 들어

    , 여기에 1 개 항목를 구입하는 사용자 의 일부 샘플 제품 데이터입니다 "내 슈퍼 멋진 T 셔츠"
  • 제품 ID : 182
  • 제품 분류 : "의류> 셔츠> 티셔츠"
  • 총 지불 금액 (배송/취급 & 세금 포함) : $ 10.제품 이름과 카테고리를 제외한 만 전송, 사용자 구매 여러 항목는, 픽셀이 다르게 처리 할 때

    triggerFacebookPixel('Purchase', 10.84, 182, 'My Super Awesome T-Shirt', 'Clothing > Shirts > T-Shirts', 1); 
    

    : 84

그리고 여기 당신이 확인에 호출하려는 함수의 그들의 신분증.

  • 제품 ID의 : 그래서 우리의 사용자가이 두 항목을 구입 한 척하자 (182)과 164 (& 세금을 취급/배송비 포함) (셔츠와 뭔가 다른)
  • 총액 사용자 지불 : $ 24.75
당신이 우열 "이 같은 기능을 사용할 수 있습니다, 다른 standard events as defined by Facebook에 대한 제품의

triggerFacebookPixel('Purchase', 24.75, [182, 164], '', '', 2); 

:

이 당신이 기능을 사용하십시오 어떻게 wContent ","AddToCart ","AddToWishlist ","InitiateCheckout "및"AddPaymentInfo "가 있습니다. 통화에서 핵심 단어 중 하나를 "구매"로 변경하십시오.

다른 이벤트는 반드시 제품과 관련이있는 것은 아니며 "납", "검색"및 "전체 등록"입니다. 이와 같은 핵심어에는이 기능을 사용할 수 있습니다.

예 :

triggerFacebookPixel('Search', 0, [], 'blue shirts'); 

당신은 사용자 검색 기능의 제품 카테고리를 전달하려는 경우, 당신은 마지막에 문자열로 그것을 전달할 수 있습니다 : 사용자 는 "파란색 셔츠"에 대한을 검색. 사용자가 어떤 카테고리를 검색하고 있는지 알 수있는 유스 케이스 시나리오는 생각할 수 없습니다. 제품이 검색 결과에 나타나고 사용자가 검색 페이지에서 해당 제품을 클릭 한 경우이 옵션을 사용하지 않는 한. 이것이이 기능이 실제로 가능한 기능 일지 모르지만 문서에서 그 기능이 명확하지는 않습니다. 그렇다면 0과 빈 배열을 검색 결과 페이지에서 클릭 한 제품의 실제 값 (각각 가격과 제품 ID)으로 변경하고 해당 카테고리를 마지막으로 문자열로 추가하십시오 매개 변수는 검색 문자열 다음에옵니다.

예 : 사용자 은 당신의 회보로 가입 양식을 제출 :

triggerFacebookPixel('CompleteRegistration', 0, 'Signed Up', 'Newsletter'); 

페이스 북의 문서는 등록 양식이 완료되면 "CompleteRegistration는"예를 들어, 사용되어야한다고 서비스 가입/가입 완료. "Signed Up"문자열은 "status"매개 변수이고 "Newsletter"문자열은 "content_name"매개 변수입니다.

예 : 사용자가 제공하는 서비스의 30 일 무료 평가판에 가입 한 양식을 제출했습니다 (이제는 리드). 30 일 무료 평가판 서비스 "범주에서"서비스 "하고 하위 카테고리에 있어요"무료 평가판 내 서비스 : 부호까지이 완료 될 때입니다 "예를 리드"

triggerFacebookPixel('Lead', 0, 'Free 30-Day Trial Service', 'My Services > Free Trials'); 

페이스 북의 내용은 해당 상태 " 가격을 클릭하고 평가판에 가입하십시오. 나는 서비스의 이름이 "content_name"매개 변수이고 서비스의 카테고리가 "content_category"매개 변수라고 가정했다.

관련 문제