Содержание
Для начала установки Pixel на сайт нам нужно получить сначала код самого Facebook Pixel.
Для этого переходим в Facebook Manager -> выбираем аккаунт который нужен -> Создаем пиксель.
ВАЖНО: Сохраняем этот скрипт он нам будет нужен.
Настройка Google Tag Manager
Настройка и создания переменных в GTM
Нам нужно создать 11 переменных в Google Tag Manager, названия переменных произвольное можете писать, но все остальное так как на скриншоте.
1. kmgmt DL fbinited
2. kmgtm DL ecomm_category
3. kmgtm DL ecomm_prodid
4. kmgtm DL ecomm_totalvalue
5. kmgtm DL kmEventAction
6. kmgtm DL kmgtm currency
7. kmgtm DL kmgtm search query
8. kmgtm DL kmgtm transaction ID
9. kmgtm DL kmgtm._
10. kmgtm DL page_category
11. kmgtm Facebook Pixel ID
С настройками переменных мы закончили. Данные переменные будут собирать для нас данные с сайта. По ним мы будем получать данные о действиях пользователя на сайте.
Настройка и создания триггеров в GTM
Нам нужно создать 13 триггеров в Google Tag Manager, названия триггеров произвольное (только так чтоб потом не попутали, что и где), все остальное так как на скриншоте.
kmgtm event FB
kmgtm event FBInit
kmgtm event FBInit – after purchase page
kmgtm event FBInit – category
kmgtm event FBInit – checkout
kmgtm event FBInit – checkout payment
kmgtm event FBInit – product
kmgtm event FBInit – search
kmgtm event kmEcommerce.addToCart
kmgtm event kmEcommerce.checkout – fbinited
kmgtm event kmEcommerce.checkout payment
kmgtm event kmEcommerce.purchase
kmgtm event kmEcommerce.purchase1click
С настройками триггеров закончили. Триггеры буду активируются когда пользователь сделает действия указанные в настройках триггеров (Просмотр карточки товара, добавления в корзину, поиск и т.д.).
Настройка и создания тегов в Google Tag Manager
Нам нужно создать 8 тегов в Google Tag Manager, названия тегов произвольное (только так чтоб знали какой тег за что отвечает). С помощью тегов мы и будем отправлять данные и информацию в Facebook Pixel.
Теги:
- Facebook Pixel
Перед установкой мы создавали счетчик пикселя, теперь мы его используем по назначению.
Но добавим к нему небольшой скрипт с массивом dataLayer.push:
<script>
dataLayer.push({'event': 'kmgtm.FBInit'});
dataLayer.push({'kmgtm.fbinited': 1});
</script>
У вас получится вот такой код для вставки в тег:
<!-- 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', '****************'); // Ваш pixel ID .
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=****************&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<script>
dataLayer.push({'event': 'kmgtm.FBInit'});
dataLayer.push({'kmgtm.fbinited': 1});
</script>
Теперь приступим к созданию самого тега (Делаем все как на скриншоте).
- Kmgtm Facebook event AddPaymentInfo
Создаем тег и в него вставляем следующий скрипт:
<script>
(function(){
var ids = {{kmgtm DL ecomm_prodid}};
ids && fbq('track', 'AddPaymentInfo', {
content_ids: ids,
content_type: 'product',
value: {{kmgtm DL ecomm_totalvalue}},
currency: '{{kmgtm DL kmgtm currency}}'
});
}());
</script>
И подключаем для активации ранее созданные триггеры:
- Kmgtm Facebook event AddToCart
Создаем тег и в него вставляем следующий скрипт:
<script>
(function(){
var id = {{kmgtm DL kmgtm._}}.addToCart.products[0].id
id &&fbq('track', 'AddToCart', {
content_ids: ['' + id],
content_type: 'product',
value: {{kmgtm DL kmgtm._}}.addToCart.products[0].price,
currency: 'UAH'
});
}());
</script>
И подключаем для активации ранее созданные триггеры:
- Kmgtm Facebook event InitiateCheckout
Создаем тег и в него вставляем следующий скрипт:
<script>
(function(){
var ids = {{kmgtm DL ecomm_prodid}};
ids && fbq('track', 'InitiateCheckout', {
content_ids: ids,
content_name: 'Checkout',
value: {{kmgtm DL ecomm_totalvalue}},
currency: 'UAH',
num_items: {{kmgtm DL ecomm_prodid}}.length
});
}());
</script>
И подключаем для активации ранее созданные триггеры:
- Kmgtm Facebook event Purchase
Создаем тег и в него вставляем следующий скрипт:
<script>
(function(){
var ids = {{kmgtm DL ecomm_prodid}};
ids && fbq('track', 'Purchase', {
content_ids: ids,
content_type: 'product',
content_name: 'Purchase',
value: {{kmgtm DL ecomm_totalvalue}},
currency: 'UAH',
num_items: {{kmgtm DL ecomm_prodid}}.length
});
}());
</script>
И подключаем для активации ранее созданные триггеры:
- Kmgtm Facebook event Search
Создаем тег и в него вставляем следующий скрипт:
<script>
(function(){
fbq('trackCustom', 'Search', {
currency: 'UAH',
search_string: '{{kmgtm DL kmgtm search query}}'
});
}());
</script>
И опять подключаем для активации ранее созданные триггеры:
- Kmgtm Facebook event ViewCategory
Создаем тег и в него вставляем следующий скрипт:
<script>
(function(){
var ids = {{kmgtm DL ecomm_prodid}};
ids && fbq('trackCustom', 'ViewCategory', {
content_ids: ids,
content_type: 'product',
content_name: '{{kmgtm DL ecomm_category}}'
});
}());
</script>
И подключаем для активации ранее созданные триггеры:
- Kmgtm Facebook event ViewContent
Создаем тег и в него вставляем следующий скрипт:
<script>
(function(){
var ids = {{kmgtm DL ecomm_prodid}};
if (ids) {
if (!(ids instanceof Array)) {
ids = [ids];
}
fbq('track', 'ViewContent', {
content_ids: ids,
content_type: 'product',
value: {{kmgtm DL ecomm_totalvalue}},
currency: 'UAH'
}); }
}());
</script>
И подключаем для активации ранее созданные триггеры:
На этом и остановимся, так как настройки в GTM мы закончили.
Публикация и запуск тегов. Проверка настроек
Настройки мы сделали теперь нужно все опубликовать на сайте:
Переходим на сайте в режиме “Предварительный просмотр рабочей области” и проверяем активацию наших тегов при определенных действиях на сайте:
- Просмотр товара в категориях
- Добавления товара в корзину
- Просмотр карточки товара
При активации тегов на сайте добавляется код javascript который считывает нужные нам данные и передает в Facebook Pixel.
Теперь перейдем в Facebook Events Manager и проверим передачу данных которые мы получили:
Как видим наши события, которые мы подключали с помощью тегов, передаются в Facebook Manager.
Теперь перейдем в Отчёты по рекламе:
И сделаем маленький отчет, чтобы проверить данные которые передались на уровне РК, которая у нас работает:
Как видим, наши настройки работают и передают данные. Теперь эффективность РК в Facebook Pixel будет проще определять.