Настройка Ecommerce для интернет-магазина | Битрикс-веб-мастер

20.06.2021

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

Просмотр списка товаров.

В каждой категории должен формироваться код для отправки списка товаров, которые входят в эту категории.

При открытии страницы должен формироваться JavaScrip код. По сути, данный код записывает данные в dataLayer, эти данные отправляются в ГТМ где обрабатываются и отправляются в Analytics.

Сайт должен формировать такой JS код:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'ecommerce': {
        'currencyCode': 'UAH',
        'impressions': [
            {
                'name': 'Product 1', // название товара
                'id': 'ID1', //айди товара
                'price': '23.5', // цена без валюты
                'brand': 'Brand 1', //Бренд товара
                'category': 'Category 1/Subcategory 11', //название категории и подкатегории
                'list': 'List 1', //Название списка товаров (категория, поиск, рекомендуемые, топ продаж и тд)
                'position': 1 //Позиция товара в списке
            },
            {
                'name': 'Product 2', // название товара
                'id': 'ID2', //айди товара
                'price': '14', // цена без валюты
                'brand': 'Brand 1', //Бренд товара
                'category': 'Category 1/Subcategory 11', //название категории и подкатегории
                'list': 'List 1', //Название списка товаров (категория, поиск, рекомендуемые, топ продаж и тд)
                'position': 2 //Позиция товара в списке
            }]
    },
    'event': 'gtm-ee-event',
    'gtm-ee-event-category': 'Enhanced Ecommerce',
    'gtm-ee-event-action': 'Product Impressions',
    'gtm-ee-event-non-interaction': 'True'
});
</script>

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

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

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

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'ecommerce': {
        'currencyCode': 'UAH',
        'click': {
            'actionField': {'list': 'List 1'}, //Название списка товаров (категория, поиск, рекомендуемые, топ продаж и тд)
            'products': [{
                'name': 'Product 1',
                'id': 'ID1',
                'price': '23.5',
                'brand': 'Brand 1',
                'category': 'Category 1/Subcategory 11',
                'position': 1
            }]
        }
    },
    'event': 'gtm-ee-event',
    'gtm-ee-event-category': 'Enhanced Ecommerce',
    'gtm-ee-event-action': 'Product Clicks',
    'gtm-ee-event-non-interaction': 'False',
});
</script>

Объект products содержит данные о товаре и заполняется так же как и в инструкции выше

Просмотры карточек товара

Код должен загружаться при открытии страницы карточки товара

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'ecommerce': {
        'currencyCode': 'UAH',
        'detail': {
            'actionField': {'list': 'List 1'},
            'products': [{
                'name': 'Product 1',
                'id': 'ID1',
                'price': '23.5',
                'brand': 'Brand 1',
                'category': 'Category 1/Subcategory 11',
                'variant': 'Variant 1'
            }]
        },
    },
    'event': 'gtm-ee-event',
    'gtm-ee-event-category': 'Enhanced Ecommerce',
    'gtm-ee-event-action': 'Product Details',
    'gtm-ee-event-non-interaction': 'True',
});
</script>

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

При добавлении товара в корзину должен исполняться код. Здесь может добавляться параметр variant в нем нужно записывать настраиваемый вариант товара (если есть). Еще добавляется параметр quantity в котором нужно записать количество товаров добавленных в корзину.

<script>window.dataLayer = window.dataLayer || [];
        dataLayer.push({
            'ecommerce': {
                'currencyCode': 'UAH',
                'add': {
                    'products': [{
                        'name': 'Product 1',
                        'id': 'ID1',
                        'price': '23.5',
                        'brand': 'Brand 1',
                        'category': 'Category 1/Subcategory 11',
                        'variant': 'Variant 1', //настраиваемый вариант товара
                        'quantity': 3
                    }]
                }
            },
            'event': 'gtm-ee-event',
            'gtm-ee-event-category': 'Enhanced Ecommerce',
            'gtm-ee-event-action': 'Adding a Product to a Shopping Cart',
            'gtm-ee-event-non-interaction': 'False',
        });
    </script>

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

Отслеживание удалений товаров из корзины. В массиве products стоит перечислить все товары, которые пользователь удалил из корзины. Если корзина полностью очищается — следует указать все товары, находившиеся в ней.

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'ecommerce': {
        'currencyCode': 'UAH',
        'remove': {
            'products': [{
                'name': 'Product 1',
                'id': 'ID1',
                'price': '23.5',
                'brand': 'Brand 1',
                'category': 'Category 1/Subcategory 11',
                'variant': 'Variant 1',
                'quantity': 1
            }]
        }
    },
    'event': 'gtm-ee-event',
    'gtm-ee-event-category': 'Enhanced Ecommerce',
    'gtm-ee-event-action': 'Removing a Product from a Shopping Cart',
    'gtm-ee-event-non-interaction': 'False',
});
</script>

Оформления заказа

Код запускается после того, как пользователь перешел на страницу Оформление заказа и выбрал способ аутентификации

Шаг 1. Выбор регистрации пользователя.

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'ecommerce': {
        'currencyCode': 'UAH',
        'checkout': {
            'actionField': {'step': 1, 'option': 'already have an account'}, //Клиент выбирает один вариант аутентификации
            'products': [{
                'name': 'Product 1',
                'id': 'ID1',
                'price': '23.5',
                'brand': 'Brand 1',
                'category': 'Category 1/Subcategory 11',
                'variant': 'Variant 1',
                'quantity': 2
            }]
        }
    },
    'event': 'gtm-ee-event',
    'gtm-ee-event-category': 'Enhanced Ecommerce',
    'gtm-ee-event-action': 'Checkout Step 1',
    'gtm-ee-event-non-interaction': 'False',
});
</script>

Шаг 2. Пользователь заполнил форму и выбрал способ доставки, в параметре option нужно передать выбранный способ доставки

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'ecommerce': {
        'currencyCode': 'UAH',
        'checkout': {
            'actionField': {'step': 2, 'option': 'Courier'}, //Клиент выбирает один вариант доставки
            'products': [{
                'name': 'Product 1',
                'id': 'ID1',
                'price': '23.5',
                'brand': 'Brand 1',
                'category': 'Category 1/Subcategory 11',
                'variant': 'Variant 1',
                'quantity': 2
            }]
        }
    },
    'event': 'gtm-ee-event',
    'gtm-ee-event-category': 'Enhanced Ecommerce',
    'gtm-ee-event-action': 'Checkout Step 2',
    'gtm-ee-event-non-interaction': 'False',
});
</script>

Шаг 3. Подтверждение информации о заказе

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'ecommerce': {
        'currencyCode': 'UAH',
        'checkout': {
            'actionField': {'step': 2},
            'products': [{
                'name': 'Product 1',
                'id': 'ID1',
                'price': '23.5',
                'brand': 'Brand 1',
                'category': 'Category 1/Subcategory 11',
                'variant': 'Variant 1',
                'quantity': 2
            }]
        }
    },
    'event': 'gtm-ee-event',
    'gtm-ee-event-category': 'Enhanced Ecommerce',
    'gtm-ee-event-action': 'Checkout Step 3',
    'gtm-ee-event-non-interaction': 'False',
});
</script>

Шаг 4. Выбор способа оплаты

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
        'ecommerce': {
            'currencyCode': 'UAH',
            'checkout': {
                'actionField': {'step': 2}, 'option': 'Bank payment'}, //Выбор или переход на страницу оплаты банка
            'products': [{
                'name': 'Product 1',
                'id': 'ID1',
                'price': '23.5',
                'brand': 'Brand 1',
                'category': 'Category 1/Subcategory 11',
                'variant': 'Variant 1',
                'quantity': 2
            }]
        }
    },
    'event': 'gtm-ee-event',
    'gtm-ee-event-category': 'Enhanced Ecommerce',
    'gtm-ee-event-action': 'Checkout Step 4',
    'gtm-ee-event-non-interaction': 'False',
});
</script>

Шаг 5. Совершенные покупки (транзакция)

Данные отправляются при попадании пользователя на страницу «Спасибо за покупку».

И при заказе в Один Клик

В массиве products должны быть перечислены все товары которые купили

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'ecommerce': {
        'currencyCode': 'UAH',
        'purchase': {
            'actionField': {
                'id': 'TID1', // айди транзакции
                'affiliation': 'Online Store', //название магазина
                'revenue': '91.4', //общая стоимость покупки
                'shipping': '35', //Цена доставки
                'coupon': 'Coupon 1' //название промокода если есть
            },
            'products': [{
                'name': 'Product 1',
                'id': 'ID1',
                'price': '23.5',
                'brand': 'Brand 1',
                'category': 'Category 1/Subcategory 11',
                'variant': 'Variant 1',
                'quantity': 2,
                'coupon': ''
            }]
        }
    },
    'event': 'gtm-ee-event',
    'gtm-ee-event-category': 'Enhanced Ecommerce',
    'gtm-ee-event-action': 'Purchase',
    'gtm-ee-event-non-interaction': 'False',
});
</script>

Полная отмена транзакции

При полной отмене покупки достаточно указать идентификатор транзакции.

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'ecommerce': {
        'refund': {
            'actionField': {'id': 'TID1'}  //id — идентификатор отмененной транзакции.
        }
    },
    'event': 'gtm-ee-event',
    'gtm-ee-event-category': 'Enhanced Ecommerce',
    'gtm-ee-event-action': 'Full Refund',
    'gtm-ee-event-non-interaction': 'False',
});
</script>

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

Отслеживание отправки запросов пользователя

Также, на сайте необходимо настроить отслеживание заполнения контактных форм.

При успешной отправки формы Заказать звонок добавить событие

dataLayer.push({'event': 'form_zvonok'});

При успешной отправки формы Подписка на новости добавить событие

dataLayer.push({'event': 'form_novosti'});

Когда клиент оставил отзыв, добавить событие

dataLayer.push({'event': 'otziv'});

Остается только найти места в шаблонах, в которых можно подключиться к имеющимся событиям в JS-скриптах, собрать нужные данные по товарам и передать их в аналитику

Также, все эти действия бесполезны без проведения корректных настроек на стороне Google Analitics