Продвижение сайтов & web-аналитика

Отправить заявку    +38 096 558 75 14

Расширенная электронная торговля Google Analytics

Расширенная электронная торговля (Enhanced Ecommerce) Google Analytics - это возможность отслеживать действия пользователя на сайте, начиная от просмотра, заканчивая заказом на сайте, отследить цепочку взаимодействий на уровне больших данных, сделать системные выводы и принять решения о структурных изменениях.

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

Мы будем рассматривать настройку расширенной электронной торговли для 2-х версий, так как на данный момент они обе актуальны:

👉 Google Analytics Universal;

👉 Google Analytics 4.

Настройка расширенной электронной торговли Google Analytics Universal


1

Подключаем расширенную электронную торговлю на уровне Google Analytics:

настройка электронной торговли в Google Analytics
2

Формируем пакет ТЗ для программистов по отправке событий в Tag Manager, который в свою очередь будет передавать события в Google Analytics.

Внутри, кода Tag Manager или в любом другом месте, к примеру в Footer, мы будем помещать контейнер данных, которые будут передаваться через Data Layer в Google Tag Manager, а затем в Analytics.

Data Layer – это стандартизированный формат для передачи данных с сайта в сторонние сервисы.

Каждая страница будет отдавать свою информацию о взаимодействии с сайтом со своими спец параметрами.

2.1 Показы товаров

Событие: impressions.

Размещение: страница каталога товара.

Описание: показ товаров в каталоге, или в результате поиска конкретного товара, или просто открытия категории.

Сработка события: в момент показа товара в видимой области.

Код в данном случае будет иметь следующий вид ниже. Думаю, даже не стоит расписывать, что означает каждая переменная, так как все предельно понятно.


dataLayer.push({
  'ecommerce': {
    'currencyCode': 'UAH',                       // Local currency is optional.
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',       // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Search Results',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Search Results',
       'position': 2
     }]
  },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'Impressions',
 'gtm-ee-event-non-interaction': 'True',
});
    

где:

'event': 'gtm-ee-event' - название пользовательского события, может быть произвольным

'gtm-ee-event-category': 'Enhanced Ecommerce' - категория события

'gtm-ee-event-action': 'Impressions' - действие

Этот блок отправляет данные в Tag Manager о совершении события. В данном случае, в идеале, чтобы событие срабатывало только тогда, когда товар находится в видимой области экрана.

2.2 Клики по товарам

Событие: productClick.

Размещение: страница каталога товара.

Описание: передача данных о кликах и переходах в товар.

Сработка события: в момент клика на карточку товара.


function(productObj) {
  dataLayer.push({
      'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                     
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'productClick',
 'gtm-ee-event-non-interaction': 'True',
     }
  });
}
  

2.3 Показы информации по товарам

Событие: detail.

Размещение: карточка товара.

Описание: просмотр информации о характеристиках товара и в целом, самого товара.

Сработка события: в момент просмотра фото или характеристик товара.


dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},    // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',         // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
   },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'detail',
 'gtm-ee-event-non-interaction': 'True',
});
  

2.4 Добавление товаров в корзину и удаление их из корзины

Событие: addToCart.

Размещение: страница каталога товара.

Описание: добавление товаров в корзину.

Сработка события: в момент клика на кнопку “добавить в корзину” или “купить в 1 клик”.


  dataLayer.push({
  'ecommerce': {
    'currencyCode': 'UAH',
    'add': {                                // 'add' actionFieldObject measures.
      'products': [{                        //  adding a product to a shopping cart.
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
       }]
    }
  },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'addToCart',
 'gtm-ee-event-non-interaction': 'True',
});
  

Событие: removeFromCart.

Размещение: корзина.

Описание: удаление товаров из корзины.

Сработка события: в момент нажатия на крестик в корзине или кнопку “удалить” напротив товара.


  dataLayer.push({
  'ecommerce': {
    'remove': {                               // 'remove' actionFieldObject measures.
      'products': [{                          //  removing a product to a shopping cart.
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
      }]
    },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'removeFromCart',
 'gtm-ee-event-non-interaction': 'True',
  }
});
  

2.5 Оформление покупки

Событие: checkout.

Размещение: корзина.

Описание: отправка информации о прохождении этапов оформления заказа.

Сработка события: в момент прохождения шага оформления заказа.

Есть возможность деления на шаги, если оформление осуществляется в несколько этапов.


function onCheckout() {
  dataLayer.push({
    'ecommerce': {
      'checkout': {
        'actionField': {'step': 1, 'option': 'Visa'},  // произвольно заполняете информацию о параметрах заказа
        'products': [{
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
       }]
     }
   },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'Checkout Step 1',
 'gtm-ee-event-non-interaction': 'True',
   }
  });
}
  

Если Ваш интернет-магазин предусматривает 2-х или более этапную систему оформления заказа, то на следующей странице Вы отправляете аналогичный код, только уже со Step 2 и необходимым option. Также добавляем шаги оформления заказа в настройках расширенной электронной торговли.

шаги оформления заказа в настройках электронной торговли

2.6 Покупка

Событие: purchase.

Размещение: страница благодарности за заказ, выше кода тег менеджер.

Описание: отправка информации о заказе.

Сработка события: в момент открытия страницы благодарности с информацией о заказе.

Внимание! Если у Вас была настроена стандартная электронная торговля - старый код необходимо будет удалить и прописать новый код + удалить старую обработку события на стороне тег менеджер + инициализировать переменную dataLayer выше кода скрипта. Помощь здесь.


dataLayer.push({
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T12345',                         // Transaction ID. Required for purchases and refunds.
        'affiliation': 'Online Store',
        'revenue': '35.43',                     // Total transaction value (incl. tax and shipping)
        'tax':'4.90',
        'shipping': '5.99',
        'coupon': 'SUMMER_SALE'
      },
      'products': [{                            // List of productFieldObjects.
        'name': 'Triblend Android T-Shirt',     // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1,
        'coupon': ''                            // Optional fields may be omitted or set to empty string.
       },
       {
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'quantity': 1
       }]
    }
  },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'purchase',
 'gtm-ee-event-non-interaction': 'True',
});
  

Это основные события. Если Вам необходимо больше информации, ее можно получить в руководстве для разработчиков.

3

Приемка событий на уровне Tag Manager и отправка в Google Analytics.

3.1 Создаем пользовательскую переменную пользовательского события.

3.2 Отправляем типовые события по триггеру пользовательского события в Google Analytics.

конфигурация тега

В действие прописываем значение в зависимости от события, которое мы отправляем.

Есть вариант настройки электронной торговли без Tag Manager, в данном случае события отправляются напрямую в Google Analytics через ga('require', 'ec') непосредственно доработкой самого кода аналитики, инструкция для разработчиков здесь.

3.3 Тестируем работу через Tag Assistant и отслеживаем новые отчеты в Google Analytics. Строим правильные аналитические выводы.

отчеты в Google Analytics

Расширенная электронная торговля Google Analytics 4

В июле 2023-го Universal Analytics заканчивает свою работу, после чего станет актуальной версия Google Analytics 4.

Многих интересует вопрос, как легко перенести расширенную электронную торговлю с Universal Analytics на версию GA4?

Наш ответ - только заново настроить. К сожалению, легких решений нет, так как в структуре кода есть значительные различия. Потребуется новое техническое задание и имплементация.

Настройка расширенной электронной торговли Google Analytics 4


Расширенная электронная торговля в Google Analytics 4 по своей сути ничем не отличается от версии Universal Analytics, только здесь нет необходимости отдельно включать опцию расширенной электронной торговли. Все события в версии GA4 можно сразу настроить по умолчанию, без доработок в текущем представлении.

Настройка осуществляется 2-я способами:

  • через gtag (данные отправляются напрямую в Google Analytics 4);
  • через Data Layer (данные отправляются в библиотеку Data Layer, из которой, через обработчик события в Tag Manager попадают в Google Analytics 4.

Мы с Вами будем рассматривать 2-й способ, так как практически все сайты работают с Tag Manager.

В Google Analytics 4 у каждого события есть уникальное название, которое рекомендуется системой. Сделать все через один event, как в версии Universal, не получится.

Итак, пройдемся по событиям.

Просмотры и показы товаров или позиций из списка

Событие: view_item_list.

Размещение: любой список товаров.

Описание: показ товаров в каталоге или в результате поиска конкретного товара, либо при открытии категории.

Сработка события: в момент показа товара в видимой области.


// Measure product views / impressions
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_item_list",
  ecommerce: {
    items: [
     {
       item_name: "Triblend Android T-Shirt",       // Name or ID is required.
       item_id: "12345",
       price: 15.25,
       item_brand: "Google",
       item_category: "Apparel", //// Главная категория
       item_category2: "Mens", //// Подкатегория
       item_category3: "Shirts", //// Подподкатегория
       item_category4: "Tshirts", //// Подподподкатегория
       item_variant: "Gray",  /// /Вариант
       item_list_name: "Search Results",   /////// Здесь задается место (список), где показывается товар (главная страница, категория, результат поиска, фильтр товаров)
       index: 1, //// Позиция товара в списке
       quantity: 1
     },
     {
       item_name: "Donut Friday Scented T-Shirt",
       item_id: "67890",
       price: 33.75,
       item_brand: "Google",
       item_category: "Apparel",
       item_category2: "Mens",
       item_category3: "Shirts",
       item_category4: "Tshirts",
       item_variant: "Black",
       item_list_name: "Search Results",
       index: 2,
     }]
  }
});

Клики по товару из списка позиций

Событие: select_item.

Размещение: место, откуда был совершен клик по товару.

Описание: передача данных о кликах и переходах в товар.

Сработка события: в момент клика на карточку товара.

 
/**
 * Call this function when a user clicks on a product link.
 * @param {Object} productObj An object that represents the product that is clicked.
 */
function onProductClick(productObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    event: "select_item",
    ecommerce: {
      items: [{
        item_name: productObj.name, // Name or ID is required.
        item_id: productObj.id,
        item_brand: productObj.brand,
        item_category: productObj.category,
        item_category2: productObj.category_2,
        item_category3: productObj.category_3,
        item_category4: productObj.category_4,
        item_variant: productObj.variant,
        item_list_name: productObj.list_name,  /////// Здесь задается место (список) откуда был клик по товару (категория, результат поиск, фильтр)
        index: productObj.index, ///// Позиция товара в списке
        price: productObj.price
      }]
    }
  });
}

Просмотры информации о товаре или позиции

Событие: view_item.

Размещение: карточка товара.

Описание: просмотр товара.

Сработка события: в момент просмотра фото или характеристик товара.


// Measure a view of product details. This example assumes the detail view occurs on pageload,
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_item",
  ecommerce: {
    items: [{
      item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
      item_id: "67890",
      price: 33.75,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Mens",
      item_category3: "Shirts",
      item_category4: "Tshirts",
      item_variant: "Black",
      quantity: 1
    }]
  }
});

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

Событие: add_to_cart.

Размещение: карточка товара или список товаров, где есть кнопка купить.

Описание: просмотр информации о характеристиках товара и в целом, самого товара.

Сработка события: в момент клика на кнопку купить.


// Measure when a product is added to a shopping cart
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    items: [{
      item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
      item_id: "67890",
      price: "33.75",
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Mens",
      item_category3: "Shirts",
      item_category4: "Tshirts",
      item_variant: "Black",
      item_list_name: "Search Results", //// Включаем этот параметр если нажимают “купить” из списка товаров
      index: 1, //// Позиция в списке, включаем этот параметр если нажимают “купить” из списка товаров
    }]
  }
});

Удаление товара из корзины

Событие: remove_from_cart.

Размещение: корзина.

Описание: удаление товаров из корзины.

Сработка события: в момент нажатия на крестик в корзине или кнопку “удалить” напротив товара.


// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "remove_from_cart",
  ecommerce: {
    items: [{
      item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
      item_id: "67890",
      price: 33.75,
      item_brand: "Google",
      item_category: "Apparel",
      item_variant: "Black",
    }]
  }
});

Оформление покупки

Событие: begin_checkout.

Размещение: корзина.

Описание: отправка информации о начале оформления заказа.

Сработка события: в момент, когда пользователь посещает корзину для оформления заказа.


/**
 * A function to handle a click on a checkout button.
 */
function onCheckout() {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    event: "begin_checkout",
    ecommerce: {
      items: [{
        item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
        item_id: "67890",
        price: 33.75,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Mens",
        item_category3: "Shirts",
        item_category4: "Tshirts",
        item_variant: "Black",
        quantity: 1
      }]
    }
  });
}

Если оформление в корзине проходит в несколько этапов, то в Google Analytics 4 это делится на следующие дополнительные events:

  • add_payment_info (добавление информации об оплате);
  • add_shipping_info (добавление информации о доставке).

Покупка

Событие: purchase.

Размещение: страница благодарности.

Описание: отправка информации о заказе.

Сработка события: в момент, когда заказ принят.


dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "T12345",
      affiliation: "Online Store",
      value: "59.89",
      tax: "4.90",
      shipping: "5.99",
      currency: "EUR",
      coupon: "SUMMER_SALE",
      items: [{
        item_name: "Triblend Android T-Shirt",
        item_id: "12345",
        price: "15.25",
        item_brand: "Google",
        item_category: "Apparel",
        item_variant: "Gray",
        quantity: 1
      }, {
        item_name: "Donut Friday Scented T-Shirt",
        item_id: "67890",
        price: 33.75,
        item_brand: "Google",
        item_category: "Apparel",
        item_variant: "Black",
        quantity: 1
      }]
  }
});

Что необходимо сделать в Tag Manager для расширенной электронной торговли Google Analytics 4?

  1. Создать теги для каждого из событий;
  2. Для всех событий, кроме purchase, задать параметр “items” со значением ecommerce.items
  3. Для purchase дополнительно прошиваются все параметры по заказу.

Как выглядят отчеты расширенной электронной торговли в GA4?

Как таковых, готовых в системе нет, поэтому их необходимо будет настроить.

  1. Списки пользователей.
  2. Списки пользователей в GA4
  3. Статистика товаров.
  4. Статистика товаров в GA4
  5. Все сеансы.
  6. Все сеансы в GA4
  7. Воронка посещений.
  8. Воронка посещений в GA4
    Воронка посещений в GA4

Каждый отчет можно модифицировать, в зависимости от потребностей.

За более подробной информацией, обращайтесь по контактам агентства. Кроме того, рекомендуем к просмотру видео о пользе расширенной электронной торговли в продвижении интернет-магазинов.