Увольнение пикселя преобразования Facebook

Я все еще довольно новичок в Javascript, но мне было интересно, что будет лучшим способом для запуска пикселя преобразования 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>

Facebook говорит, что мы должны подключить это к нашим страницам "Спасибо", которые посетители видят после конвертации (заполняют форму, совершают покупку и т.д.). Однако некоторые из наших форм представляют собой всплывающие окна или формы на боковых панелях рядом с контентом, которые мы не хотим, чтобы читатели были перенаправлены с помощью страницы подтверждения.

В Google Analytics я могу создать "невидимый" просмотр страницы, нажав _gaq.push(['_ trackPageview]); код, который может сказать GA, что он должен считать невидимое просмотрение страницы в качестве цели.

Есть ли что-то похожее на то, что достаточно общего для того, чтобы сообщить моему сайту о пожаре пикселя FB?

ОТВЕТЫ

Ответ 1

EDIT: я обновил свой код, поскольку то, о чем я говорил ранее, не работал. Спасибо @Flambino, чтобы указать.

Это мой пересмотренный ответ, используя пиксель, а не script, чтобы передать пиксель преобразования. Я ссылаюсь на Как отслеживать конверсию Google Adwords onclick? Сообщение SO:

<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>

Ответ 2

Из документов FB "Как отслеживать события на странице" :

После установки фрагмента базового кода вы можете отслеживать действия на странице, такие как щелчки на кнопке, путем вызова _fbq.push('track') для пикселя преобразования путем регистрации различных обработчиков событий в HTML Элемент DOM. Например:

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

Ответ 3

Просто переместите весь исходный код в выбранное вами событие. Затем просто измените 1 часть кода. То, что вам нужно сделать, это сделать fb_param глобальным вместо локального.

См. ниже в комментарии

$('.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);
    })();
});

Ответ 4

У меня была аналогичная проблема, и я хотел бы запустить несколько добавлений для отслеживания кодов пикселей, и по какой-то причине я не смог отслеживать. Я сделал то, что на текущей странице я добавил пиксельный код в нижний колонтитул и функцию javascript для вызова при отправке моей кнопки ajax.

Сначала обратитесь к странице документации в Facebook

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

Как отслеживать несколько событий преобразования

После установки фрагмента базового кода вы можете отслеживать несколько преобразований на одной и той же веб-странице, делая несколько вызовов _fbq.push('track') для каждого идентификатора пикселя преобразования. Например:

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

Как отслеживать события на странице

После установки фрагмента базового кода вы можете отслеживать действия на странице, такие как щелчки на кнопке, путем вызова _fbq.push('track') для пикселя преобразования путем регистрации различных обработчиков событий в HTML Элемент DOM. Например:

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

Кроме того, добавьте хром-адроны кода отслеживания пикселов facebook и перейдите на страницу вспомогательной страницы пикселя facebook: https://developers.facebook.com/docs/ads-for-websites/pixel-troubleshooting

См. мой ниже решение/ответ

Код отслеживания Facebook на текущей странице            (функция() {    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'}]);    

  <!-- 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>

И код javascript для вызова при отправке формы ajax или нажатии кнопки

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

 }
</script>

и вызов функции, когда ajax называется

jQuery(form).ajaxSubmit({

   type:"POST",

   data: $(form).serialize(),

   url:"process.php",

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

Ответ 5

Facebook обновил свои пиксели, поэтому я создал свою собственную настраиваемую функцию для вызова, которая будет динамически добавлять параметры вместе для отправки в Facebook.

Шаг 1. На каждой странице убедитесь, что вы инициализировали свой пиксель в элементе head страница.

Шаг 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 price or total price paid in conversion, or the user status for 'CompleteRegistration'
    //product_name = Optional. String of individual product name or string of search query
    //product_category = Optional. String of product category, hierarchy accepted. E.g. "Clothing > Shirts > Men > 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 пункта:

  • Название продукта: "Моя супервольная футболка"
  • Идентификатор продукта: 182
  • Категория продукта: "Одеждa > Рубашки > Футболки"
  • Общая сумма оплаченного пользователя (включая доставку/обработку и налог): $10.84

И вот функция, которую вы вызывали при подтверждении:

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

Когда пользователь приобретает несколько элементов, пиксель обрабатывает его по-разному, исключая названия продуктов и категории и только отправляя их идентификаторы. Поэтому давайте предположим, что наш пользователь приобрел эти два элемента:

  • Идентификаторы продукта: 182 и 164 (рубашка и что-то еще)
  • Общая сумма оплаченного пользователя (включая доставку/обработку и налог): $24.75

Вот как вы можете использовать эту функцию:

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

Для других стандартных событий, определенных Facebook в отношении продуктов, вы можете использовать эту же функцию для "ViewContent", "AddToCart", AddToWishlist "," InitiateCheckout "и" AddPaymentInfo ". Просто измените" Приобретение" на любое из этих ключевых слов в вашем вызове.

Другие события не обязательно связаны с продуктами: "Свинец", "Поиск" и "Полная регистрация". Вы можете использовать эту функцию для таких ключевых слов, как это.

Пример: пользователь найден для "синих рубашек":

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

Если вы хотите передать категорию продукта в функцию поиска пользователя, вы можете передать это как строку в конце. Я не могу придумать сценарий использования, где вы знаете, какую категорию ищет пользователь. Если вы не использовали это в том случае, если продукт отображается в результатах поиска, и пользователь нажал на него со страницы поиска. Возможно, это и есть эта функция, но документация не совсем понятна. Если это для вас, то просто измените 0 и пустой массив на фактические значения (цена и идентификатор продукта соответственно) продукта, который был нажат на странице результатов поиска, и добавьте его категорию как строку в качестве последней после строки поиска.

Пример: пользователь отправил форму, которая подписала их на ваш рассылку:

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

Документация на Facebook гласит, что при заполнении регистрационной формы следует использовать "CompleteRegistration", например. полная подписка/регистрация для услуги. Строка "Подпись" является параметром "статус", а строка "Информационный бюллетень" является параметром "content_name".

Пример: пользователь отправил форму, которая подписала их на бесплатную 30-дневную пробную версию какой-либо услуги, которую вы предлагаете (так что теперь она является лидером), где имя службы "Свободно" 30-дневная пробная служба ", а также в подкатегории" Бесплатные испытания "в категории" Мои услуги ":

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

Документация на Facebook гласит, что "Свинец" - это когда регистрация завершена, например. нажмите на цену, зарегистрируйтесь для пробной версии. Я предположил, что именем службы является параметр "content_name", а категория службы - параметр "content_category".