Shopify - это проприетарная платформа, поэтому некоторые аспекты ее работы не подробно описаны в документации или на форумах сообщества. Одна из таких тем - интеграция по умолчанию с Google Analytics (GA). В Интернете есть множество статей и руководств, в которых объясняется, как включить интеграцию GA по умолчанию в вашем магазине с помощью нескольких щелчков мышью, но ни один из них не объясняет, какие данные вы можете собирать с помощью этой интеграции. Сообщается, что он может предоставлять данные в формате расширенной электронной торговли, который в наши дни является довольно распространенным выбором. Этот формат позволяет собирать широкий спектр данных о ваших клиентах, их поведении и выборе. Но опять же, какая информация будет собрана и доступна в отчетах GA, зависит от каждой конкретной реализации.

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

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

  • Вся информация в этой статье основана на общедоступных источниках.
  • Когда я говорю «Google Analytics», я имею в виду Universal Analytics для Интернета.
  • В декабре 2020 года Google выпустила новую версию Google Analytics, также известную как «Свойства Google Analytics 4». На момент написания Shopify еще не предоставил для него интеграцию по умолчанию. Я уверен, что они это сделают позже. К тому времени это будет хорошая тема для новой статьи, а пока я говорю только об Universal Analytics.
  • Я предполагаю, что вы уже используете интеграцию GA по умолчанию в своей учетной записи Shopify с включенной опцией «Расширенная электронная торговля».

Краткое введение в расширенную электронную торговлю

Формат расширенной электронной торговли является логическим развитием своего предшественника, формата электронной торговли. Формат электронной торговли отслеживает две вещи:

  • информация о товарах, добавленных в корзину;
  • информация об успешных транзакциях (также называемых покупками).

В расширенной версии мы можем собирать гораздо больше данных:

  • данные о показах - информация о просмотренных товарах;
  • данные о товарах - информация о товарах, с которыми мы взаимодействовали;
  • данные о продвижении - информация о рекламных материалах, таких как баннеры или любая другая просмотренная реклама;
  • данные о действиях - информация, объясняющая, что мы делаем: нажимаем, покупаем, добавляем или удаляем товар в / из корзины и т. д.

Каждый перечисленный выше тип данных может быть собран с помощью набора предопределенных объектов, событий, действий и типов попаданий. Мы не можем изменить их или изменить их структуру, но мы можем заполнить их данными и отправить в GA.

Например, если мы хотим отслеживать подробную информацию о продукте на странице продукта, мы должны использовать «productFieldObject» в сочетании с действием «detail» и « pageview ».

«productFieldObject» имеет следующую структуру:

{
  id,  <== mandatory field
  name, <== mandatory field
  brand,
  category,
  variant,
  price,
  quantity,
  coupon,
  position
}

В сочетании с действием деталь Google рекомендует заполнить id, name, brand, поля категории и вариант. Я должен сказать, что это немного сбивает с толку, выбирать список полей для каждой конкретной ситуации, поскольку нет четких инструкций по этому вопросу или, по крайней мере, я не мог найти их в документации. Поэтому я использую примеры Google в качестве справочника и при необходимости изменяю их.

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

Шаг 1. Добавьте код начальной загрузки в тег ‹head›

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
</script>

Шаг 2. Подготовить данные о продукте для отправки в GA.

/* init default tracker object for our GA account */
ga('create', 'UA-XXXXX-Y');
/* link Enchanced Ecommerce plugin */
ga('require', 'ec');

/* add data to the 'addProduct' object stored in the tracker */
ga('ec:addProduct', {
  'id': 'P12345',
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel',
  'brand': 'Google',
  'variant': 'black'
});

/* set associated action data to 'detail' i.e. product details */
ga('ec:setAction', 'detail');
/* send product details view data with the hitType 'pageview' */
/* hitType - something like a scope of data */
ga('send', 'pageview');

Теперь, как только мы откроем страницу продукта, этот код будет выполнен, данные продукта будут преобразованы в специальный формат и отправлены в GA как параметры GET в запросе изображения с серверов Google.

Если вы потрудитесь проверить свой сетевой трафик, вы можете найти там такой запрос:

https://www.google.fr/pagead/1p-conversion/761607038/?random=85073946&cv=9&fst=1609281614630&num=1&label=-3HECIiFqM8BEP7mlOsC&bg=ffffff&guid=ON&resp=GooglemKTybQhCsO&u_h=1080&u_w=1920&u_ah=1053&u_aw=1920&u_cd=24&u_his=6&u_tz=60&u_java=false&u_nplug=3&u_nmime=4&gtm=2oabu0&sendb=1&ig=1&data=event%3Dpage_view%3Bpage_path%3D%2Fproducts%2Ftop-helder%3Bpage_title ...

Через мгновение данные о нашем продукте должны появиться в отчетах Google Analytics. Вуаля!

Весь процесс выглядит довольно просто: разветвите скрипт GA (шаг 1), подготовьте данные (шаг 2), используйте их в отчетах. Похоже, это может каждый. Это правда. Если у вас есть время ознакомиться с исчерпывающей документацией, вы можете настроить сбор данных, который удовлетворит все ваши потребности. К сожалению, в большинстве случаев нет времени или доступных человеческих ресурсов, поэтому интеграция с Shopify по умолчанию становится очень привлекательным выбором. Он позаботится о каждом шаге за вас и это бесплатно.

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

  1. это решение непрозрачно. Мы действительно не знаем, какие данные собираются и как они собираются. Это черный ящик.
  2. мы не можем его настроить. Shopify не дает нам никаких средств для расширения или изменения собранных данных. Конечно, мы можем установить диспетчер тегов Google поверх этого решения, чтобы получать больше данных, но как мы можем быть уверены, что мы не собираем одни и те же данные дважды?

Посмотрим, что мы можем со всем этим поделать.

В кроличью нору

Клиентский скрипт GA не может самостоятельно собирать данные электронной торговли. Он делегирует эту часть работы разработчикам сайта вместе со списком доступных API. Использование этого API может быть довольно сложной задачей, и что-то может работать не так, как вы ожидаете. В этом случае мы можем использовать библиотеку отладки GA. Когда он включен, он начинает писать подробные логи в консоль javascript. Если повезет, мы можем найти там что-то полезное, чтобы исправить нашу ошибку или понять, как работают механизмы GA.

Те, кто любит возиться с кодом, могут активировать журналы трассировки следующим образом:

// replace standard boot code with the code below
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics_debug.js','ga');
// activate trace mode before any ga() call
window.ga_debug = {trace: true};
...

Для обычных пользователей есть расширение Chrome, созданное Google. Мне это очень удобно: активируйте расширение, обновите страницу, и все журналы трассировки будут в консоли. Рекомендую всем, кто ежедневно работает с GA.

С помощью этого расширения мы можем видеть, какие данные отправляются в GA с каждой страницы нашего сайта:

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

Следуй за белым кроликом

Давайте поищем файл с очаровательным названием `trekkie.storefront. [Long hash value] .min.js` в исходном коде страницы продукта. Этот файл содержит библиотеку Shopify, которая контролирует все службы отслеживания данных, с которыми Shopify по умолчанию интегрируется. Этот скрипт устанавливает, настраивает и снабжает библиотеку GA всеми необходимыми данными.

Если вы откроете этот файл в своем любимом редакторе, вы, вероятно, увидите что-то вроде этого:

Не волнуйся. Ничего страшного. Поначалу Нео не мог его прочитать, да и ничего не понимал. Чтобы овладеть этим навыком, нужно время и терпение. Найдите любую онлайн-службу по разминированию js и преобразуйте файл в более читаемый вид. Вот копия того, что у меня получилось после разминирования (ссылка на github).

Для чего нужна библиотека trekkie? Мне это кажется сценарием загрузки для всех аналитических сервисов со списком предопределенных функций обратного вызова для различных событий сбора данных. ИМХО, он достаточно эффективен и прост в расширении и обслуживании. Одна библиотека js используется на всех страницах сайта. При включенном кешировании клиента он будет загружен только один раз. Серверный скрипт, в свою очередь, добавляет крошечный js-код, специфичный для страницы / шаблона, чтобы инициировать событие сбора данных и передавать ему все необходимые данные, такие как сведения о продукте или список продуктов в корзине и т. Д.

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

Как мы видим ниже, интеграция с GA по умолчанию применяет расширенный формат только в четырех случаях: когда мы просматриваем страницу продукта, когда мы добавляем продукт в корзину, когда мы находимся на первом этапе оформления заказа и когда мы переходим на страницу подтверждения платежа (также известную как «страница благодарности»).

Это дает нам не так много данных для работы в отчетах GA. Нет данных о продвижении, показах и почти нет данных о действиях. Будет общий обзор эффективности продаж, но почти не будет данных о поведении пользователей. Что может быть очень полезно, если мы хотим оценить эффект от наших внутренних рекламных кампаний, кнопок быстрого магазина / быстрого поиска / списка желаний, использования нового макета сетки на странице категории и так далее. Этот список можно продолжать бесконечно. Все зависит от потребностей вашего бизнеса. Если вы хотите получить дополнительную информацию, вам следует подумать о индивидуальном решении или найти приложение, которое может предоставить их вам.

Давайте подробнее рассмотрим эти четыре случая.

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

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

Как и в объекте продукта, значение id может иметь одно из двух значений. Мы это уже видели. Что мне кажется странным, так это то, что значение дохода устанавливается равным общему значению, когда оно определено и не равно нулю. Почему это так, если для этого есть специальная переменная дохода (t.revenue)? Если вы знаете ответ, дайте мне знать в комментариях.

В трех из четырех случаев данные отправляются в GA, когда пользователь открывает страницу. Это тривиальная вещь, которую можно организовать на любом сайте Shopify, независимо от используемой темы. Определить момент, когда пользователь добавляет товар в корзину, намного сложнее с технической точки зрения. Особенно, если это универсальное решение для любой структуры темы.

Давай подумаем. Как мы могли поймать событие добавить в корзину? Каждый раз, когда мы добавляем товар в корзину, мы отправляем форму с действием / cart / add. Добавление прослушивателя событий для событий submit может помочь: как только пользователь нажимает кнопку добавить в корзину, включается прослушиватель событий, событие отменяется с помощью event.preventDefault () , мы отправляем все, что нам нужно, в GA, а затем повторно отправляем форму с помощью form.submit () . Элегантно и просто. Именно так это делает Shopify. Вот полная версия файла (ссылка на github).

Но что, если мы добавим товары через запросы Ajax? Предыдущий трюк со слушателями событий здесь не поможет. Это требует более изощренного подхода. Оказывается, решение лежит на поверхности, но хотелось бы, чтобы там было другое.

Shopify перезаписывает встроенную функцию fetch () и объект XMLHttpRequest, не говоря ни слова об этом в документации, поэтому все ваши вызовы XHR и fetch не обслуживаются с помощью собственного API, как вы могли подумать.

Как разработчик я понимаю, почему это было сделано. Это единственный способ охватить все случаи использования Ajax. Без этого вся интеграция с GA выглядит менее привлекательной. Это как шампанское без пузырьков - оно никому не нужно. Я уверен, что кто-то сообразительный и сообразительный взвесил все за и против, прежде чем внедрить это решение вживую. Какой бы ни была цена. Да как насчет стоимости? Когда вы ошибаетесь с собственными функциями или объектами, вы должны быть готовы к последствиям. Перезапись собственного объекта в вашем частном проекте может не иметь большого значения, если вы знаете, что делаете. В худшем случае вы заработаете себе бессонную ночь, чтобы исправить ошибку. Когда вы делаете то же самое тайно в большем масштабе, вы подвергаете риску тысячи людей, которые не ожидают, что проблема может возникнуть именно в этом направлении. Помимо чисто технических рисков, существует вопрос доверия и конфиденциальности. Через запросы Ajax передается много данных, включая пароли и другую конфиденциальную информацию. Я бы не хотел, чтобы эта информация была доступна никому, кроме человека, которому она адресована. Сниффинг Ajax-трафика - это не лучший вариант. Исправить техническую ошибку довольно просто, но вернуть доверие людей гораздо сложнее. Shopify должен быть более прозрачным со своими клиентами в отношении таких чувствительных функций, как эта.

Разрешите закончить первую часть статьи на этой яркой ноте. Поздравляю тех, кто терпеливо дочитал до этого места. Надеюсь, это было не напрасно, и вы узнали что-то новое об интеграции Shopify по умолчанию с Enhanced Ecommerce: как это работает, какие данные поступают на серверы GA и как их проверять.

Во второй части хочу провести небольшой эксперимент. Я попытаюсь добавить собственные показатели продукта к интеграции с GA по умолчанию. Посмотрим, как это сделать и стоит ли это того. Будьте на связи!

Вывод из этой статьи

  • Интеграция с GA по умолчанию - хороший выбор, если вы хотите получить бесплатное решение из коробки.
  • Интеграция с GA по умолчанию дает достаточно данных для общего обзора эффективности магазина.
  • Если вам нужны данные о продвижении, показах или конкретные данные о действиях, вам следует искать пользовательские настройки GA или сторонние приложения.
  • Интеграция с GA по умолчанию переписывает некоторый собственный веб-API.