Ecommerce своими руками без программиста: пошаговая инструкция

Настройка электронной торговли (ecommerce) практически всегда требует персонального подхода к сайту, а также разработчика, который всё настроит. Как сделать все самому, без помощи программиста, используя лишь Google Tag Manager и несколько готовых скриптов?

Привет, я Александр Зарайский — спикер курса «Весь контекст за 4 месяца». На курсе мы много обсуждаем как контекст вообще, так и аналитику в частности. Сегодня я хотел бы по шагам показать, как настроить отправку данных ecommerce с сайта интернет-магазина, не имея глубоких познаний разработчика.

Кроме того, разберем простыми словами что такое пресловутый datalayer, пользовательские события, как делать простую проверку отправки формы и еще пару приятных инструментов в интерфейсе GTM.

Руководство ориентировано на пользователей, которые уже работали с GTM и понимают, что такое события в Google Analytics и как настроить их отправку в GTM. Если вы только начали изучать, то рекомендую сначала ознакомится с моими прошлыми статьями о GTM:

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Контекстный кодинг: как улучшить работу с Google Tag Manager с помощью программирования

Если говорить просто, то e-commerce, это статистика с сайта - какой товар (название, цена, количество, артикул) был куплен, кем и когда. Есть детальная инструкция.

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

Звучит весьма перспективно, но сам по себе e-commerce сложен в настройке по двум основным причинам:

Поэтому обычно настройка e-commerce передается как задача разработчику, и реализуется через backend сайта.

Но e-commerce можно настроить и через GTM, причем на большую часть интернет-магазинов с корзинами и не имея профессиональных навыков разработчика. Как? Давайте разбирать.

Для работы потребуется внедренный на сайт контейнер GTM и Google Analytics с включенной электронной торговлей.

Пример будет построен на основе сайта https://sladradosti.com/, созданного в конструкторе tilda.

Сформулируем задачу. E-commerce подразумевает отправку данных с сайта о том, какие товары покупает пользователь, когда он заканчивает оформление заказа. Следовательно, требуется отправить данные о товарах в Google Analytics сразу после того, как пользователь заполняет форму заказа и нажимает кнопку.

Составляем пункты плана:

Главное отличие события отправки формы заказа от обычного события на какой-то элемент, это наличие условия, что обязательные поля формы должны быть заполнены. Так как если создать событие только на клик по кнопке отправки формы заказа, то событие будет выполняться даже если форма не отправилась из-за какого-то незаполненного поля (не ввел имя, забыл вписать телефон и т.п.).

В текущем примере, есть следующая форма заказа из корзины:

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

Для этой цели есть проверенный способ средствами GTM и небольшого программирования.

Для начала создадим Пользовательскую переменную - Собственный код JavaScript

Далее, введем следующий код JavaScript:

О том, что такое функции, переменные и условия, я объяснял в статье “Контекстный кодинг”. Если желаете разобраться в деталях, то рекомендую ознакомится.

В этой функции, есть две переменных - (name) имя и (phone) телефон, в которых в будущем будут значения полей формы. И условие if, которое гласит: Если имя и почта не содержат пустоту, то говорим (true) правда. В другом случае код скажет - (false) ложь.

Это и есть заготовка условия проверки. Теперь осталось в переменные name и email записывать данные из формы.

Сделать это достаточно просто. Нужно для начала найти элемент поля ввода на сайте и скопировать его Selector (селектор).

Пример в браузере Google Chrome:

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

Далее, для теста найдем элемент в консоли браузера и попытаемся получить его value, предварительно заполнив поле ввода каким-то значением.

Для поиска элемента есть стандартная команда:

document.querySelector(‘[селектор]’);

Выглядит это так:

Как видно, мы можем получать данные элемента по запросу.

Вставим эти команды в код проверки формы:

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

Если вам тоже кажется, что эти селекторы смотрятся громоздко в коде, то в функционале GTM есть Пользовательская переменная - Элемент DOM, которая может получать данные элемента по селектору таким же образом, как и document.querySelector.

Заполняется она так:

А добавить в код нужно будет следующим образом:

Суть будет та же, но выглядит красивее.

В результате должна получится переменная проверки формы:

Я её назвал “Проверка на заполненность полей Оформить заказ” - чтобы точно было понятно что она делает.

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

Создаем стандартный тег на отправку события в Google Analytics:

Уверен с этим проблем не будет.

Далее, триггер. Нужно сделать триггер на клик кнопки “оформить заказ” и при этом сделать проверку заполненности полей.

Кнопку найдем с помощью селектора и добавим условие, чтобы переменная “Проверка на заполненность полей Оформить заказ” вернула нам true.

Условие: Click Element - соответствует селектору CSS позволяет сравнивать селектор элемента по которому был клик, с селектором условия. И при соответствии считает проверку успешной.

А вторым условием была подставлена переменная проверки, где ожидаемое значение: равно - true.

Конечный результат тега и триггера проверки отправки формы:

Важно: помните, что в теге Событие, поля Категория и Действия соответствуют Категории и Действию цели Google Analytics, которую вы создали.

Проверяем работу, не забыв обновить Диспетчер тегов и перезагрузив страницу сайта:

Без заполнения данных:

Условия не выполнены, событие не сработало и ничего не было отправлено.

При успешном заполнении:

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

Итак, отправка событий с формы работает успешно.

Шаблон проверки формы заказа гибок и его можно применять на разных таблицах с разными обязательными формами, просто меняя селекторы и изменяя количество переменных в условии. Например если бы там было еще обязательная переменная почта (email), то код бы выглядел так:

Событие отправки формы заказа по условию сделана, теперь перейдем непосредственно к настройке e-commerce.

Давайте разберемся для начала, какие данные нужны для e-commerce.

Для корректной работы e-commerce как минимум нужно:

transactionId - ID текущей транзакции (будет отображаться в отчетности Google Analytics)

transactionTotal - Сумма стоимости всех товаров

transactionProducts - Перечисление товаров

currency - Используемая валюта при покупке

Каждый товар в transactionProducts должен иметь следующие минимальные данные:

name - название товара

price - цена товара

quantity - количество единиц товара

sku - артикул товара

Здесь описаны дополнительные данные, которые можно собрать с помощью e-commerce

Отлично, теперь нам нужно определить, где взять в корзине сайта эти данные

Исходя из скриншота видно, что у товаров есть name, quantity и price. Но у товаров нету sku - это не проблема, разберем в процессе.

В корзине также есть сумма товаров, которую можно считать transactionTotal. В качестве currency (валюты) можно просто вписать RUB - т.к. на сайте используются рубли. А transactionId будет случайным числом, которое надо будет сгенерировать.

Начнем составлять шаблон для заполнения. Для этого нам потребуется тег “Пользовательский HTML”.

Внесем туда для начала переменные:

Выглядит для начала так:

transactionProducts равняется скобкам, потому что это обозначает в JavaScript будущий список значений. А учитывая, что туда будут динамично вписываться товары из корзины, то нужно написать именно так.

А теперь давайте последовательно заполним данными каждую переменную от простого к сложному.

Кстати если потребуется иная валюта, то просто впишите её аббревиатуру. Например для евро - EUR, для долларов - USD и т.д. Только не забудьте внести в кавычки как в примере (одинарные или двойные).

Внедряем полученную переменную в код:

Для этого нужно найти элемент на сайте, который выдает нужное значение:

Но прежде, давайте проверим в консоли, что это то, что нам нужно:

Как видно на гифке, первый вызов был по селектору с добавлением innerText - это позволяет получить данные записанные в найденном элементе.

И в выводе получился текст: “1 251 р.” - что не подходит для записи в transactionTotal, т.к. нам нужно просто число.

Поэтому к следующему вызову был добавлен метод: .replace

Где в скобках первое значение в кавычках “что заменить”, а второе - “на что заменить”. В данном случае заменен: “ р.” (конец строки после числа) на пустое значение. И на третий раз метод повторили и был убран лишний пробел, в результате получив число.

Рекомендую запомнить метод replace - определенно пригодится при поиске нужного значения на иных сайтах.

Результирующую комбинацию записываем в переменную:

Для начала повторим, что нам нужно сделать и в чём проблема.

В эту переменную нужно записать товары, которые были добавлены в корзину. Изначально неизвестно, какие товары будут добавлены в корзину и сколько их будет. Следовательно, элемент “товар” в корзине мы не можем выбрать по селектору, т.к. он непостоянный и динамичный. И в этом вопросе нам поможет немного логики и щепотка программирования.

Мы не можем работать с элементом которого может не быть, но мы можем работать с элементами, которые есть в корзине постоянно. И как бы “вслепую” работать с их дочерними элементами.

Смотрите пример ниже и разберем его далее:

Для начала, был найдена таблица, которая содержит все товары. Отличие таблицы от товаров - она статична и всегда будет на странице корзины, вне зависимости от количества товаров в корзине.

Далее, был взять селектор таблицы и найден в консоли. Следующим шагом, был использован метод children, который вывел список всех дочерних элементов - и это все товары.

Затем, с помощью квадратных скобок и введения номера, я мог выбирать любой дочерний элемент из списка. То есть сейчас имеется доступ ко всем товарам корзины и можно без проблем вписать данные каждого товара. Всё что требуется - создать последовательную запись каждого children таблицы.

Запишем следующее в код шаблона:

Что нового добавилось:

Объявлена новая переменная list, в которую записан селектор таблицы товаров с методом children. То есть по сути в list хранится список всех товаров. Осталось расшифровать данные, в чём нам поможет цикл for. О нём я подробно рассказывал в статье по контекстному кодингу, потому тут ограничусь краткой вводной.

В цикле for объявляется переменная i, которая принимает значение 0 и каждую итерацию цикла увеличивается на 1, до тех пор, пока длина списка товаров (list.length) больше переменной i. Например сейчас всего три товара в списке и list.length будет равно 3, значит цикл повторится 3 раза с увеличением переменной i на единицу каждый раз в конце прохода цикла.

Внутри цикла реализован следующий метод:

Который обозначает, что каждый проход цикла, в объявлений список transactionProducts вносится (push) новый элемент, который содержит 4 переменных: name, price, quantity и sku. И пока что каждый элемент принимает значение переменной list[i]. А значит при каждом прохождении цикла будет вносится значение подобным образом: list[0], list[1], list[2] и так пока не законится цикл.

Помните, что в переменной list внесены товары? а значит вызов list[i] будет выглядеть так:

По факту будет запись каждого товара во все переменные. Это близко, но не совсем то, что нужно. Например, нужно найти название товара, а не весь товар. Значит list[i] в переменной name надо уточнить тем, что надо из рассматриваемого товара найти нужный элемент с названием:

Как видно, можно обратится к children текущего children и найти интересующий нас элемент. В данном случае это был 1 элемент, который содержал нужный текст.

Следовательно можно дополнить переменную name такой формулировкой:

list[i].children[1].innerText

И теперь в name будет записываться название каждого товара.

С ценой и количеством поступим также:

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

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

В результате скрипт получится таким:

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

Ну и последнее - данные надо внести в datalayer.

Давайте ненадолго отвлечемся от текущей задачи и по простому разберем, что такое datalayer.

Это по факту список Google Tag Manager, в котором он записывает и хранит данные произошедших событий. Его можно вызвать в консоли браузера, чтобы посмотреть его записи:

Как видно, он хранит все события, которые были произведены GTM.

Кроме того, с помощью datalayer можно вызывать события и хранить данные:

datalayer может вызывать пользовательские события. Здесь например был вызван test_event.

И есть возможность сохранить переменные с помощью push, в данном случае - data_list.

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

Дополним наш скрипт на основе полученных знаний:

Был добавлен метод dataLayer.push в который внесено пользовательское событие (event) - ecommerce. Вызов пользовательского события пригодится нам в будущем.

И добавлены переменные, которые были ранее собраны.

В результате в datalayer будут нужные для e-commerce значения и будет произведен вызов пользовательского события. Давайте протестим работу, добавив к тегу событие на клик кнопки оформить заказ:

Как видно, всё работает. В datalayer есть актуальные данные товаров, даже при их изменении.

Остался последний шаг - отправить данные в Google Analytics.

Был создан тег на отправку события формы заказа с проверкой, тег на сбор данных e-commerce и осталось сделать тег на отправку данных и связать все эти три тега вместе.

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

Был создан тег в виде стандартного шаблона Google Analytics, где типом отслеживания была указана “транзакция”, а в качестве триггера было создано пользовательское событие ecommerce - то которое вызывает datalayer. Следовательно отправка данных будет сразу после того, как в datalayer попадут данные e-commerce.

Теперь осталось привязать событие добавления данных e-commerce при успешной отправке формы. Тут поможет порядок вызова тегов:

В теге отправки формы был настроен порядок активации тегов, где был указан тег для e-commerce. То есть тег e-commerce будет вызван сразу после отправки формы и не будет вызван, если произошла какая-то ошибка (неправильное заполнение например).

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

Вот и всё! Результат можно проверить либо в отчетах Google Analytics по электронной торговле, либо с помощью расширения браузера - GA Debug:

Если еще нет такого расширения - рекомендую поставить. Удобно для отслеживания отправки событий в Google Analytics.

Весь перечисленный выше алгоритм и примененные шаблоны кода можно применить к большинству сайтов, где есть корзина в табличном виде (это почти все интернет-магазины). Однако алгоритм по минимуму, но придется подстраивать под ситуацию. Например естественно селекторы будут уникальны для разных сайтов, а набор children, чтобы найти name или price может быть другим.

Еще например встречались мне таблицы, где содержались не только товары, но и куски заголовков:

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

for (var i = 0; i < list.length; i++)

На этой сайте сделано так:

for (var i = 1; i < list.length - 1; i++)

То есть цикл начинался не с первого элемента, а со следующего (i = 1, а не 0) и последний элемент не обрабатывался (list.length - 1, длина на 1 меньше).

На другом сайте товары были вообще через один:

Потому элементы нужно было брать с пропуском. И условие цикла было таким:

for (var i = 0; i < list.length; i =+ 2)

где каждый цикл, к i прибавлялось не 1, а 2 (i =+ 2)Следовательно и на вашем сайте возможно придется изменить шаблон в зависимости от условий.

Если ваш сайт сделан в конструкторе Tilda, то вот шаблон ecommerce:

Руководство вышло довольно длинным и спасибо тем смелым людям, которые осилили его до конца. Надеюсь, описанное поможет лучше понять работу функционала GTM и e-commerce в частности.

Я планировал продолжить цикл статей по GTM. Следующей темой возможно станет разбор расширенного e-commerce - как считаете, актуально? И если у вас есть тема для разбора по GTM, пишите в комментариях, буду рад.

Впрочем, иногда текстовый формат сложен - проще один раз увидеть (и сделать самому), чем 100 раз прочитать. Мастер классы по GTM и аналитике, которые я веду в рамках “Весь контекст за 4 месяца” занимают около 5-6 часов демонстрации экрана - в таком формате контент воспринимается существенно проще, даже если у вас совсем немного опыта.

P.S.

Если моя статья показалась вам не столь сложной, вы можете проверить свои знания о контекстной рекламе при помощи вот такого теста из 15 вопросов, в составлении которого я также принял участие.