Установка Facebook Pixel на CMS Webasyst через Google Tag Manager

Для начала установки Pixel на сайт нам нужно получить сначала код самого Facebook Pixel.

Для этого переходим в Facebook Manager -> выбираем аккаунт который нужен -> Создаем пиксель.

ВАЖНО: Сохраняем этот скрипт он нам будет нужен.

Настройка Google Tag Manager

Настройка  и создания переменных в GTM

Нам нужно создать 11 переменных в Google Tag Manager, названия переменных произвольное можете писать, но все остальное так как на скриншоте.

1. kmgmt DL fbinited

Настройка и создание переменных в GTM для Facebook Pixel CMS Webasyst

2. kmgtm DL ecomm_category

Настройка и создание переменных в GTM для Facebook Pixel CMS Webasyst

3. kmgtm DL ecomm_prodid

Настройка и создание переменных в GTM для Facebook Pixel CMS Webasyst

4. kmgtm DL ecomm_totalvalue

Настройка и создание переменных в GTM для Facebook Pixel CMS Webasyst

5. kmgtm DL kmEventAction

Настройка и создание переменных в GTM для Facebook Pixel CMS Webasyst

6. kmgtm DL kmgtm currency

Настройка и создание переменных в GTM для Facebook Pixel CMS Webasyst

7. kmgtm DL kmgtm search query

Настройка и создание переменных в GTM для Facebook Pixel CMS Webasyst

8. kmgtm DL kmgtm transaction ID

Настройка и создание переменных в GTM для Facebook Pixel CMS Webasyst

9. kmgtm DL kmgtm._

Настройка и создание переменных в GTM для Facebook Pixel CMS Webasyst

10. kmgtm DL page_category

Настройка и создание переменных в GTM для Facebook Pixel CMS Webasyst

11. kmgtm Facebook Pixel ID

Настройка и создание переменных в GTM для Facebook Pixel CMS Webasyst

С настройками переменных мы закончили. Данные переменные будут собирать для нас данные с сайта. По ним мы будем получать данные о действиях пользователя на сайте.

Настройка и создания триггеров в GTM

Нам нужно создать 13 триггеров в Google Tag Manager, названия триггеров произвольное (только так чтоб потом не попутали, что и где), все остальное так как на скриншоте.

kmgtm event FB

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

kmgtm event FBInit

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

kmgtm event FBInit — after purchase page

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

kmgtm event FBInit — category

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

kmgtm event FBInit — checkout

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

kmgtm event FBInit — checkout payment

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

kmgtm event FBInit — product

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

kmgtm event FBInit — search

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

kmgtm event kmEcommerce.addToCart

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

kmgtm event kmEcommerce.checkout — fbinited

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

kmgtm event kmEcommerce.checkout payment

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

kmgtm event kmEcommerce.purchase

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

kmgtm event kmEcommerce.purchase1click

Пошаговая настрйока и создание триггеров в GTM для настройки facebook pixel для CMS Webasyst

С настройками триггеров закончили. Триггеры буду активируются когда пользователь сделает действия указанные в настройках триггеров (Просмотр карточки товара, добавления в корзину, поиск и т.д.).

Настройка и создания тегов в Google Tag Manager

Нам нужно создать 8 тегов в Google Tag Manager, названия тегов произвольное (только так чтоб знали какой тег за что отвечает). С помощью тегов мы и будем отправлять данные и информацию в Facebook Pixel.

Теги:

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

Теперь приступим к созданию самого тега (Делаем все как на скриншоте).

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

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

И подключаем для активации ранее созданные триггеры:

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

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

И подключаем для активации ранее созданные триггеры:

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

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

И подключаем для активации ранее созданные триггеры:

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

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

И подключаем для активации ранее созданные триггеры:

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

  1. Kmgtm Facebook event Search

Создаем тег и в него вставляем следующий скрипт:

<script>

(function(){

fbq('trackCustom', 'Search', {

currency: 'UAH',

search_string: '{{kmgtm DL kmgtm search query}}'

});

}());

</script>

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

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

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

И подключаем для активации ранее созданные триггеры:

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

  1. 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 для facebook pixel CMS Webasyst

Настройка и создание тегов в GTM для facebook pixel CMS Webasyst

На этом и остановимся, так как настройки в GTM мы закончили.

Публикация и запуск тегов. Проверка настроек

Настройки мы сделали теперь нужно все опубликовать на сайте:

проверка настроек fb pixel CMS Webasyst

Переходим на сайте в режиме “Предварительный просмотр рабочей области” и проверяем активацию наших тегов при определенных действиях на сайте:

  1. Просмотр товара в категориях

проверка настроек fb pixel CMS Webasyst

  1. Добавления товара в корзину

проверка настроек fb pixel CMS Webasyst

  1. Просмотр карточки товара

проверка настроек fb pixel CMS Webasyst

При активации тегов на сайте добавляется код javascript который считывает нужные нам данные и передает в Facebook Pixel.

проверка настроек fb pixel CMS Webasyst

Теперь перейдем в Facebook Events Manager и проверим передачу данных которые мы получили:

проверка настроек fb pixel CMS Webasyst

Как видим наши события, которые мы подключали с помощью тегов, передаются в Facebook Manager.

Теперь перейдем в Отчёты по рекламе:

проверка настроек fb pixel CMS Webasyst

И сделаем маленький отчет, чтобы проверить данные которые передались на уровне РК, которая у нас работает:

проверка настроек fb pixel CMS Webasyst

Как видим, наши настройки работают и передают данные. Теперь эффективность РК в Facebook Pixel будет проще определять.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *