Starting a new project?
получить консультацию
Оставьте свои контактные данные, наш менеджер перезвонит вам.
Спасибо! Скоро с Вами свяжется наш менеджер.
Спасибо! Скоро с Вами свяжется наш менеджер.
В последнее время к нам на ведение заходит все больше проектов на CMS Shopify. Это платформа, заточенная под задачи электронной коммерции: у нее есть оптимальные шаблоны для разработки собственного интернет-магазина и встроенная система оплаты. К тому же Shopify полностью интегрируется с Google Analytics. Для начала работ с платформой требуется разрешение на редактирование в админке магазина.
В стандартной документации Shopify указано, что электронная коммерция настроена по умолчанию. Для Universal Analytics ее нужно включить в представлении данных Аналитики. Дополнительно настраивать ее не нужно.
Но случается такое, что SEO-специалисту нужно собрать больше данных о действиях пользователей. Например, отслеживать клики по телефонам или добавление товаров в wishlist. И совсем недавно я столкнулась с такой задачей. Цели для сайтов на Shopify я настраивала с помощью Google Tag Manager.
В этой статье покажу, как настроить цели для Universal Analytics и Google Analytics 4 на нескольких рабочих примерах.
Настроим 2 цели для отслеживания. Настройка каждой состоит из нескольких действий, мы разберем каждое. И сначала проведем подготовительные работы.
Проверим, подключена ли у нас Shopify к Google Analytics. Для этого в Настройках заходим в Online Store — Preferences — Google Analytics и проверяем, стоит ли там id Аналитики. Если нет, то подключаем Аналитику.
Теперь можно начинать настройку целей.
Разберем шаг за шагом, как настроить цель для отслеживания отправки формы на странице Контакты.
Рис. 1 — Создание нового триггера
Чтобы посмотреть id, нужно открыть Инспектор кода (Ctrl+Shift+C) и найти тег <form>. Ниже на скриншоте смотрим, где должно быть id:
Рис. 2 — Тег form в Инспекторе кода
Рис. 3 — Прописывание условия активации триггера
Рис. 4 — Настройка тега отслеживания GTM
Также необходимо выбрать в настройках Google Analytics переменную с идентификатором отслеживания Аналитики. Смотрим на скриншот:
Рис. 5 — Выбор переменной настроек
Для создания переменной необходимо выбрать Переменные и создать новую. Выбрать тип переменной — Настройка Google Аналитики. И добавить id отслеживание с Google Аналитики.
Рис. 6 — Конфигурация переменной
Можно протестировать цель, отправив форму и посмотреть Отчет в реальном времени – Конверсии.
Рис. 7 — Подробные данные о цели
Рассмотрим настройку еще одной цели.
Алгоритм действий такой же, как прежде.
Рис. 8 — Активация триггера при условии
Рис. 9 — Настройка нового тега
Как видно из двух примеров, цели для сайта на Shopify можно настраивать, как и для многих других сайтов, используя код и Google Tag Manager. Таким образом можно отслеживать отправку любых форм, кликов по любым кнопкам, телефонам и т. п..
Все мы привыкли к UA, но Google официально назвал дату, когда UA перестанет быть доступна: Universal Analytics прекратит обрабатывать новые данные в стандартных ресурсах с 1 июля 2023 года. Поэтому лучше подготовиться и создать ресурсы GA-4 и настроить цели. Или начинать учиться их настраивать.
У GA-4 изменилась не только структура и принцип работы. Теперь цели не нужно настраивать в настройках представлений, как это было раньше. Поэтому я покажу на примерах, как правильно настроить события, чтобы они отображались в отчете Конверсии. Электронная коммерция будет доступна в GA-4 без дополнительных настроек для Shopify.
*Вероятно, вам пригодится статья, Как установить GA4 через GTM.
Как и ранее, создаем новый триггер. В этом случае чтобы пользователь положил товар в избранное, он нажимает кнопку. Таким образом, в типе триггера выбираем Клик — Все элементы. Выбираем условие активации триггера Некоторые клики.
Также условие можно настроить по классу, id или элементу. Вариантов может быть много, все зависит от кода. В моем случае было удобнее выбрать настройку по классу. В Условии выбираем Click Classes равно значению, которое было скопировано в коде сайта. Создаем понятное название и сохраняем.
Рис. 10 — Активация триггера по условию наступления
Выше я описывала, как можно добавить id в переменную, чтобы потом не вводить id каждый раз заново. Создаем название события, которое будет передаваться в Google Аналитику. Я прописываю названия событий максимально приближенным к действиям пользователя, чтобы сразу понять, о чем идет речь. Выбираем наш созданный триггер и сохраняем его.
Рис. 11 — Создание нового тега конфигурации
Многие события уже настроены по умолчанию в Аналитике, так что их можно использовать как готовые решения, а также добавлять свои уникальные события. Нам нужно добавить уникальное событие, созданное в GTM. Для этого кликаем Создать событие.
Рис. 12 — Создание нового события
Если вы все правильно сделали, вы можете увидеть новое событие в списке.
Рис. 13 — Создание события
Рис. 14 — Активация события для отображения в отчете
Для того чтобы в этом отчете начали отображаться события, нужно его активировать, включив режим Предварительный просмотр Google Tag Manager или с помощью параметра debug_mode. Ну или как вариант, включив расширение Google Analytics Debugger. После этого вы сможете приступить к тестированию и отладке событий. Это удобно, потому что можно видеть посекундно, как срабатывают события и сработает ли ваше событие.
Рис. 15 — Как срабатывают события в DebugView
Если же вы хотите просто перейти в режим реального времени и посмотреть, показывается ли событие или конверсия в нем, то теперь вы можете сразу не увидеть его в этом отчете, но это не означает, что событие не сработало. Поэтому, чтобы без задержки времени быстро и точно настроить настройки событий и конверсий, лучше использовать специальный инструмент DebugView.
Когда все настроено правильно, через 24 часа можно зайти в отчет Взаимодействия, выбрать отчет Конверсии и посмотреть, показывается ли ваше событие в отчете. Также там будет изображаться доход от событий.
Рис. 16 — Отчет Конверсии
Далее настроим еще одно событие.
Если вам нужно посмотреть, сколько пользователей кликает на номер телефона на сайте Shopify, то это тоже можно настроить с помощью GTM, как и многие другие события. Но мне кажется, что клик по номеру — одно из важных событий, которое можно настроить. Рассмотрим пример, как это сделать.
Рис. 17 — Наличие номера телефона в коде
Далее в Настройках выбираем тип триггера: Клик — Все элементы, выбираем некоторые клики и прописываем условие Click url начинается с tel:. Пишем название и сохраняем.
Рис. 18 — Выбор типа триггера
Рис. 19 — Выбор названия тега
Рис. 20 — Создание события
Готово. Вы все настроили.
Как видим, для сайтов на Shopify можно настроить дополнительные конверсии, цели, события, используя Google Tag Manager. И не ограничиваться только данными электронной коммерции.
В статье я привела примеры готовых рабочих решений. Поэтому можно производить свои дальнейшие настройки сразу по этим примерам.
И не бояться испытывать новые решения. Ведь дополнительные данные помогут понять, как часто пользователи хотят что-либо уточнить или заказать по телефону, проконсультироваться. Таким образом, даже можно определить, насколько удобно вашим посетителям пользоваться сайтом, найти недостатки и устранить их.
Вы уже подписаны на нашу рассылку!
Подтвердите свой Email для завершения подписки.
Спасибо! Скоро с Вами свяжется наш менеджер.