Битрикс24. Руководство по созданию сайтов и интернет-магазинов
Битрикс24. Руководство по созданию сайтов и интернет-магазинов
Решил продолжить тему создания сайтов, сделав обзор двух инструментов Битрикс24 – «Сайты» и «Магазины». Для их создания используется конструктор. Во многом он напоминает большинство аналогичных сервисов. Однозначно, в сравнении с Wix и Tilda он во многом уступает по набору функционала. Здесь нет инструментов для дизайнеров, довольно небольшой набор шаблонов. Но есть весомое преимущество – сайт или магазин сразу же создаётся в CRM, то есть не нужно осуществлять никаких интеграций.
На нашем сайте есть инструкция Битрикс24 для начинающих, настройка и обзор функционала CRM Битрикс24. В этой статье речь пойдёт исключительно о работе над сайтами и онлайн-магазинами.
Плюсы создания сайтов и онлайн-магазинов на Битрикс24:
- простой и удобный конструктор;
- подключение онлайн-чата, обратного звонка, формы заявки;
- автоматическое занесение контактов и заказов из онлайн магазина в CRM;
- SEO-продвижение (мета-теги и индексация задаются в настройках сайта);
- подключение систем аналитики – Google Analitycs и Яндекс.Метрики;
- бесплатный хостинг на bitrix24.shop (магазины) и bitrix24.site (сайты) или подключение собственного домена;
- автоматическая адаптация сайтов под экраны мобильных устройств на базе iOS и Android;
- командная работа над сайтами – создание, внесение изменений и удаление страниц (полными правами обладают только администраторы аккаунта).
Из минусов: сайты разных сфер бизнеса очень похожи друг на друга из-за ограниченного числа шаблонов и отсутствия продвинутого функционала.
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. Не забудьте опубликовать внесенные изменения 🙂
Список параметров
«Битрикс 24» автоматически вставляет в шаблоны документов переменные данные. Полный перечень параметров можно увидеть в пункте «Список полей».
Этот пункт содержит таблицу с полным списком полей шаблонов и их описанием.
Параметров довольно много. Чтобы упростить работу с ними, нужно применить фильтр для поиска конкретных значений.
Встроенные инструменты
Встроенный модуль «Поисковая оптимизация» облегчает регулярную работу по продвижению: анализирует техническое состояние сайта, отображает параметры, которые влияют на оптимизацию и дает рекомендации. Объединяет в одном интерфейсе всю информацию, которая нужна для поисковой оптимизации контента.
Часть функционала модуля «Поисковая оптимизация» реализуется с помощью модуля «Аналитика» и доступна только в редакции «Бизнес».
Возможности ориентированы не только на SEO-специалистов, но и на рядовых пользователей. Доступные инструменты можно разделить на две группы:
- Инструменты для оптимизации всего сайта: общее количество ссылок, поисковые запросы, индексация поисковиками, оценка результативности работы сайта. Можно быстро вызвать диалоговые окна и внести изменения.
Рекомендации и исправления
Один из наиболее полезных инструментов — «Рекомендации и исправления», который показывает недочеты SEO на странице.
- У картинок не заполнены или отсутствуют значения атрибутов ALT и TITLE.
- Найдено более 1 или не найдено ни одного заголовка H1.
- Число исходящих ссылок превышает рекомендуемое значение в 100 ссылок.
- Отсутствуют или не заполнены метатеги.
Анализ страницы
Больше о встроенных инструментах поисковой оптимизации — в обучающем курсе «Работа с модулем поисковой оптимизации».
Далее подробнее разберем настройки оптимизации всего сайта и настройки конкретных страниц.
Настройка отчетов в CRM Битрикс24
Настройка отчетности в Б24 производится через встроенный конструктор. Для начала требуется выбрать набор полей.
После конструктор перенаправит в меню настроек. Система настраивается следующим образом:
- Наименование и временные рамки — здесь указываются наименование и описание документа. Также выставляется временной период, в рамках которого необходимо получить отчетность.
- Колонки — основной инструмент, определяющий функциональность настроек. Здесь указывается по каким параметрам и каким образом будет составлен отчетный документ. Штатный инструментарий позволяет получить статистику практически по любому этапу продаж или процессу компании.
- Фильтр — инструмент, разграничивающий полученные результаты в документе по выбранным условиям для более удобной работы пользователя.
- Диаграмма — инструмент визуализации полученных данных. Предназначен для упрощения работы с отчетной документацией и экономии времени при анализе данных.
- Общий доступ — меню настроек для передачи шаблона документа выбранным пользователям. Отчетные данные не передаются, только шаблон — для получения статистики пользователю придется запустить отчет.
Внизу под окном настроек находится зона предпросмотра, в которой отображается результат с учетом выбранных параметров.
Отчет по новым лидам
Для анализа новых лидов в Битрикс, требуется создать новый отчет в конструкторе. Чтобы вызвать конструктор нажимаем «Добавить».
В открывшемся окне выбираем тип «Лиды» и нажимаем «Дальше».
В настройках выбираем отчетный период за все время. Здесь же вводится название и описание при необходимости.
Отдельное внимание требуется уделить разделу «Колонки», а также фильтру и диаграмме внизу.
Чтобы активировать подсчет данных в колонке ставим галочку напротив нужного поля. Сортировка данных проводится в разрезе выбранного периода времени и по количеству лидов и менеджеров. В 1 и 3 строке колонок требуется выделить параметр «Количество уникальных» — это позволит вывести данные без дублирования.
Для получения читаемого названия вместо ID-номера, выбираем редактирование и меняем наименование колонки.
Далее выбираем фильтр, на основе которого будет произведена сортировка данных. Внизу также можно поставить галочку и отметить тип диаграммы для визуализации данных.
По завершении нажимаем внизу «Создать». Система автоматически создаст новый отчет.
Справа будет доступен фильтр для анализа данных по выбранных значениям.
Отчет по источникам обращений
Настройка отчетов в CRM Битрикс24 по источникам обращений производится схожим образом. В конструкторе создаем новый элемент, в поле указываем «Лид».
Далее вводим параметр «за все время», удаляем все шаблонные колонки и нажимаем на кнопку «Добавить».
В новой колонке выбираем параметр «Источник лида» и нажимаем «Сохранить».
Затем меняем ID на корректное название колонки и выбираем вычисление по «количеству уникальных». Для большей информативности можно также рассчитать долю по источникам.
Внизу колонки выставляем параметры для фильтрации. Чтобы ограничить вывод данных под определенный период, выбираем 2 колонки с нужными датами. После указываем условия, указанные на скриншоте.
Внизу для визуализации можно спроектировать диаграмму. Чуть ниже — предоставить доступ к созданному шаблону для сотрудников.
При завершении настроек нажимаем «Создать».
Система выведет подробную информацию в разрезе выбранной категории и фильтра.
Отчет по оплаченным сделкам
Чтобы запустить отчеты по оплаченным сделкам Битрикс24, заново запускаем конструктор. В настройках выбираем тип «Сделка».
Далее вводим нужное наименование и указываем отчетный период. Также создаем колонки, которые понадобятся для анализа.
Для удобного управления выбираем настройки фильтра. Выставляем параметр «Направление сделки» и с помощью знака «+» определяем дату оплаты.
Чтобы определить временной диапазон, добавляем 2 поля «Дата оплаты» и указываем параметры «Больше — меньше».
По итогу получаем готовый отчет.
Обратите внимание! Любой отчет, построенный в Битрикс, можно экспортировать в формат электронной таблицы для дальнейшей обработки в Excel или Google Docs.
Создание инфоблока
- URL страницы информационного блока: #SITE_DIR#/catalog/
- URL страницы раздела: #SITE_DIR#/catalog/#SECTION_CODE#/
- URL страницы детального просмотра: #SITE_DIR#/catalog/#SECTION_CODE#/#ELEMENT_CODE#/
Про все свойства я буду рассказывать по мере потребности в них. Сейчас же обращу внимание только на два первых: Цена и Количество, это те данные которые потребуются для товара. Оба свойства будут иметь тип Число.
Если раскроете выпадающий список Тип увидите, что у свойства могут иметь различные типы данных. Не только примитивные типы (булево, строка, число, дата), а также и сложные типы (видео, файл, текст, привязка к элементам инфоблока, привязка к картам и др.). Т.е. о чем я говорил выше инфоблок очень универсальная сущность способная хранить различные данные в себе.
Битрикс24: методы для работы с чатами через API
Обратите внимание на возвращаемый методом массив данных, так как он позволяет решить сразу несколько задач:
- список участников чата (ключ userInChat )
- список участников чата отключивших уведомления (ключ mute_list )
- иконка чата (ключ avatar )
- идентификатор владельца/модератора чата (ключ owner )
- название чата (ключ name )
- внешний/внутренний чат (ключ extranet )
Пример вызова метода:
Добавление пользователя в чат
Метод CIMChat::AddUser достаточно специфичный, подробности — в документации.
Для добавления пользователя в чат без системного уведомления о добавлении нового пользователя:
В данном примере пользователь добавляется без доступа к истории сообщений чата. За это отвечает третий параметр, который задан как null . Для добавления пользователя в чат с доступом к старой переписке — этот параметр нужно убрать.
Для добавления пользователя с системным комментарием вида «Иванов Иван присоединился к чату»:
Удаление пользователя из чата
Используем метод CIMChat::DeleteUser . Ссылка на документацию.
Открыть чат по клику на ссылку
Данное решение будет полезно для того, чтобы добавить ссылку на определенный чат в документацию или Базу Знаний вашего портала. Все просто:
где [CHAT_ID] — уникальный идентификатор чата.
Получить сообщения из чата
Массив $message будет содержать выборку списка сообщений чата.
Механизмы работы с сообщениями в чате
Рассмотрим несколько методов для работы с сообщениями по их уникальному идентификатору. ID сообщения можно посмотреть через исходный код страницы:
Получение сообщения по ID
Редактирование сообщения по ID
Стоит обратить внимание на параметры функции:
- $id — идентификатор редактируемого сообщения
- $text — новый текст сообщения
- $urlPreview — показывать превью ссылок
- $editFlag — показывать что сообщение было отредактировано
- $userId — идентификатор пользователя (автора)
Если в качестве $text передать пустое значение, то это будет равносильно удалению сообщения. Однако, это не совсем полноценное удаление, так как в чате останутся следы в виде фразы «Это сообщение было удалено».
Для редактирования сообщения других пользователей обязательно передавать ID автора сообщения в параметре $userId .
Пример вызова метода:
Удаление сообщения по ID
- $id — идентификатор удаляемого сообщения
- $userId — идентификатор пользователя (автора)
- $completeDelete — полное удаление / замена на сообщение-заглушку
Здесь все по аналогии с редактированием сообщения, если сообщение нужно удалить полностью, то третьим параметром передаем значение true . Если передать false , то будет выполнена замена текста сообщения на «Это сообщение было удалено». Исходный код метода.
Есть и альтернативный вариант, в котором требуется указать только идентификатор сообщения: