Битрикс24. Руководство по созданию сайтов и интернет-магазинов

Битрикс24. Руководство по созданию сайтов и интернет-магазинов

Решил продолжить тему создания сайтов, сделав обзор двух инструментов Битрикс24 – «Сайты» и «Магазины». Для их создания используется конструктор. Во многом он напоминает большинство аналогичных сервисов. Однозначно, в сравнении с Wix и Tilda он во многом уступает по набору функционала. Здесь нет инструментов для дизайнеров, довольно небольшой набор шаблонов. Но есть весомое преимущество – сайт или магазин сразу же создаётся в CRM, то есть не нужно осуществлять никаких интеграций.

На нашем сайте есть инструкция Битрикс24 для начинающих, настройка и обзор функционала CRM Битрикс24. В этой статье речь пойдёт исключительно о работе над сайтами и онлайн-магазинами.

Плюсы создания сайтов и онлайн-магазинов на Битрикс24:

• простой и удобный конструктор;
• подключение онлайн-чата, обратного звонка, формы заявки;
• автоматическое занесение контактов и заказов из онлайн магазина в CRM;
• SEO-продвижение (мета-теги и индексация задаются в настройках сайта);
• подключение систем аналитики – Google Analitycs и Яндекс.Метрики;
• бесплатный хостинг на bitrix24.shop (магазины) и bitrix24.site (сайты) или подключение собственного домена;
• автоматическая адаптация сайтов под экраны мобильных устройств на базе iOS и Android;
• командная работа над сайтами – создание, внесение изменений и удаление страниц (полными правами обладают только администраторы аккаунта).

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

Создание сайтов: начало работы

Нажимаете на вкладку «Сайты» в левом меню.

На странице отображается 2 основных раздела: «Список сайтов» и «Права доступа». С первым пунктом всё понятно, в нём содержится перечень уже созданных сайтов. Разберёмся с правами доступа.

Вы создаёте роль и присваиваете ей определённые права – просмотр, создание, редактирование, изменение настроек, публикация, удаление. Дальше эта роль закрепляется за конкретными сотрудникам или целыми отделами. Функция создания сайтов доступна любому сотруднику Битрикс24.

Нажимайте «Создать сайт» или «Новый сайт». Перед вами откроется список шаблонов. Как видите, есть возможность создавать сайт с нуля. Так как я не владею навыками дизайнера, то воспользуюсь одним из шаблонов.

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

Выбор специализации сайта и цветовой палитры.

Теперь вы попали непосредственно в редактор. Кнопка «Добавить блок» открывает список блоков от разработчика.

Данного списка вполне достаточно для создания сайта различной направленности.

Как редактировать блоки?

Справа и слева расположены 2 панели инструментов.

«Редактировать» – настройка содержимого блока (контент, изображения). Здесь же задаётся якорь блока.

«Дизайн» – настройка цвета фона, внешнего вида блоков, опции включения/отключения их показа на различных устройствах.

Стрелки вверх/вниз предназначены для изменения порядка блоков.

«Действия» – включает список опций «Скрыть блок», «Вырезать», «Скопировать», «Вставить», «Оставить замечание» (обратная связь с разработчиком).

Значок «Корзина» – удаление блока.

Когда сайт будет готов, нажимаете «Опубликовать».

Настройки сайтов и страниц

Возвращаетесь в главное меню Битрикс24 и нажимаете «Сайты»-«Действия»-«Настроить сайт». Редактируя страницу, кликаете «Настроить страницу».

Открываются основные и дополнительные настройки.

Основные настройки сайта

«Адрес сайта» – может использоваться поддомен Битрикса или ваш собственный домен, причём в обоих случаях бесплатно на любом тарифе.

«Виджет на сайт» – для связи клиентов с вашей компанией. Виджет редактируется с помощью кнопки «Настроить», которая автоматически переводит вас на страницу со списком виджетов в разделе CRM: онлайн-чат, обратный звонок, CRM-форма.

Кнопка «Вверх» помогает удобно работать с длинными страницами сайта.

«Главная страница» – её нужно указать в том случае, если вы создаёте многостраничный сайт.

Дополнительные настройки сайта

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

«Favicon» – изображение (иконка), которое будет показываться на вкладке браузера, используется формат png.

«Подтверждение прав» – подключение сервисов Google Search Console и Яндекс.Вебмастер. Вам нужно скопировать мета-теги из данных систем, вставить их в соответствующие строки.

«Аналитика» – опция доступна только на платных тарифах. Принцип подключения Google Analytics и Яндекс.Метрики такой же, как и у многих конструкторов: копируете номер счётчика и вставляете в Битрикс24. Для подключения Google Tag Manager копируется идентификатор контейнера.

«Размещение пикселя» – копируете коды пикселей из рекламных кабинетов Facebook и ВКонтакте.

Как создать многостраничный сайт?

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

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

По такому принципу создаются и связываются все страницы сайта.

Как создать мультиязычный сайт?

Вам придётся создать страницы сайта отдельно на каждом языке – доступен русский, английский, немецкий. Добавляете блок «Меню» в выбранное место на сайте, и заводите пункты для каждого языка. Дальше воспользуйтесь кнопкой «Редактировать», задав для пункта ссылку на другую страницу ресурса. Соответственно, необходимо добавить аналогичное «Меню» на каждую из страниц, чтобы между ними совершался переход.

Как настроить анимацию на сайте?

Работа ведётся во вкладке «Дизайн»-«Анимация появления». Выбираете нужный эффект и сохраняете настройки. Опция доступна для всех блоков.

Как работать с Google-картами на сайте?

Чтобы добавить местоположение вашей организации нужно выбрать соответствующий блок – «Контакты».

Заполните необходимые поля – заголовок и описание.

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

Как создать ленту новостей на сайте?

Добавьте блок «Новостная лента», чтобы записи из подключенной группы/живой ленты выводились на сайт.

После добавления блока нажимайте «Редактировать», ставьте галочку возле «Динамические». Дальше выберите источник и группу.

В подразделе «Детальная страница» кликните на нужный вам шаблон для страниц с новостями, и задайте настройки: будет ли в данном блоке показываться изображение, какой именно текст будет отображаться в заголовке и описании новости.

При выборе «Полное описание» показывается всё сообщение из ленты. При публикации объёмных сообщений рекомендуется использовать версию «Краткое описание». На финише укажите текст и действие для ссылки на страницу новости – «Сделать ссылкой на детальную страницу».

Как удалить сайт или снять с публикации?

Для удаления сайта зайдите в его настройки, выберите действие «Удалить сайт». Он будет перемещён в Корзину. Все данные хранятся 30 дней. По истечению срока проект окончательно удаляется без возможности восстановления.

Снимать с публикации можно весь сайт или его отдельные страницы. Повторная публикация произойдёт по той же ссылке.

Интернет-магазин в Битрикс24

Основное преимущество при создании онлайн магазинов в системе – автоматическая связь с CRM. Общий принцип создания интернет-магазина аналогичный обычным сайтам: открываете раздел «Магазин»-«Новый магазин» и выбираете наиболее подходящий шаблон.

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

Основные инструменты для онлайн-магазина:

• размещение каталога товаров;
• настройка способов оплаты;
• выбор службы доставки.

Как создать и настроить список товаров?

1 шаг – добавляем разделы.

Открываете вкладку «Товарный каталог»-«Добавить раздел». При наличии большого количества товаров вносятся подразделы.

2 шаг – добавляем товары.

Опять же «Товарный каталог», дальше «Список товаров»-«Создать товар».

И заполняете данные о товаре в его карточке. Сохраняете.

Как разместить каталог товаров в магазине?

Открываете магазин в редакторе, добавляете блок «Список товаров». С помощью кнопки «Редактировать» вносятся необходимые настройки.

Подключение платёжных систем

Настройка способов оплаты происходит в разделе «Настройки»-«Платежные системы».

По умолчанию подключены 3 способа оплаты – наличными курьеру, счёт и внутренний счёт. Для подключения нового способа используется кнопка «Добавить платежную систему». На скриншоте показана страница с подключением оплаты через систему Webmoney.

Подключение способов доставки

Нажимаете раздел «Настройки»-«Способы доставки». По умолчанию подключены самовывоз и курьерская доставка. С помощью кнопки «Добавить» подключается:

• автоматизированная служба доставки – внешнего сервиса, при котором расчёт стоимости и времени происходит на его стороне (почта России, СДЭК, СПСР-ЭКСПРЕСС, DPD).
• настраиваемая служба доставки – когда стоимость и длительность определяются вами в настройках.

Вопрос-ответ

Сколько сайтов и магазинов можно создавать в Битрикс24?

Зависит от тарифа:

• в бесплатной версии и тарифе «Задачи» – 1 сайт и 1 магазин;
• в тарифах «Старт+», «CRM+» и «Команда» – до 10 сайтов и 1 магазин, за исключение пакета «Команда» (10 магазинов);
• в тарифе «Компания» – неограниченное число сайтов и магазинов.

Берёт ли Битрикс24 комиссию с заказов?

Нет, в любом тарифе комиссия составляет 0%.

Как убрать подпись «Заряжено Битрикс24»?

Откройте «Настройки сайта»-«Дополнительно» и уберите галочку в соответствующем поле. Данная опция недоступна только в бесплатной версии.

Вывод

Конструктор для создания сайтов и магазинов Битрикс24 уступает аналогичным популярным инструментам. Но стоит понимать, что сам сервис создан в качестве комплексной платформы для ведения бизнеса, то есть привязан к CRM.

Если вы используете или планируете подключать весь функционал Битрикса и вам не нужен уникальный по дизайну сайт, то данный конструктор станет отличным решением. Он подходит для создания интернет-магазинов, корпоративных сайтов компаний, визиток, лендингов и сайтов услуг. Мой итог – с конструктором сможет работать не просто новичок, но и любой пользователь сети интернет. Всё максимально просто.

Как сделать импорт конверсий из Битрикс24 в Яндекс.Метрику?

Как импортировать конверсии из Битрикс24 в Яндекс.Метрику – в данном материале мы расскажем вам про наиболее простой, быстрый и удобный способ сделать это.

Давайте пройдем весь этап настройки связи Битрикс24 c Яндекс Метрика вместе!

Для того, чтобы начать настройку новой связи кликните «Создать связь»

Настройка ИСТОЧНИКА Данных: Битрикс24

Выберите систему в качестве Источника данных. В данном случае, необходимо указать Битрикс24.

Далее, необходимо указать действие, например, «Загрузить ЛИДЫ по статусу (новые)».

— Загрузить ЛИДЫ (новые) — из Битрикс24 будут выгружаться все новые ЛИДЫ, которые появятся после настройки связи и запуска автообновления.

— Загрузить ЛИДЫ (измененные) — из Битрикс24 будут выгружаться все ЛИДЫ, в которых будут какие-то изменения после настройки связи и запуска автообновления.

— Загрузить ЛИДЫ по статусу (все) — из Битрикс24 будут выгружаться все ЛИДЫ, которые находятся в выбранном статусе при каждом обновлении связи.

— Загрузить ЛИДЫ по статусу (измененные) — из Битрикс24 будут выгружаться ЛИДЫ из выбранного статуса, в которых будут какие-то изменения после настройки связи и запуска автообновления.

— Загрузить ЛИДЫ по статусу (новые) — из Битрикс24 будут выгружаться все новые ЛИДЫ в выбранном статусе, которые появятся в нем после настройки связи и запуска автообновления.

— Загрузить СДЕЛКИ (новые) — из Битрикс24 будут выгружаться все новые СДЕЛКИ, которые появятся после настройки связи и запуска автообновления.

— Загрузить СДЕЛКИ (измененные) — из Битрикс24 будут выгружаться все СДЕЛКИ, в которых будут какие-то изменения после настройки связи и запуска автообновления.

— Загрузить СДЕЛКИ по статусу (все) — из Битрикс24 будут выгружаться все СДЕЛКИ, которые находятся в выбранном статусе при каждом обновлении связи.

— Загрузить СДЕЛКИ по статусу (измененные) — из Битрикс24 будут выгружаться СДЕЛКИ из выбранного статуса, в которых будут какие-то изменения после настройки связи и запуска автообновления.

— Загрузить СДЕЛКИ по статусу (новые) — из Битрикс24 будут выгружаться все новые СДЕЛКИ в выбранном статусе, которые появятся в нем после настройки связи и запуска автообновления.

— Загрузить КОНТАКТЫ (новые) — из Битрикс24 будут выгружаться все новые КОНТАКТЫ, которые появятся после настройки связи и запуска автообновления.

— Загрузить КОНТАКТЫ (измененные) — из Битрикс24 будут выгружаться все КОНТАКТЫ, в которых будут какие-то изменения после настройки связи и запуска автообновления.

— Загрузить КОМПАНИИ (новые) — из Битрикс24 будут выгружаться все новые КОМПАНИИ, которые появятся после настройки связи и запуска автообновления.

— Загрузить КОМПАНИИ (измененные) — из Битрикс24 будут выгружаться все КОМПАНИИ, в которых будут какие-то изменения после настройки связи и запуска автообновления.

— Загрузить СЧЕТА (новые) — из Битрикс24 будут выгружаться все новые СЧЕТА, которые появятся после настройки связи и запуска автообновления.

— Загрузить СЧЕТА по статусу (новые) — из Битрикс24 будут выгружаться все новые СЧЕТА в выбранном статусе, которые появятся в нем после настройки связи и запуска автообновления.

— Загрузить ДЕЛА (новые) — из Битрикс24 будут выгружаться все новые ДЕЛА, которые появятся после настройки связи и запуска автообновления.

— Загрузить ПРЕДЛОЖЕНИЯ (новые) — из Битрикс24 будут выгружаться все новые ПРЕДЛОЖЕНИЯ, которые появятся после настройки связи и запуска автообновления.

— Загрузить ПРЕДЛОЖЕНИЯ по статусу (новые) — из Битрикс24 будут выгружаться все новые ПРЕДЛОЖЕНИЯ в выбранном статусе, которые появятся в нем после настройки связи и запуска автообновления.

Следующий шаг — выбор аккаунта Битрикс 24, из которого будет происходить выгрузка лидов.

Если нет подключенных логинов к системе ApiX-Drive, Вам необходимо перейти в Ваш Битрикс 24 и установить бесплатное приложение ApiX-Drive.

В появившемся окне укажите какую версию Битрикс24 Вы используете — облачную или коробочную и также выберите страну регистрации Вашего аккаунта Битрикс24.

В поле «Доменное имя» необходимо указать ссылку на Ваш Битрикс24 и кликнуть «Сохранить».

На данный момент интеграция работает с такими доменными зонами как UA,RU,KZ,BY.

Затем закройте это окно и перезагрузите страницу.

Внимание! В адресе ссылки не должен присутствовать https://, / или другие символы.

Введите данные для авторизации в Ваш Битрикс24.

Когда подключенный аккаунт отобразился в списке «активные аккаунты» выберете его для дальнейшей работы.

Внимание! Если Ваш аккаунт находится в списке «неактивные аккаунты» проверьте свой доступ к этому логину!

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

Если необходимо, Вы можете настроить Фильтр данных, либо кликнуть «Продолжить», чтобы пропустить этот шаг.

Для того, чтобы узнать как настраивается Фильтр данных перейдите по ссылке: https://apix-drive.com/ru/blog/filtr-dannyh

Теперь Вы можете увидеть тестовые данные.

Если Вы хотите обновить тестовые данные кликните «Загрузить тестовые данные из Битрикс24».

Если Вы хотите изменить настройки кликните «Редактировать» и Вы вернетесь на шаг назад.

Если Вас все устраивает кликните «Далее».

На этом настройка Источника данных завершена!

Теперь можем приступить к настройке Яндекс Метрика в качестве системы Приема данных.

Для этого кликните «Начать настройку Приема Данных».

Настройка ПРИЕМА Данных: Яндекс Метрика

Выберите систему в качестве Приема данных. В данном случае, необходимо указать Яндекс Метрика.

Далее, необходимо указать действие, например, «Отправка оффлайн-конверсий».

Отправка расходов — в Вашем аккаунте Яндекс Метрика будут созданы новые расходы.

Отправка звонков — в Вашем аккаунте Яндекс Метрика будут добавлены данные о совершении звонка.

Отправка оффлайн-конверсий — в Вашем аккаунте Яндекс Метрика будут добавлены данные о совершении оффлайн-конверсии.

Обратите внимание! Для корректной отправки оффлайн-конверсий цель должна быть в виде JavaScript-события и в поле Цель нужно указывать идентификатора цели (Настройка — Цели — Описание цели).

Следующий шаг — выбор аккаунта Яндекс Метрика, в который будет происходить отправка данных.

Если нет подключенных логинов к системе ApiX-Drive кликните «Подключить аккаунт».

Введите данные для авторизации в Ваш личный кабинет Яндекс Метрика.

Когда подключенный аккаунт отобразился в списке «активные аккаунты» выберете его для дальнейшей работы.

Внимание! Если Ваш аккаунт находится в списке «неактивные аккаунты» проверьте правильность указанных данных!

Слева поля Яндекс Метрика, в которые будут передаваться данные. Справа, в выпадающем списке, доступные данные из Битрикс24.

Обратите внимание, что Вы можете использовать не только переменные Битрикс24, но и прописанные вручную данные. Также, эти все данные можно комбинировать между собой. Просто допишите в нужное поле необходимый Вам текст или вставьте ещё один параметр.

Выберите необходимые поля Битрикс24, кликните по параметру и он будет назначен выбранному полю Яндекс Метрика.

Теперь Вы можете увидеть тестовые данные.

Если Вы хотите отправить тестовые данные в Яндекс Метрика для того, чтобы проверить корректность настройки, кликните «Отправить тестовые данные в Яндекс Метрика» и перейдите в Ваш Яндекс Метрика, чтобы проверить результат.

Если Вы хотите изменить настройки кликните «Редактировать» и Вы вернетесь на шаг назад.

Если Вас все устраивает кликните «Далее».

На этом настройка Приема данных завершена!

Теперь можете приступить к выбору интервала обновления и включению автообновления.

Для этого кликните «Включить автообновление».

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

Внимание! Чтобы Запуск по расписанию сработал в указанное время необходимо, чтобы интервал между текущим временем и указанным временем был более 5 минут. Например, Вы выбираете время 12:10 и текущее время 12:08 — в этом случае автообновление связи произойдет в 12:10 на следующий день. Если Вы выбираете время 12:20 и текущее время 12:13 — автообновление связи сработает сегодня и далее каждый день в 12:20.

Для того, чтобы текущая связь срабатывала после другой связи, поставьте галочку «Обновлять только после связи» и укажите связь, после которой будет срабатывать текущая.

Для включения автообновления переключите ползунок в положение как показано на картинке.

Для того, чтобы выполнить разовое срабатывание связи, кликните по иконке в виде стрелки.

На этом настройка Яндекс Метрика в качестве Приема данных завершена! Видите как все просто!?

Теперь можете не беспокоиться, дальше ApiX-Drive сделает всё самостоятельно!

Как настроить основное меню на готовом сайте 1с-Битрикс

В данном уроке мы с вами рассмотрим как настроить главное/основное меню на сайте 1с-Битрикс, на примере готового интернет-магазина.

Сегодня мы поговорим с вами о том как редактировать пункты основного меню на готовом сайте 1с-Битрикс.

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

Первое что нам нужно сделать это зайти в административную панель сайта и включить режим правки. Как это все делается есть в других уроках.

Режим правки мы включили теперь курсором мышки мы с вами наводим на меню (хочу напомнить что все вот эти манипуляции сайтом мы проводим на готовом решении Аспро: Максимум).

И так навели курсор и у нас здесь всплывает такая вот меню:

Здесь у нас есть выбор это «редактировать пункты меню» и «настройка компонента». Настройка компонента нам с вами не нужна, а нам как раз нужно редактировать пункты меню.

Нажимаем у нас открывается диалоговое окно здесь указаны имена наших страниц а также их символьный код.

В нашем текущей ситуации нам не нужен пункт услуги мы его находим здесь мышкой нажимаем крестик. Ненужный нам пункт меню «услуги» у нас пропал.

Дальше, мы хотим выставить пункты в каком-то другом порядке. Например пусть будет первый «каталог» второй «акции» потом «бренды» а потом будет «как купить», «компания» и «контакты». То есть мы, простым перетаскиванием меняем порядок сортировки этих пунктов. Нажимаем «сохранить».

Как видим у нас раздел который мы отключили «услуги» пропал, а другие пункты меню встали в нужном нам порядке.

Несмотря на то, что пункт «услуги» из меню мы выключили, тем не менее сами страницы физически, они на сайте еще присутствуют, просто пропал пункт.

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

И здесь мы выбираем галочками элементы, отмечаем checkbox, нажимаем кнопочку «деактивировать». Как включить/отключить страницы на сайте 1с-Битрикс мы с вами говорили в других уроках.

Теперь переходим внутрь страницы каталога с услугами и проделаем ту же самую операцию.

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

Как отредактировать внутреннее меню (меню второго уровня)

И так мы с вами отредактировали вот это основное меню, но что делать с внутренними разделами, где есть еще «под меню» то есть страницы внутри одного раздела?

В принципе все то же самое. Мы переходим в нашем случае на внутреннюю страницу «компания» и видим у нас здесь левой части экрана расположена также меню навигации по другим страницам сайта.

Находясь на внутренней странице, мы опять же наводим на меню, только уже на то меню что слева т.е внутреннее и нажимаем «редактировать пункты меню» у нас также открывается окно но уже с внутренним меню. В нашем случае нам не нужны пункты: «карьера» «партнеры» «лицензии» убираем их. Нажимаем «сохранить» все! У нас все не нужные пункты меню пропали.

Далее, точно так же как в приведенных выше примерах, идем в админку, находим здесь раздел «партнеры» и отключаем ненужные нам каталоги и страницы с партнерами, и так далее.

Теперь может возникнуть вопрос: как вставить новый пункт меню?

То есть только что мы убирали не нужные пункты, а как вставить какой-нибудь новый? Точно так же. Наводим мышку, жмем «редактировать меню» Здесь есть кнопочка «вставить пункт» мы ее нажимаем и пишем как будет пункт меню называться и вставляем адрес (URL) страницы по которой эта страница будет доступна.

Важно что бы у нас эта страница создана заранее, то есть присутствовала на сайте. К примеру у нас были «услуги» мы опять напишем здесь «услуги» и в соседнем поле укажем путь /services/

Теперь у нас эта страница снова доступна, так как основной раздел «Услуг» у нас присутствует физически на сайте, просто у нас отключены здесь внутренние элементы/страницы.

Отслеживание данных из CRM-форм Bitrix24 в Google Analytics и Яндекс.Метрика

Веб-аналитика

В очередной раз мы столкнулись с настройкой аналитики на сайте, разработанном на платформе Bitrix24. До этого мы могли настроить передачу данных с помощью стандартных инструментов внутри CRM (Сайты → Настройка сайта → Дополнительно), включая необходимые сервисы:

и подключая идентификаторы Google Analytics и Яндекс.Метрики на самих формах (CRM → Еще → CRM-формы → Редактировать форму → Дополнительно).

В этот раз в Яндекс.Метрике все отработало корректно, но в Google Analytics данные почему-то не передавались. Мы начали искать ответы на просторах Google, в итоге так и не нашли и решили самостоятельно копать в этом направлении. У нас получилось!

Что мы сделали?

С нуля установили счетчик Google Tag Manager и привязали с помощью GTM → Google Analytics и Яндекс.Метрику. В этом нет ничего сложного:

• Создать аккаунт и контейнер в Google Tag Manager.
• Установить код Google Tag Manager на сайт.
• Проверить работу кода.
• Установить Google Analytics с помощью раздела “Теги”:

• Установить Яндекс.Метрику через пользовательский HTML.

Настройка целей в Google Tag Manager

1. Создаем тег с названием нашей первой формы, например, “1-й экран Заявка отправлена Главная”:

• Тип тега: Google Аналитика – Universal Analytics.
• Тип отслеживания: Событие.
• Категория: название нашей будущей переменной, например, “Заявка отправлена проектирование eventCategory”.
• Действие: название нашей будущей переменной, например, “Заявка на проектирование Главная eventAction”.

2. Создаем триггер активации, назовем его VirtualPageview. Прежде чем переходить, мы посмотрели, как отрабатывает цель в DataLayer в режиме предварительного просмотра, какие данные мы получаем:

• Имя события VirtualPageview. Название вашего события вы можете посмотреть в Data Layer в режиме предварительного просмотра после успешной отправки формы. В нашем случае на скриншоте выше event: VirtualPageView.
• Условия активизации триггера: создаем две переменные, которые мы указали выше (Категория и Действие) в теге “1-й экран Заявка Отправлена Главная”.

Для действия прописываем имя переменной eventAction.

Для категории указываем имя переменной eventCategory.

• Прописываем условия активации триггера:

— Переменная действия (в нашем случае – “Заявка на проектирование Главная eventAction”) равно Успешно заполнена форма. Это вы можете увидеть выше на скриншоте Data Layer (eventAction: Успешно заполнена форма).

— Переменная категории (в нашем случае – “Заявка отправлена проектирование eventCategory”) равно Заполнение формы “Оставьте заявку на проектирование”. Это вы можете увидеть выше на скриншоте Data Layer (eventCategory): Успешно заполнена форма.

— Выбираем встроенную переменную Page Path равно / для отслеживания отработки цели только на главной странице сайта.

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

Передача данных в Google Analytics

• Стандартно: Администратор → Цели → Новая цель.
• Цель – событие. В категории указываем: Заполнение формы “Оставьте заявку на проектирование” (иначе – что у вас отработало в Data Layer в eventCategory).
• Аналогично и в поле “Действие” вставляем “Успешно заполнена форма” eventAction, который отработал у нас в Data Layer.

• Проверка целей.

Какие вопросы остались открытыми?

1. Почему через стандартные решения Google Analytics не отработал? Техподдержка Битрикс24 молчит, времени у нас нет, нужно запускать рекламные кампании.
2. Почему не сработала активация триггера через доступность элемента? Этот вариант мы пробовали самым первым. Form text мы отбросили сразу же, потому что в Битрикс24 формы реализованы не через form.
3. Как быть с другими страницами? Ведь у нас на другой странице такие же формы, но для их корректной отработки мы будем менять названия. Для главной у нас останется “Оставить заявку на проектирование”, для другой страницы мы будем использовать название формы “Оставить заявку на проект котельной”. Таким образом мы сможем уникализировать формы и передавать уникальные eventCategory для каждой из форм и, соответственно, посадочных страниц сайта.

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