Пиксель 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"/>

Ограничения

  • Не поддерживается многократное срабатывание при каждой загрузке страницы.
  • Не поддерживается отслеживание стандартных и специально настроенных событий, инициируемых действиями в пользовательском интерфейсе (например, нажатием кнопки).
  • Действуют ограничения на HTTP-запросы GET при отправке пользовательских данных и длинных URL-адресов.
  • Не поддерживается асинхронная загрузка.

Пример установки в теге IMG

Ниже приведен пример установки тега Meta Pixel IMG на ключевые страницы вымышленного веб-сайта с использованием вымышленного идентификатора пикселя (12345) и пользовательских параметров (например, cd[currency]=USD).

На странице товара один пиксель используется для отслеживания события 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"/>

Измерение на основе агрегированных данных о событиях с помощью пикселя в теге IMG для iOS 14.5 и более поздних версий

Измерение на основе агрегированных данных Meta о событиях — это протокол для измерения веб-событий и событий в приложении, полученных от устройств с iOS 14.5 и более поздними версиями. Если данных не хватает или они неполные, можно использовать статистическое моделирование, которое предназначено для предоставления более полной картины результатов.

Мы настоятельно рекомендуем ознакомиться с инструкциями в разделе этого документа, посвященном установке пикселя в теге IMG, или воспользоваться нашим руководством по реализации.

Отсутствуют данные пикселя в теге IMG

Выполняемый код JavaScript

Если вы настроите ваш пиксель IMG, используя выполняемый код JavaScript для генерирования JavaScript Image class без добавления этого класса изображения в дерево DOM веб-сайта, например, используя сторонние библиотеки JavaScript для отправки вашего пикселя 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

Если вы размещаете пиксель и тег IMG в объекте iframe с атрибутом sandbox, добавьте значение allow-scripts, чтобы Facebook получал данные вашего пикселя в теге IMG.

Использование AEM для автоматического перенаправления

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

  • Используйте один и тот же пиксель Meta (одинаковую пару ID пикселя и имени события пикселя) во всех доменах, из которых вы хотите получать конверсии
  • Повысьте приоритет событий AEM, от которых вы хотите получать конверсии, во всех этих доменах

Отслеживание нажатий кнопок

Когда посетитель нажимает кнопку, код JavaScript пикселя Meta автоматически определяет актуальные поля и передает их в 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>

Когда на экране появится элемент h1 с атрибутом id=fb-fire-pixel, должно инициироваться стандартное событие 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');
});

Активация событий на основании просмотренной части страницы

Предположим, вам нужно отслеживать случаи, когда пользователь просмотрел некоторую часть страницы. Определить это можно по прокрутке страницы до определенного места.

В первом примере отслеживается просмотренная часть страницы в пикселях. Пиксель срабатывает, если пользователь просмотрел страницу до 500-го пикселя.

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 при достижении определенного количества просмотров.

Сеанс — это ряд операций пользователя с вашим сайтом, которые выполняются за определенный период времени. Определяя активность пользователя в течение этого периода времени, можно увеличить количество просмотров страниц.

Если имеется переменная sessionCountViews для site_request, можно добавить код пикселя Meta, который будет выполняться при достижении определенного количества просмотров страниц.

Пример для просмотра всего шести статей

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 отправлял эту дополнительную информацию, добавьте в его базовый код перед вызовом 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}.