Уровень данных расширенной электронной торговли для Facebook

13 марта, 2022

Как отправить данные о совершенной покупке на вашем сайте в Facebook? Имея настроенный уровень данных для расширенной электронной торговли Universal Analytics, вы сможете без какого-либо труда адаптировать его под маркетинговый тег компании Meta.

Эта статья - перевод материала Симо Ахавы (Simo Ahava) с небольшими комментариями и адаптацией для русскоязычного сообщества.

Как правило, для передачи данных о покупке пользователя в Facebook достаточно стандартного события purchase. Его можно отправить после того, как пользователь сделает заказ, на странице подтверждения покупки.

Конструкция самого простого события для Facebook может выглядеть так:

fbq('track', 'Purchase', {currency: "RUB", value: 1500.00});

1	fbq('track', 'Purchase', {currency: "RUB", value: 1500.00});

, где:

fbq('track') - вызова функции пикселя;
Purchase - имя события (покупка);
currency - валюта заказа/транзакции;
value - итоговая сумма заказа/транзакции;

Если вы хотите передавать дополнительную информацию в заказе, чтобы использовать ее для уточнения создаваемых пользовательских аудиторий и показа рекламы, вы можете использовать различные стандартные параметры. Чтобы добавить такой параметр, отформатируйте его данные в виде объекта JSON и включите этот объект в качестве третьего параметра при вызове функции fbq('track').

Например, на вашем сайте пользователь купил несколько товаров. Тогда конструкция события purchase для Facebook будет выглядеть следующим образом:

fbq('track', 'Purchase',
// Начало объекта с параметрами
{
value: 1500.00,
currency: 'RUB',
contents: [
{
id: '105',
quantity: 1
},
{
id: '106',
quantity: 3
}],
content_type: 'product'
}
// Конец объекта с параметрами
);

fbq('track', 'Purchase',

// Начало объекта с параметрами

{

value: 1500.00,

currency: 'RUB',

contents: [

{

id: '105',

quantity: 1

{

id: '106',

quantity: 3

}],

content_type: 'product'

}

// Конец объекта с параметрами

);

, где:

contents - массив объектов JSON, содержащий международные артикулы (EAN) или другие идентификаторы товаров, связанные с событием, а также сведения о количестве товаров и их ценах. Обязательные значения, которые требуется передавать в contents - id и quantity;
id - идентификаторы (ID) товаров, связанных с событием (например, номера SKU);
quantity - количество товаров для каждой позиции;
content_type - параметр, в котором передается одно из двух значений (product или product_group) в зависимости от передаваемого значения параметра content_ids или contents. Если в параметре content_ids или contents передаются ID товаров, требуется значение product. Если передаются ID групп товаров, требуется значение product_group. Чаще используется именно product.

Список стандартных параметров (они же свойства объектов) событий Facebook представлен в официальной документации разработчика и здесь:

Параметры событий Facebook

Если на своем сайте вы используете расширенную электронную торговлю (Enhanced Ecommerce) для Google Analytics, скорее всего, ваши разработчики уже создали уровень данных (dataLayer) для Google Tag Manager, который содержит в себе всю необходимую информацию для корректной отправки события purchase в Facebook. Другими словами, мы можем взять данные из dataLayer, изначально предназначенного для событий Enhanced Ecommerce Google Analytics, чуть скорректировать его, и с помощью специальной конструкции отправить нужные данные о транзакции в Facebook.

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

Для расширенной электронной торговли Google Analytics массив с товарами для события purchase может выглядеть так:

ecommerce: {
purchase: {
products: {
actionField: {...},
products: [{
id: 'shirt1',
name: 'T-Shirt',
price: '15.99',
quantity: 2
},{
id: 'pants2',
name: 'Pants',
price: '9.99',
quantity: 3
}]
}
}
}

ecommerce: {

purchase: {

products: {

actionField: {...},

products: [{

id: 'shirt1',

name: 'T-Shirt',

price: '15.99',

quantity: 2

},{

id: 'pants2',

name: 'Pants',

price: '9.99',

quantity: 3

}]

}

А для Facebook тот же самый массив с данными для события purchase будет иметь вид:

fbq('track', 'Purchase', {
value: 61.95,
content_ids: ['shirt1', 'pants2'],
contents: [{
id: 'shirt1',
item_price: 15.99,
quantity: 2
},{
id: 'pants2',
item_price: 9.99,
quantity: 3
}],
num_items: 5
});

fbq('track', 'Purchase', {

value: 61.95,

content_ids: ['shirt1', 'pants2'],

contents: [{

id: 'shirt1',

item_price: 15.99,

quantity: 2

},{

id: 'pants2',

item_price: 9.99,

quantity: 3

}],

num_items: 5

});

Наша основная задача - динамически заполнять параметры value, content_ids, id, item_price, quantity, num_items и отправлять их с событием purchase в Facebook.

Как это сделать? Решение Симо состоит в том, чтобы создать API, которому вы можете передать свой массив товаров расширенной электронной торговли, и он вернет массив, уменьшенный и преобразованный в различные форматы для пикселя Facebook.

Для этого перейдите в диспетчер тегов Google и создайте пользовательскую переменную типа Собственный код JavaScript. Добавьте в нее нижеприведенный код:

function() {
return function(products) {
if (!Array.isArray(products)) {
return;
}

var idList = products.map(function(prod) {
return !!prod.id && prod.id.toString();
});

var totalValue = products.reduce(function(acc, cur) {
return !!cur.price && !!cur.quantity ? acc + (cur.price * cur.quantity) : acc;
}, 0);

var totalQuantity = products.reduce(function(acc, cur) {
return !!cur.quantity ? acc + parseInt(cur.quantity) : acc;
}, 0);

var contentsArray = products.map(function(prod) {
return {
id: !!prod.id ? prod.id.toString() : undefined,
item_price: !!prod.price ? parseFloat(prod.price) : undefined,
quantity: !!prod.quantity ? parseInt(prod.quantity) : undefined
};
});

return {
content_ids: idList,
value: totalValue,
num_items: totalQuantity,
contents: contentsArray
};
};
}

function() {

return function(products) {

if (!Array.isArray(products)) {

return;

}

var idList = products.map(function(prod) {

return !!prod.id && prod.id.toString();

});

var totalValue = products.reduce(function(acc, cur) {

return !!cur.price && !!cur.quantity ? acc + (cur.price * cur.quantity) : acc;

}, 0);

var totalQuantity = products.reduce(function(acc, cur) {

return !!cur.quantity ? acc + parseInt(cur.quantity) : acc;

}, 0);

var contentsArray = products.map(function(prod) {

return {

id: !!prod.id ? prod.id.toString() : undefined,

item_price: !!prod.price ? parseFloat(prod.price) : undefined,

quantity: !!prod.quantity ? parseInt(prod.quantity) : undefined

};

});

return {

content_ids: idList,

value: totalValue,

num_items: totalQuantity,

contents: contentsArray

};

}

Назовите переменную EECFB API и сохраните ее. В GTM это выглядит так:

Собственный код JavaScript

Этот код возвращает функцию, которую вы затем можете вызывать в других своих тегах. API возвращает объект с четырьмя свойствами:

content_ids - массив всех идентификаторов товаров. Пример: ['id123', 'id234', 'id345']
value - сумма всех цен на товары, умноженная на их количество. Пример: 63.55
num_items - сумма всех величин в массиве. Пример: 5
contents - массив товаров, преобразованный в формат, требуемый Facebook. Пример: [{id: 'id123', quantity: 2, item_price: 10.2}]

Поскольку решение построено на уже реализованном уровне данных для расширенной электронной торговли Google Analytics, создайте еще одну пользовательскую переменную типа Переменная уровня данных с именем ecommerce.purchase.products:

Переменная уровня данных ecommerce.purchase.products

Назовите переменную ecommerce.purchase.products и сохраните ее.

Теперь создайте тег типа Пользовательский HTML, который будет срабатывать после инициализации пикселя Facebook. Вставьте в него следующий код:

<script>
(function() {
var prods = {{ecommerce.purchase.products}};
var fbObj = {{EECFB API}}(prods);

// Отправка события purchase с параметрами
if (typeof window.fbq === 'function') {
window.fbq('track', 'Purchase', {
currency:'RUB',
content_type: 'product',
value: fbObj.value,
content_ids: fbObj.content_ids,
contents: fbObj.contents,
num_items: fbObj.num_items,
});
}
})();
</script>

(function() {

var prods = {{ecommerce.purchase.products}};

var fbObj = {{EECFB API}}(prods);

// Отправка события purchase с параметрами

if (typeof window.fbq === 'function') {

window.fbq('track', 'Purchase', {

currency:'RUB',

content_type: 'product',

value: fbObj.value,

content_ids: fbObj.content_ids,

contents: fbObj.contents,

num_items: fbObj.num_items,

});

}

})();

</script>

В Google Tag Manager это выглядит так:

Пользовательский HTML тег

Сначала вы получаете ссылку на массив товаров в объекте расширенной электронной коммерции события purchase. Затем вы вызываете {{EECFB API}}, передавая этот массив в качестве параметра. API возвращает объект, который вы сохраняете в локальной переменной fbObj. Затем вы просто получаете доступ к четырем свойствам этого объекта (см. выше) в вызове fbq(). С помощью этой конструкции данные о транзакции с дополнительными параметрами заказа будут отправлены в Facebook. Дополнительно к коду Симо я добавил строку content_type: 'product' и валюту. Поскольку мы передаем ID товаров вместе с транзакцией, требуется значение product.

Важно сделать еще две вещи:

1. добавить триггер активации для тега. Поскольку мы используем решение от расширенной электронной торговли Google Analytics, то условием активации будет тот же триггер со специальным событием purchase;

Специальное событие purchase

2. тег с событием должен срабатывать после активации кода Facebook Pixel. Для этого требуется настроить порядок активации тегов:

активировать тег перед тегом Facebook Purchase -> Facebook Pixel;
не активировать тег Facebook Purchase, если тег Facebook Pixel не сработал или приостановлен;

Порядок активации тегов

Сохраните тег и опубликуйте все изменения.

На этом настройка события purchase для Facebook завершена. Проверить корректность передачи данных можно с помощью расширения Facebook Pixel Helper и функции Тестирование событий в интерфейсе business.facebook.com. Для этого совершите заказ на вашем сайте и посмотрите какие данные фиксируют эти инструменты.

В Facebook Pixel Helper:

Facebook Pixel Helper

В тестировании событий:

Отладка события в интерфейсе Facebook

Помимо этого, ваш пиксель Facebook должен быть связан с каталогом товаров. Однако в рамках этой статьи я целенаправленно опустил этот вопрос. Вы можете перейти по ссылке и самостоятельно связать каталог с пикселем одним из доступных способов:

через Commerce Manager;
с помощью API Product Catalog Preferences.

Метки: dataLayer, Enhanced Ecommerce, Facebook

Уровень данных расширенной электронной торговли для Facebook

Получайте бесплатные уроки и фишки

Еще статьи