Настройка расширенной электронной коммерции Google

lgmwebstudio.com.ua-7d2983113639ff6e6e7095bf817654a0.png

Пошаговое руководство по настройке расширенной электронной коммерции:

Шаг 1. Устанавливаем на сайт код отслеживания Universal Google Analytics

Пример наличия счетчика в коде сайта

Шаг 2. Подключаем плагин es.js расширенной электронной коммерции

Это можно сделать с помощью команды:

ga('require', 'ec');

Данную команду необходимо внедрить в код отслеживания Universal Google Analytics. Кроме того, необходимо активировать функцию «Расширенная электронная торговля” в вашем аккаунте Google Analytics:»

— переходим во вкладку «Администратор» и в колонке «Представление» выбираем пункт «Настройка электронной торговли»:

Активация E-commerce в Google Analitycs

— в открывшемся окне активируем настройку расширенной электронной коммерции (устанавливаем ползунок «ВКЛ.»):

Активация E-commerce в Google Analitycs

— нажимаем кнопку «Отправить». Что касается настройки маркировки этапов оформления заказа, то заполнять это не обязательно, но мы поговорим об этом позже.

Шаг 3. Установка фрагментов кода

Для отслеживания детального процесса покупки, которое выполняют посетители необходимо установить соответствующие фрагменты кода на каждую страницу сайта. После внедрения кода вы сможете просматривать информацию о:

  • просмотрах показов товаров
  • кликах по ссылкам на товары
  • просмотрах подробной информации о товарах
  • добавление товаров в корзину и удаление из нее
  • начале процесса оформления покупки
  • совершение транзакций
  • возврате средств

Ниже приведенные фрагменты кода, которые нужно разместить на сайте.

1. Код отслеживания просмотра товаров

В этом примере пользователь впервые видит товар в результатах поиска. Данный фрагмент кода необходимо установить на каждую страницу, где представлен широкий ассортимент товаров интернет магазина (например, страницы категорий, главная страница сайта и т.д). Для регистрации этого показа используется команда ec:addImpression, а информация о товаре передается в объекте impressionFieldObject:

ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');
ga('ec:addImpression', {
  'id': 'P12345',
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel/T-Shirts',
  'brand': 'Google',
  'variant': 'black',
  'list': 'Search Results',
  'position': 1
});
ga('ec:addImpression', {
  'id': 'P67890',
  'name': 'YouTube Organic T-Shirt',
  'type': 'view',
  'category': 'Apparel/T-Shirts',
  'brand': , 'YouTube',
  'variant': 'gray',
  'list': 'Search Results',
  'position': 2
});
ga('send', 'pageview');

2. Код отслеживания клика по товару

Пользователь нажимает на заинтересовавший его товар, чтобы узнать о нем подробнее.

Данный фрагмент кода необходимо установить для каждой карточки товара в представленном списке категории. Чтобы зарегистрировать этот клик, используйте ec:addProduct и ec:setAction:

function onProductClick() {
  ga('ec:addProduct', {
    'id': 'P12345',
    'name': 'Android Warhol T-Shirt',
    'category': 'Apparel',
    'brand': 'Google',
    'variant': 'black',
    'position': 1
  });
 ga('ec:setAction', 'click', {list: 'Search Results'});
 ga('send', 'event', 'UX', 'click', 'Results', {
      'hitCallback': function() {
        document.location = '/product_details?id=P12345';
      }
  });
}

3. Код отслеживания просмотра информации о товаре

После клика на продукт пользователь попадает на страницу товара, где видит его детальное описание.

Данный код необходимо установить непосредственно на саму страницу товара.

Используйте ec:addProduct, чтобы зарегистрировать этот просмотр, и укажите действие типа detail с помощью ec:setAction:

ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');
ga('ec:addProduct', {
  'id': 'P12345',
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel',
  'brand': 'Google',
  'variant': 'black'
});
ga('ec:setAction', 'detail');
ga('send', 'pageview');  

4. Код для отслеживания добавления/удаления товара в/из корзины

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

Чтобы зарегистрировать добавление в корзину покупок (или удаление из нее), используйте ec:addProduct и задайте тип действия add (или remove):

Данный фрагмент кода устанавливается непосредственно на кнопку «Добавить в корзину» или «Купить».

function addToCart(product) {
  ga('ec:addProduct', {
    'id': product.id,
    'name': product.name,
    'category': product.category,
    'brand': product.brand,
    'variant': product.variant,
    'price': product.price,
    'quantity': product.qty
  });
  ga('ec:setAction', 'add');
  ga('send', 'event', 'UX', 'click', 'add to cart');
}

Ниже представленный фрагмент кода необходимо установить на кнопку «Удалить из корзины»:

ga("create", "UA-XXXXX-Y");
ga("require", "ec");
ga("ec:addProduct", {
  "id": "bc823",
  "name": "Fuelworks T-Shirt",
  "price": "92.00",
  "brand": "Fuelworks",
  "category": "T-Shirts",
  "variant": "red",
  "dimension1": "M",
  "position": 0,
  "quantity": 1
});
ga("ec:setAction", "remove");
ga("send", "event", "detail view", "click", "removeFromCart");

5. Код для отслеживания процесса оформления заказа

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

ga("create", "UA-XXXXX-Y");
ga("require", "ec");
ga("ec:addProduct", {
  "id": "bc823",
  "name": "Fuelworks T-Shirt",
  "price": "92.00",
  "brand": "Fuelworks",
  "category": "T-Shirts",
  "variant": "red",
  "dimension1": "M",
  "position": 0,
  "quantity": 1
});
ga("ec:setAction", "checkout", {
  "step": 1
});
ga("send", "pageview")

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

6. Транзакция

И наконец, пользователь завершает оформление покупки.

Для отслеживания продажи используйте ec:addProduct, чтобы добавить каждый товар, а затем ec:setAction, чтобы задать тип действия purchase (покупка). Сведения о транзакции (например, общий доход, налог и стоимость доставки) предоставляются в объекте actionFieldObject.

Данный фрагмент кода необходимо установить на завершающую кнопку оформления заказа:

ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');
ga('ec:addProduct', {
  'id': 'P12345',
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel',
  'brand': 'Google',
  'variant': 'black',
  'price': '29.20',
  'quantity': 1
});
ga('ec:setAction', 'purchase', {
  'id': 'T12345',
  'affiliation': 'Google Store - Online',
  'revenue': '37.39',
  'tax': '2.85',
  'shipping': '5.34',
  'coupon': 'SUMMER2013'
});
ga('send', 'pageview');

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

Пример внедрение упрощенной электронной торговли - проект GrandTrend.

Пример внедрения расширенной электронной торговли - проект Sally, LongWay.