заказать звонок
+38 (044) 358-48-00
заказать звонок
Starting a new project?
получить консультацию
Читайте наш Telegram 👈
87
1

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

В стандартной документации Shopify указано, что электронная коммерция настроена по умолчанию. Для Universal Analytics ее нужно включить в представлении данных Аналитики. Дополнительно настраивать ее не нужно.

Но случается такое, что SEO-специалисту нужно собрать больше данных о действиях пользователей. Например, отслеживать клики по телефонам или добавление товаров в wishlist. И совсем недавно я столкнулась с такой задачей. Цели для сайтов на Shopify я настраивала с помощью Google Tag Manager.

В этой статье покажу, как настроить цели для Universal Analytics и Google Analytics 4 на нескольких рабочих примерах.


1. Как настроить цели для Shopify в Universal Analytics

Настроим 2 цели для отслеживания. Настройка каждой состоит из нескольких действий, мы разберем каждое. И сначала проведем подготовительные работы.

Активация Google Analytics

Проверим, подключена ли у нас Shopify к Google Analytics. Для этого в Настройках заходим в Online Store — Preferences — Google Analytics и проверяем, стоит ли там id Аналитики. Если нет, то подключаем Аналитику.

Теперь можно начинать настройку целей.


1.1 Настройка цели Отправка формы

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

  1. Начнём с настройки в GTM. В Google Tag Manager нужно создать новый триггер. Для этого переходим в раздел Триггеры и справа наверху нажимаем Создать.

Создание нового триггера GTM

Рис. 1 — Создание нового триггера

  1. Настраиваем триггер. Проверяем, есть ли в теге <form> id. Если есть, то это один из самых простых способов настроить отслеживание отправки формы, которая будет записываться в Аналитику, только если форма действительно отправилась.

Чтобы посмотреть id, нужно открыть Инспектор кода (Ctrl+Shift+C) и найти тег <form>. Ниже на скриншоте смотрим, где должно быть id:

Тег form в Инспекторе кода GTM

Рис. 2 — Тег form в Инспекторе кода

  1. Копируем значение id и прописываем условие в GTM: Form ID равно contact_form (в моем случае это сама contact_form, но у вас может быть ваше значение). Далее пишем название триггера и сохраняем его.

Прописывание условия активации триггера GTM

Рис. 3 — Прописывание условия активации триггера

  1. Настраиваем тег. Выбираем тип тега Google: Universal Analytics. Тип отслеживания: Событие. В параметрах отслеживания событий можно прописать только Категории и Действия, другие поля не обязательно заполнять. Можно взять как пример значение, которое есть на скриншоте.

Настройка тега отслеживания GTM

Рис. 4 — Настройка тега отслеживания GTM

Также необходимо выбрать в настройках Google Analytics переменную с идентификатором отслеживания Аналитики. Смотрим на скриншот:

Выбор переменной настроек GTM

Рис. 5 — Выбор переменной настроек

Для создания переменной необходимо выбрать Переменные и создать новую. Выбрать тип переменной — Настройка Google Аналитики. И добавить id отслеживание с Google Аналитики.

Конфигурация переменной GTM

Рис. 6 — Конфигурация переменной

  1. Далее выбираем созданный триггер и сохраняем тег. Чтобы проверить, работает ли цель, нужно открыть Предварительный просмотр и попытаться отправить форму. Если цель работает корректно, то можно создавать цель в Google Analytics.
  2. Создание цели в Google Analytics. На первом этапе выбираем свою цель. Далее выбираем тип — Событие и пишем название. В деталях цели переносим данные из тега GTM. Итак, первая цель готова, сохраняем ее.

Можно протестировать цель, отправив форму и посмотреть Отчет в реальном времени – Конверсии.

Подробные данные о цели GTM

Рис. 7 — Подробные данные о цели

Рассмотрим настройку еще одной цели.


1.2 Переход в социальную сеть (клик по иконке)

Алгоритм действий такой же, как прежде.

  1. Нам нужно создать новый триггер. Создаем и настраиваем новый триггер по инструкции выше. Только сейчас настроим переход к Instagram. Для этого выберем тип триггера: Клик — Только ссылка, где пропишем условие Click URL начинается с https://www.instagram.com/.

Активация триггера при условии GTM

Рис. 8 — Активация триггера при условии

  1. Сохраняем новый триггер и настраиваем тег по примеру, приведенному на этапе выше. Нужно только заменить значение в Категории и Действии. На примере на скриншоте указаны категории — Instagram, действие — Click. Их можно указывать как на примере, или подобрать свои значения. В настройках Google Аналитики нужно не забыть указать id Аналитики.

Настройка нового тега GTM

Рис. 9 — Настройка нового тега

  1. Сохраняем тег, тестируем, и если все работает корректно, переносим настройки в Google Analytics по примеру выше.

Как видно из двух примеров, цели для сайта на Shopify можно настраивать, как и для многих других сайтов, используя код и Google Tag Manager. Таким образом можно отслеживать отправку любых форм, кликов по любым кнопкам, телефонам и т. п..


2. Как настроить цели в Google Analytics 4 для сайта на Shopify

Все мы привыкли к UA, но Google официально назвал дату, когда UA перестанет быть доступна: Universal Analytics прекратит обрабатывать новые данные в стандартных ресурсах с 1 июля 2023 года. Поэтому лучше подготовиться и создать ресурсы GA-4 и настроить цели. Или начинать учиться их настраивать.

У GA-4 изменилась не только структура и принцип работы. Теперь цели не нужно настраивать в настройках представлений, как это было раньше. Поэтому я покажу на примерах, как правильно настроить события, чтобы они отображались в отчете Конверсии. Электронная коммерция будет доступна в GA-4 без дополнительных настроек для Shopify.

*Вероятно, вам пригодится статья, Как установить GA4 через GTM.


2.1 Настройка цели Добавление товара в wishlist

  1. Начнём с настройки триггера в GTM.

Как и ранее, создаем новый триггер. В этом случае чтобы пользователь положил товар в избранное, он нажимает кнопку. Таким образом, в типе триггера выбираем Клик — Все элементы. Выбираем условие активации триггера Некоторые клики.

Также условие можно настроить по классу, id или элементу. Вариантов может быть много, все зависит от кода. В моем случае было удобнее выбрать настройку по классу. В Условии выбираем Click Classes равно значению, которое было скопировано в коде сайта. Создаем понятное название и сохраняем.

Активация триггера по условию наступления GTM

Рис. 10 — Активация триггера по условию наступления

  1. Создаем новый тег. Выбираем тип тега Google Аналитика — СобытиеGA4. Выбираем тег конфигурации.

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

Создание нового тега конфигурации GTM

Рис. 11 — Создание нового тега конфигурации

  1. Переходим к Google Analytics. Нужно перейти к Конфигурации и выбрать События.

Многие события уже настроены по умолчанию в Аналитике, так что их можно использовать как готовые решения, а также добавлять свои уникальные события. Нам нужно добавить уникальное событие, созданное в GTM. Для этого кликаем Создать событие.

Создание нового события GTM

Рис. 12 — Создание нового события

  1. Пишем название в конфигурации. Я пишу название тега в GTM. Далее выбираем параметр event_name, оператор равно и переносим значения из тега в GTM. И сохраняем его.

Если вы все правильно сделали, вы можете увидеть новое событие в списке.

Создание специального события GTM

Рис. 13 — Создание события

  1. В списке событий находим наше созданное событие и нажимаем переключатель, чтобы событие появилось в отчете Конверсии. Сразу в конверсиях это событие не покажется, поскольку в конверсиях отображаются события, сделанные пользователем за выбранный период времени. Можно также создать тестовые события и через 24 часа посмотреть, отобразятся ли они в конверсиях.

Активация события для отображения в отчете GTM

Рис. 14 — Активация события для отображения в отчете

  1. Одним из новых классных возможностей у GA-4 является появление DebugView — с помощью которого можно посмотреть, сработает ли событие в режиме реального времени.

Для того чтобы в этом отчете начали отображаться события, нужно его активировать, включив режим Предварительный просмотр Google Tag Manager или с помощью параметра debug_mode. Ну или как вариант, включив расширение Google Analytics Debugger. После этого вы сможете приступить к тестированию и отладке событий. Это удобно, потому что можно видеть посекундно, как срабатывают события и сработает ли ваше событие.

Как срабатывают события в GTM

Рис. 15 — Как срабатывают события в DebugView

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

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

Отчет Конверсии

Рис. 16 — Отчет Конверсии

Далее настроим еще одно событие.


2.2 Клик по номеру телефона

Если вам нужно посмотреть, сколько пользователей кликает на номер телефона на сайте Shopify, то это тоже можно настроить с помощью GTM, как и многие другие события. Но мне кажется, что клик по номеру — одно из важных событий, которое можно настроить. Рассмотрим пример, как это сделать.

  1. Начнём с настройки триггера в GTM. Создаем новый триггер, находим номер телефона на сайте и проверяем, кликабельный ли он, и есть ли у него ссылка, которая начинается с tel:. Пример того, как это выглядит в коде, на скриншоте:

Наличие номера телефона в коде

Рис. 17 — Наличие номера телефона в коде

Далее в Настройках выбираем тип триггера: Клик — Все элементы, выбираем некоторые клики и прописываем условие Click url начинается с tel:. Пишем название и сохраняем.

Выбор типа триггера GTM

Рис. 18 — Выбор типа триггера

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

Выбор названия тега конфигурации

Рис. 19 — Выбор названия тега

  1. Далее или тестируем и налаживаем срабатывание событий в Предварительном просмотре, или сразу переносим в GA-4. Создаем новое событие и затем добавляем его в конверсии. Алгоритм действий будет таким, как и раньше.

Создание события и условия соответствия

Рис. 20 — Создание события

Готово. Вы все настроили.

Как видим, для сайтов на Shopify можно настроить дополнительные конверсии, цели, события, используя Google Tag Manager. И не ограничиваться только данными электронной коммерции.

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


Канонический тег баннер

Что такое тег canonical?

Google Search Console 2022

Подпишитесь на наши обновления
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Вы уже подписаны на нашу рассылку!

Подтвердите свой Email для завершения подписки.

Заказать
продвижение
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Спасибо! Скоро с Вами свяжется наш менеджер.