Pinterest — маркетингова платформа, яку використовують для залучення нових клієнтів. І, звісно, як на будь-якій іншій маркетинговій платформі, на ній потрібно відстежувати ефективність реклами для оцінки результативності кампаній, оптимізації маркетингових стратегій та розуміння поведінки користувачів.
Щоб Pinterest Ads коректно відстежував web-конверсії, необхідно налаштувати Pinterest Tag і забезпечити передачу подій із сайту.
У цій статті я покажу, як зробити це через Google Tag Manager без змін у коді сайту. Ми розглянемо встановлення базового тегу, роботу з шаблоном ком’юніті Pinterest Pixel Tag та налаштування передачі eCommerce-подій, використовуючи вже наявну передачу eCommerce-подій GA4 у dataLayer.
У статті розглянемо такі кроки:
Встановлення базового коду Pinterest на сайт та передача першого івенту “PageVisit”
Зазвичай є декілька способів встановити Pinterest Tag на сайт:
- безпосередньо в код сайту (у
<head>), - через HTML Tag у GTM,
- через тег із Community Template Gallery у GTM.
У нашому прикладі ми будемо всі налаштування робити за допомогою GTM, оскільки я раджу їх тримати в одному місці для уникнення хаосу та більшого контролю за передачею даних. Це також мінімізує залучення розробників у майбутньому.
Перш ніж перейдемо до встановлення Pinterest Tag на сайт, знайдемо всі дані, які нам для цього знадобляться.
Як знайти код Pinterest Tag та TAG_ID
Для подальшого налаштування, залежно від способу, нам буде потрібен або базовий код Pinterest, або TAG_ID. Тому спершу знайдемо їх у рекламному кабінеті, щоб під час подальшого налаштування (яке буде описано далі) у вас всі необхідні дані були під рукою.
Для цього:
- Переходимо на вкладку Conversions
- Pinterest tag -> Tag manager -> Install the Pinterest tag
- Тут потрапляємо на перший крок і вже можемо побачити свій TAG_ID (копіюємо його — він знадобиться для налаштування через тег із Community Template Gallery).
- Якщо ж ви підете шляхом Custom HTML тегу — скіпаємо цей перший крок -> Skip to manual setup -> і переходимо до пункту Add base code, де можемо одразу побачити код, який Pinterest рекомендує встановлювати.
Встановлення за допомогою GTM
Тепер переходимо саме до встановлення Pinterest Tag на сайт. Як було вже сказано раніше, ми будемо роздивлятися варіанти налаштувань через GTM, і для цього є декілька способів:
- через Custom HTML Tag у GTM,
- через шаблон Pinterest Pixel Tag із Community Template Gallery.
Через Custom HTML Tag у GTM
Перший варіант, яким можна встановити базовий код Pinterest на сайт:
- Створюємо новий тег Custom HTML та вставляємо скопійований код, який надав Pinterest.
- Як тригер ставимо один зі стандартних автоматично створених — All Pages, щоб базовий код запускався на кожній сторінці сайту.
Підсумковий варіант налаштування:
Хоча цей спосіб виглядає дуже простим, я все ж рекомендую надавати перевагу наступному. І ось чому:
- цим варіантом ми тільки встановлюємо базовий код Pinterest з бібліотекою і ще не передаємо жодного івенту, а для повноцінного налаштування цього буде мало;
- цей шлях потребує знання коду як для встановлення бібліотеки, так і коду для відправки івентів.
Через шаблон Pinterest Pixel Tag із Community Template Gallery
Цей варіант є зручнішим, оскільки він не потребує від вас знання коду і одразу може не лише допомогти з встановленням базового коду Pinterest, а й бути варіантом для налаштування передачі першого івенту PageVisit. Для цього знадобиться лише TAG_ID.
- У GTM потрібно буде перейти в теги і під час створення нового тегу перейти до Community Template Gallery, де знайти Pinterest Pixel Tag та додати його до своєї робочої області.
2. У новий тег Pinterest Pixel Tag вставляємо раніше скопійований TAG_ID.
3. Одразу також вказуємо, який івент будемо передавати. У цьому випадку обираємо PageVisit, тобто налаштовуємо передачу івенту перегляду сторінки, оскільки цей івент має спрацьовувати на кожній сторінці. Тригер, як і при попередньому налаштуванні, ставимо All Pages (тобто на всі сторінки).
Налаштування матиме такий вигляд:
Дебаг поточних налаштувань за допомогою розширення
Таким чином, у нас уже є піксель Pinterest на сайті, і відправляється івент перегляду сторінки. Тепер перевіримо наше налаштування.
Для того, щоб це перевірити, у Google Chrome є розширення Pinterest Tag Helper, яке допоможе в перевірці налаштувань.
Тому на сторінці сайту переходимо до розширення і дивимось, що піксель Pinterest встановлено, а івент PageView передано без проблем.
Передача івентів
Базовий код — це добре, але зазвичай його недостатньо для оцінки ефективності.
Відстеження івентів дозволяє Pinterest Ads отримувати інформацію про дії користувачів на сайті. Це необхідно для коректного вимірювання конверсій, оптимізації кампаній та побудови аудиторій для ремаркетингу.
Список івентів, які підтримує Pinterest:
| Подія | Мета |
|---|---|
PageVisit | Відстежувати людей, які переглядають основні сторінки, такі як сторінки товарів і статті. |
SignUp | Відстежувати людей, які реєструються на ваш продукт або послугу. |
WatchVideo | Відстежувати людей, які переглядають відео. |
Lead | Відстежувати людей, які виявляють інтерес до вашого продукту або послуги. |
Search | Відстежувати людей, які виконують пошук на вашому сайті, наприклад, шукають товари або розташування магазинів. |
Subscribe | Відстежувати людей, які підписуються, щоб отримувати інформацію та оновлення, пов'язані з продуктами або послугами. |
Custom | Відстежувати власну подію. Використовуйте цю назву події, щоб відстежувати спеціальну подію, яку ви хочете включити до звітності про конверсії. |
[Partner-defined event] | Додати будь-яку додаткову подію, визначену для цілей таргетингу аудиторії. Унікальні події недоступні для звітів про конверсії. Пам’ятайте, що пробіли будуть видалені з необроблених назв подій, переданих через тег. |
З переліком івентів можна ознайомитися за посиланням.
Відстеження не eCommerce-івентів
Загалом усе, що стосується не eCommerce-івентів, передається за тим самим принципом, що й передача перегляду сторінки. А саме:
- Створюємо тег Pinterest Pixel Tag.
- Вставляємо свій TAG_ID.
- Обираємо подію (не eCommerce), яку передаємо (у попередньому розділі ми обирали PageVisit).
- Налаштовуємо тригер, відповідний до події — тобто коли саме цей тег має спрацювати (у попередньому розділі ми обирали All Pages, оскільки подію перегляду сторінки потрібно передавати на кожній сторінці).
Для прикладу додатково налаштуємо івент Lead, який будемо передавати при успішній відправці форми. Тож рухаємося за озвученими кроками налаштування.
Якщо ви не вмієте налаштовувати тригери — статті мого колеги:
- Відстеження відправки форми за допомогою тригера «Видимість елемента»
- Відстеження відправки форми за допомогою базового тригера GTM
- Відстеження кліків на посилання за допомогою Google Tag Manager: практичний посібник із прикладами
- Відстеження кліків на елементи сайту за допомогою Google Tag Manager: розширений посібник
- Відстежуємо взаємодію користувачів із формами за допомогою Google Tag Manager
- Відстеження взаємодії з відео за допомогою Google Tag Manager
Структура eCommerce-івентів
Список eCommerce-івентів, які підтримує Pinterest:
| Подія | Мета |
|---|---|
Checkout | Відстежувати людей, які завершують транзакції. |
AddToCart | Відстежувати людей, які додають товари до кошика. |
ViewCategory | Відстежувати людей, які переглядають сторінки категорій. |
AddPaymentInfo | Відстежувати людей, які вводять платіжну інформацію, наприклад, номер кредитної картки. |
AddToWishList | Відстежувати людей, які додають товар до списку бажань. |
InitiateCheckout | Відстежувати людей, які починають процес оформлення покупки. |
ViewContent | Відстежувати людей, які переглядають контент на сайті. |
З переліком івентів можна ознайомитися за посиланням.
Якщо говорити про eCommerce-івенти, то це трохи складніше, оскільки такі івенти додатково потребують масиву даних про товари. І саме це ми розглянемо докладніше далі.
Pinterest має свою структуру івенту зі своїми назвами параметрів (у цій статті ми не будемо розглядати додавання коду на сайт за допомогою розробників, оскільки це йде за межами нашої теми). Але під час ознайомлення зі структурою івенту можна помітити, що вона дуже подібна до структури, яка зазвичай використовується для передачі івентів до GA4. Проте має свої відмінності в назвах параметрів.
Базова структура івенту Pinterest (на прикладі покупки) виглядає наступним чином.
<script>
pintrk
(
'track',
'checkout',
{
value: 10.00,
order_quantity: 2,
currency: 'USD',
event_id: 'eventId0001',
line_items:
[{
product_name: 'Parker Boots',
product_id: '1414',
product_price: 5.00,
product_quantity: 1
},
{
product_name: 'Parker Sandals',
product_id: 'ABC',
product_price: 5.00,
product_quantity: 1
}]
}
);
</script>Додатково з кодом для передачі різних івентів можна ознайомитися детальніше за посиланням офіційної довідки Pinterest.
Тому, якщо у вас уже є передача eCommerce-івентів аналітики (GA4) до dataLayer, то вам не потрібен розробник і можна скористатися вже існуючою передачею, яку потрібно буде тільки привести до потрібного вигляду під Pinterest.
(Тут ми не будемо проходити саме налаштування івентів до аналітики згідно зі структурою передачі, яку приймає GA4, і будемо виходити з того, що вона у вас уже реалізована. Детальніше про те, як її налаштувати, читайте тут. Беремо її за приклад, оскільки більшість сайтів уже апріорі її використовують, налаштовуючи передачу івентів до аналітики як через розробників, так і через плагіни. Єдина умова — передача не напряму з коду сайту, а до масиву dataLayer, який використовує GTM.)
Далі, для прикладу у статті будемо розглядати передачу головної конверсії eCommerce — покупку.
Для цього уявимо, що у нас на сайті вже відправляється у dataLayer ось такий код, який відповідає структурі передачі eCommerce-івенту до аналітики.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "T_12345",
value: 72.05,
currency: "USD",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
item_category: "Apparel",
price: 10.01,
quantity: 3
},
{
item_id: "SKU_12346",
item_name: "Google Grey Women's Tee",
item_category: "Apparel",
price: 21.01,
quantity: 2
}]
}
});Детальніше зі структурою івентів для GA4 можна ознайомитися за посиланням.
Підготовка даних у GTM
Подивимося на тег для того, щоб зрозуміти, які змінні нам потрібно мати для передачі івенту покупки.
Щоб налаштувати передачу івенту, нам знадобляться такі змінні:
- Value — сума покупки
- Currency — валюта
- Order ID — номер замовлення
- Line items — дані про товари
Тож для подальшого налаштування підготуємо одразу змінні, які нам будуть потрібні. Для цього переходимо у Variables і створюємо такі нові змінні:
- DL - ecommerce — змінна, яка буде містити в собі масив eCommerce-івенту і яку будемо використовувати для формування масиву товарів.
2. DL - ecommerce.currency — змінна для отримання валюти (можна також прописати значення вручну, якщо валюта є незмінною).
3. DL - ecommerce.value — сума, яку було отримано на рівні івенту.
На жаль, як показує практика, не завжди на рівні івенту передається value. Тому можна її порахувати, перебравши масив товарів (price * quantity). Для такого випадку можна буде створити змінну JS - value.
function() {
var e = {{DL - ecommerce}} || {};
var items = Array.isArray(e.items) ? e.items : [];
var total = 0;
for (var i = 0; i < items.length; i++) {
var it = items[i] || {};
var price = parseFloat((it.price + '').replace(',', '.')) || 0;
var qty = parseFloat(it.quantity) || 1;
total += price * qty;
}
return +total.toFixed(2);
}4. DL - ecommerce.transaction_id — номер замовлення.
5. JS - line_items — головна змінна, яка обробляє наш eCommerce-масив і видає нам дані з назвами ключів, які будуть сприйматися Pinterest.
function() {
var e = {{DL - ecommerce}} || {};
var items = Array.isArray(e.items) ? e.items : [];
var out = [];
for (var i = 0; i < items.length; i++) {
var it = items[i] || {};
out.push({
product_id: String(it.item_id || ''),
product_name: String(it.item_name || ''),
product_category: String(it.item_category || ''),
product_price: Number(it.price) || 0,
product_quantity: Number(it.quantity) || 1
});
}
return out;
}Передача eCommerce-івентів
Далі, для передачі івенту покупки (у Pinterest це івент Checkout) залишилося лише:
- Скористатися тегом Pinterest — створити новий тег Pinterest Pixel Tag.
- Обрати потрібний івент (у цьому прикладі це Checkout).
- Передати наші підготовлені дані з покупкою (DL - ecommerce.value, DL - ecommerce.currency, DL - ecommerce.transaction_id).
4. При цьому дані про товар передаємо кастомним параметром line_items.
5. Тригером буде подія, яка передається нам у dataLayer (у цьому випадку це purchase). Для створення додаємо новий тригер Custom Event і вказуємо наш івент, який отримуємо з dataLayer.
Таким чином, у нас є налаштований головний eCommerce-івент.
Усі подальші івенти налаштовуються таким самим чином, але можуть мати менший набір переданих даних. Наприклад, івент перегляду картки товару ViewContent може мати такий вигляд.
Як перевірити поточні налаштування за допомогою розширення
Переходимо на сайт, робимо подію, яку було налаштовано, та дивимося на розширення, яке було встановлено раніше (Pinterest Tag Helper).
Можемо одразу побачити, що Pinterest успішно встановлений, передано івент перегляду сторінки, а також ViewContent. Якщо відкрити eCommerce-івент, можна побачити, що дані про товар передаються коректно.
Йдемо далі і робимо покупку. Тут також можемо одразу побачити, що Pinterest було ініціалізовано, успішно прийшов івент перегляду сторінки, а також успішно прийшов івент покупки з усіма даними, які були нами передані.
При цьому розширення додатково звертає нашу увагу: No enhanced match was found. Це не є помилкою — Pinterest вказує, що ми не передали дані користувача (а саме хешований email).
Ці дані не є обов’язковими, і тег без них працює коректно. Більш детально можна почитати за посиланням.
Де знайти події в інтерфейсі рекламного кабінету
У своєму рекламному кабінеті Pinterest можна перейти до розділу конверсій, де відображаються всі події, що надходять із сайту.
Події з’являються в рекламному кабінеті протягом кількох хвилин після відправки, тож їх можна відстежувати майже в реальному часі.
Додатково можна тестувати івенти через вбудований функціонал Test Events, але зазвичай для цього достатньо розширення (Pinterest Tag Helper).
Підсумки
У результаті ми отримали повноцінне налаштування Pinterest Tag через GTM: від встановлення базового коду до передачі eCommerce-подій.
Тепер, я сподіваюсь, вам буде легше налаштувати передачу подій до Pinterest самостійно, і це не буде викликати труднощів.
Завантаження коментарів…