Технічне завдання для доповнення подій datalayer


1. Основні події        2
1.1 click_fp_discount        2
1.2 click_popup        2
1.3 Воронка "Оформлення Замовлення"        3
1.3.1 check_out_name_input        3
1.3.2  check_out_surname_input        4
1.3.3 check_out_email_input        5
1.3.4 check_out_phone_input        6
1.3.5 check_out_promocode        7
1.3.6 click_do_not_call (Клік на чекбоксі "Не передзвонювати мені")        8
1.3.7 click_confirm_order_button        9
1.3.8 Заповнення інформації про оплату        9
1.3.9 Заповнення інформації про доставку        11
1.3.10 click_place_order        13
1.4 Банер        14
1.4.1 select_promotion        14
1.4.2 view_promotion        17
1.5 click_continue_shopping        18
1.6 click_filter        19
2. Рекомендовані події        21
2.1 Передача User ID        21
2.2 Реєстрація облікового запису        21
2.3 Логін на сайті        22
2.4 items        23
2.5 view_item        26
________________


1. Основні події
1.1 click_fp_discount
Умова: користувач натискає на кнопку, щоб отримати знижку на свою першу покупку.
  

Приклад коду:
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'click_fp_discount',
  });


Пояснення: Ця подія викликається одноразово, коли користувач вирішує отримати знижку на перший покупку, натискаючи на відповідну кнопку. 


1.2 click_popup
Умова: користувач натискає на кнопку "Підписатись" на випливаючому вікні.
  

Приклад коду:
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'click_popup',
  });
1.3 Воронка "Оформлення Замовлення" 
Кожна з подій відстежує взаємодію користувача з відповідним полем на сторінці оформлення замовлення ukrarmor.com.ua/checkout.
1.3.1 check_out_name_input 
Умова: користувач ввів ім’я
  



Приклад коду:
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'check_out_name_input',
  ecommerce: {}
});


1.3.2  check_out_surname_input
Умова: користувач ввід прізвище.
  

Приклад коду:


window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'check_out_surname_input',
  ecommerce: {}
});


 1.3.3 check_out_email_input
Умова: користувач заповнив поле електронної пошти.
  



Приклад коду:


window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'check_out_email_input',
  ecommerce: {}
});


1.3.4 check_out_phone_input 
Умова: користувач заповнив поле з номером телефону.
  



Приклад коду:
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'check_out_phone_input',
  ecommerce: {}
});
 
1.3.5 check_out_promocode
Умова: користувач додав промокод на сторінцій чекауту.
  



Приклад коду:
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'check_out_promocode',
  ecommerce: {}
});


1.3.6 click_do_not_call (Клік на чекбоксі "Не передзвонювати мені")
Умова: користувач клікає на чекбоксі "Не передзвонювати мені".
  



Приклад коду:
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'click_do_not_call',
  ecommerce: {}
});


1.3.7 click_confirm_order_button
Умова: користувач клікає на кнопці для підтвердження свого замовлення.
  



Приклад коду:
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: ' click_confirm_order_button,
  ecommerce: {}
});


1.3.8 Заповнення інформації про оплату
Умова: при виборі способу оплати.
  

Приклад коду:


window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'add_payment_info',
  ecommerce: {
    payment_type: 'Спосіб оплати',
    items: [{
      item_name: 'Назва товару',
      item_id: 'ID товару',
      price: 'Ціна',
      currency: 'Валюта',
      item_brand: 'Бренд товару',
      item_category: 'Категорія ',
      item_category2: 'Категорія 2',
      item_list_name: 'Назва списку',
      item_list_id: 'ID списку',
      item_variant: 'Варіант товару',
      index: 'Позиція товару в списку',
      quantity: 'Кількість товару'
    },{
      ...
    }]
  }
});


Важливо. Подія повинна ініціюватися одноразово, коли користувач визначився зі способом оплати та перейшов до наступного кроку оформлення замовлення. Це допоможе уникнути повторного відправлення події при зміні способу оплати або при поверненні до попередніх етапів вибору.


Розшифровка коду та змінних: 
payment_type (рядкова змінна) – спосіб оплати.
Всі інші змінні повністю аналогічні до попереднього пункту. Змінна item_list_name відповідає назві списку, на якому відбувся клік по картці товарів і повинна  “протягуватись” до цього товару за всіма наступними подіями.
1.3.9 Заповнення інформації про доставку
Умова: коли користувач обрав спосіб доставки та заповнив всі обов'язкові поля.


Якщо користувач не змінював спосіб оплати, відправляти код перед кроком оформлення замовлення.
  

Приклад коду:


window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'add_shipping_info',
  ecommerce: {
    shipping_tier: 'Спосіб доставки',
    items: [{
      item_name: 'Назва товару',
      item_id: 'ID товару',
      price: 'Ціна',
      currency: 'Валюта',
      item_brand: 'Бренд товару',
      item_category: 'Категорія ',
      item_category2: 'Категорія 2',
      item_list_name: 'Назва списку',
      item_list_id: 'ID списку',
      item_variant: 'Варіант товару',
      index: 'Позиція товару в списку',
      quantity: 'Кількість товару'
    },{
      ...
    }]
  }
});


Важливо. Подія повинна відправлятись лише один раз, коли користувач вибрав метод доставки, заповнив усі необхідні поля та просунувся до наступного етапу оформлення замовлення. Це виключить можливість багаторазового відправлення події у випадку повторного вибору методу доставки чи корекції введеної інформації.


Розшифровка коду та змінних: 
shipping_tier (рядкова змінна) - спосіб доставки.
Всі інші змінні повністю аналогічні до попереднього пункту. Змінна item_list_name відповідає назві списку, на якому відбувся клік по картці товарів і повинна  “протягуватись” до цього товару за всіма наступними подіями.


1.3.10 click_place_order
Умова: клік користувача на кнопку "Оформити замовлення"
  

Приклад коду:
dataLayer.push({
  event: "click_place_order",
});
1.4 Банер
Для відстеження кліків по банерам використовуємо рекомендовані події відповідно до стандартів Google Analytics. 
1.4.1 select_promotion
Умова: користувач клікнув на банер.
  



Приклад коду:
dataLayer.push({ ecommerce: null });  // Очищення попереднього об'єкта ecommerce.
dataLayer.push({
  event: "select_promotion",
  ecommerce: {
    creative_name: "Summer Banner",
    creative_slot: "featured_app_1",
    promotion_id: "P_12345",
    promotion_name: "Розпродаж",
    items: [
      {
        item_id: "SKU_12345",
        item_name: "Футболка",
        affiliation: "Магазин Google Merchandise",
        coupon: "SUMMER_FUN",
        discount: 2.22,
        index: 0,
        item_brand: "Google",
        item_category: "Одяг",
        item_category2: "Дорослі",
        item_category3: "Сорочки",
        item_category4: "Комбінезони",
        item_category5: "Короткі рукави",
        item_list_id: "related_products",
        item_list_name: "Супутні товари",
        item_variant: "зелений",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 10.01,
        quantity: 3
      }
    ]
  }
});


Розшифровка коду та змінних:


* creative_name (рядок, необов'язковий): Назва промоційного твору.
* creative_slot (рядок, необов'язковий): Назва слоту промоційного твору, пов'язаного з подією.
* promotion_id (рядок, необов'язковий): ID промоції, пов'язаної з подією.
* promotion_name (рядок, необов'язковий): Назва промоції, пов'язаної з подією.
* items (масив елементів): Елементи події. Кожен елемент масиву може містити такі параметри (не всі є обов'язковими):
   * item_id (рядок, обов'язковий): ID товару.
   * item_name (рядок, обов'язковий): Назва товару.
   * affiliation (рядок, необов'язковий): Афіліація товару, що вказує на постачальну компанію або магазин.
   * coupon (рядок, необов'язковий): Назва або код купона, пов'язаного з товаром.
   * discount (число, необов'язковий): Величина монетарної знижки на одиницю товару.
   * index (число, необов'язковий): Індекс або позиція товару у списку.
   * item_brand (рядок, необов'язковий): Бренд товару.
   * item_category (рядок, необов'язковий): Категорія товару.
   * item_category2 до item_category5 (рядок, необов'язковий): Додаткові категорії товару.
   * item_list_id (рядок, необов'язковий): ID списку, в якому був представлений товар користувачу.
   * item_list_name (рядок, необов'язковий): Назва списку, в якому був представлений товар користувачу.
   * item_variant (рядок, необов'язковий): Варіант товару або унікальний код/опис для додаткових деталей/опцій товару.
   * location_id (рядок, необов'язковий): Фізичне місце, пов'язане з товаром (наприклад, фізичний магазин).
   * price (число, необов'язковий): Ціна одиниці товару.
   * quantity (число, необов'язковий): Кількість товару.


1.4.2 view_promotion
Умова: користувач переглянув банер.


Приклад коду:
dataLayer.push({ ecommerce: null });  // Очищення попереднього об'єкта ecommerce.
dataLayer.push({
  event: "view_promotion",
  ecommerce: {
    creative_name: "Summer Banner",
    creative_slot: "featured_app_1",
    promotion_id: "P_12345",
    promotion_name: "Літня Розпродаж",
    items: [
      {
        item_id: "SKU_12345",
        item_name: "Футболка Stan and Friends",
        affiliation: "Магазин Google Merchandise",
        coupon: "SUMMER_FUN",
        discount: 2.22,
        index: 0,
        item_brand: "Google",
        item_category: "Одяг",
        item_category2: "Дорослі",
        item_category3: "Сорочки",
        item_category4: "Комбінезони",
        item_category5: "Короткі рукави",
        item_list_id: "related_products",
        item_list_name: "Супутні товари",
        item_variant: "зелений",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 10.01,
        quantity: 3
      }
    ]
  }
});


Розшифровка коду та змінних: всі змінні повністю аналогічні попереднім пунктам.


1.5 click_continue_shopping
Умова: клік користувача на кнопку "Продовжити покупки"
  
 
Приклад коду:
dataLayer.push({
  event: "click_continue_shopping"
  });
1.6 click_filter
Умова: клік користувача на будь-який тип фільтра.
  
 
Приклад коду:
dataLayer.push({
  event: "click_filter"
  type: ‘Бренд’
  value: 'Artstep'
});


Розшифрування змінних:
1. value (рядкова змінна): Інформація про фільтр, який користувач встановив
2. type (рядкова зміна): Назва виставленого фільтру.


Важливо! Параметри type та value повинні передаватися, якщо доступні.
Якщо передача параметрів можлива лише для деяких подій, то для подій, де передача параметрів неможлива, необхідно передавати значення ‘’.


Приклад події без параметрів:


dataLayer.push({
  event: "click_filter",
  type: '',
  value: ''
});
2. Рекомендовані події
2.1 Передача User ID
Під час входу в систему та реєстрації користувачеві потрібно надати унікальний ідентифікатор (User ID), який буде зберігатися під час усіх наступних сеансів.
Після виходу користувача з системи потрібно видаляти код, який передає дані про User ID.


User ID повинен відповідати ідентифікатору користувача у вашій системі. Не можна використовувати особисті дані (номер телефону, електронну пошту) як ідентифікатор користувача.


Ідентифікатор користувача потрібно передати на рівень даних, використовуючи наступний код, розмістивши його над контейнером Google Tag Manager, як найближче до тегу <head>:


<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'User_ID':'{ID користувача}'});
</script>


Розшифровка коду:
window.dataLayer = window.dataLayer || [];   – рядок для перевірки, чи був об'єкт dataLayer визначений заздалегідь.
{ID користувача}  – ця функція повертає ID користувача, який увійшов.
2.2 Реєстрація облікового запису
Умова: при успішній реєстрації облікового запису користувачем:
  

Розмістити код:


window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'sign_up'
});


2.3 Логін на сайті
Умова: при успішному логіні користувача на сайті.
  

Розмістити код:


window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'login'
});


2.4 items
Для поліпшення передачі даних про товари на сайті рекомендуємо доповнити об’єкт item в подіях:


items: [{
      item_name: 'Назва товару',
      item_id: 'ID товару',
      price: 9.99,
      currency: 'Валюта',
      item_brand: 'Бренд товару',
      item_category: 'Категорія 1',
item_category2: 'Категорія 2',
      item_category3: 'Категорія 3',
      item_category4: 'Категорія 4',
      item_list_name: 'Назва списку',
      item_list_id: 'ID списку',
      index: ‘2’,
      quantity: 1
    }


Приклад:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'view_item_list',
  ecommerce: {
    items: [{
      item_name: 'Назва товару',
      item_id: 'ID товару',
      price: 9.99,
      currency: 'Валюта',
      item_brand: 'Бренд товару',
      item_category: 'Категорія 1',
item_category2: 'Категорія 2',
      item_category3: 'Категорія 3',
      item_category4: 'Категорія 4',
      item_list_name: 'Назва списку',
      item_list_id: 'ID списку',
      index: ‘2’,
      quantity: 1
    },{
      ...
    }]
  }
});
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'select_item',
  ecommerce: {
    items: [{
      item_name: 'Назва товару',
      item_id: 'ID товару',
      price: 9.99,
      currency: 'Валюта',
      item_brand: 'Бренд товару',
      item_category: 'Категорія',
item_category2: 'Категорія 2',
      item_category3: 'Категорія 3',
      item_category4: 'Категорія 4',
      item_list_name: 'Назва списку',
      item_list_id: 'ID списку',
      index: '1',
      quantity: 1
    }]
  }
});
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    items: [{
      item_name: 'Назва товару',
      item_id: 'ID товару',
      price: 9.99,
      currency: 'Валюта',
      item_brand: 'Бренд товару',
      item_category: 'Категорія',
item_category2: 'Категорія 2',
      item_category3: 'Категорія 3',
      item_category4: 'Категорія 4',
      item_list_name: 'Назва списку',
      item_list_id: 'ID списку',
      quantity: 1
    }]
  }
});


Розшифровка коду та змінних:
1. item_name (рядкова змінна) - назва товару.
2. item_id (рядкова змінна) - ідентифікатор (SKU) товару.
3. price (десяткове число) - ціна одиниці товару. Використовується крапка як десятковий роздільник.
4. currency (рядкова змінна) - валюта відповідно до ISO 4217.
5. item_brand (рядкова змінна) - бренд товару.
6. item_category (рядкова змінна) - ієрархія категорій, до якої належить товар. 
Кожен параметр відповідає своєму рівню категорії. item_category завжди відповідає головній батьківській категорії, далі по ієрархії додаються item_category2, item_category3 та т.д. до 4 рівня. Якщо у товару відсутній якийсь рівень категорії, то item_category на цьому рівні не передається зовсім.
7. item_list_name (рядкова змінна) - список, де був показаний товар. Якщо користувач потрапляє на картку товару ззовні сайту, змінну list не передавати взагалі. Наприклад, для списку "Топ продажів" передавати 'Top_seller'.
8. item_list_id (рядкова змінна) - ідентифікатор списку, можна згенерувати ідентифікатор, який буде повторюватися завжди для одного й того ж списку. Наприклад, для списку "Топ продажів" передавати 'TS1'.
9. index (рядкова змінна) - положення товару у даному списку. Рахунок йде зліва направо по горизонталі.
10. quantity (цілочисельна змінна) - кількість товару. У списку це завжди буде 1.
2.5 view_item
Умова: користувач перейшов на картку товару
Важливо! Передавати наявність товару
  



Приклад коду: 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_name: 'Назва товару',
      item_id: 'ID товару',
      price: 9.99,
      currency: 'Валюта',
      item_brand: 'Бренд товару',
      item_category: 'Категорія 1',
      item_category2: 'Категорія 2',
      item_category3: 'Категорія 3',
      item_category4: 'Категорія 4',
      item_list_name: 'Назва списку',
      item_list_id: 'ID списку',
      index: '2',
      quantity: 1,
      availability: 'in_stock'  // Статус наявності товару (in_stock або out_of_stock)
    }]
  }
});