Аспро: Шины и диски 2.0 — документация, часть 3 из 3: Интеграция с другими сервисами
Источник: официальный курс «Аспро: Шины и диски 2.0» из базы знаний Аспро. Решение: Аспро: Шины и диски 2.0. Справочная выгрузка сертифицированного партнёра Аспро, обновлено 19.09.2026.
Содержание
- Интеграция с другими сервисами
- Интеграция с CRM-системами
- Настройка электронной коммерции Google через Google Tag Manager
- Создание аккаунта в Google Analytics
- Регистрация в сервисе Google Tag Manager и получение фрагмента кода для вставки
- Добавление фрагмента кода Google Tag Manager в модуль настроек готового решения
- Создание основных тегов для передачи информации из интернет-магазина в систему аналитики Google
- Как создать тег All Pages
- Как создать тег addToCart
- Как создать тег removeFromCart для отслеживания удалений товаров из корзины
- Как создать тег begin_checkout для отслеживания начала оформления заказа
- Как создать тег purchase для отслеживания оформления заказа
- Как создать тег отслеживания электронной торговли
- Подключение Google Analytics 4 на сайте
- Настройка поиска по торговым предложениям
- Для веб-разработчиков
- Требования к графическим материалам
- Установка модулей сторонних разработчиков
Интеграция с другими сервисами
В этой главе рассматривается интеграция решения с внешними сервисами: программами складского учета (на примере с 1С), CRM (Битрикс24), облаком 1С-Битрикс, социальными сервисами, Яндекс.Маркет и другими.
Если вы хотите внедрить в решение пользовательский скрипт (например, пиксели Вконтакте и Facebook), воспользуйтесь включаемой областью в подвале сайта. Счетчики систем аналитики рекомендуется копировать в специальные поля в Центре управления Аспро. В этом случае вам будет доступна расширенная интеграция с Яндекс.Метрикой и системами электронной коммерции.
Если вы хотите внедрить в решение пользовательский скрипт (например, пиксели Вконтакте и Facebook), воспользуйтесь файлом со счетчиками в административной части сайта в общих настройках. Если этого файла нет, то воспользуйтесь включаемой областью в футере. В видео представлено, как это сделать.
Содержание главы:
-
Настройка электронной коммерции Google через Google Tag Manager
-
Регистрация в сервисе Google Tag Manager и получение фрагмента кода для вставки
-
Добавление фрагмента кода Google Tag Manager в модуль настроек готового решения
-
Создание основных тегов для передачи информации из интернет-магазина в систему аналитики Google
назадОтображение процента скидки Интеграция с CRM-системамивперед
Интеграция с CRM-системами
Автоматизировать работу бизнеса стало еще проще – в решениях Аспро реализована интеграция с популярными CRM-системами: Битрикс24, Аспро.Cloud. Передавать данные с заполненных веб-форм с сайта в CRM можно в автоматическом режиме — например, вопросы покупателей или заказы звонков.
Это позволит хранить в одном месте все данные о лидах, стандартизировать работу менеджеров, анализировать эффективность бизнеса и на основе этих данных принимать решения для повышения конвертации заявок в покупки.
Благодаря интеграции вы можете передавать с сайта в CRM все заполненные веб-формы:
- заказа звонка
- отправленного резюме
- заданного вопроса
- заказа услуги
- заказа проекта
- предзаказа товара
- обратной связи
- нашли дешевле.
Ну и, конечно, не стоит забывать о стандартной возможности передачи заказов в Битрикс24.
Нужна помощь?
Поручите настройку интеграции нашим разработчикам — они учтут все нюансы работы, чтобы минимизировать сбои и ошибки. Узнайте больше об услуге или оставьте заявку.
Содержание главы:
назадИнтеграция с другими сервисами Интеграция с Аспро.Cloudвперед
Интеграция с Аспро.Cloud
В решении Аспро: Шины и диски 2.0, начиная с версии 1.1.10, доступна интеграция с облачным сервисом Аспро.Cloud. Это облачная система управления проектами и финансами. С ее помощью можно автоматизировать процессы и оценивать рентабельность каждого этапа работы. Чтобы настроить интеграцию, проделайте путь Аспро → Аспро: Шины и диски 2.0 → Интеграция с CRM → Аспро.Cloud.
Здесь можно настроить отображение табов сайтов. Для этого нажмите на «Настройки отображения табов» в верхнем правом углу.
Отметьте сайты, табы которых вам нужно отобразить и нажмите «Отправить».
После этого откройте появившуюся вкладку с вашим сайтом. В поле «Ваш домен в Аспро.Cloud» (1) укажите домен. В поле «Ключ для авторизации в API» (2) введите ключ.
Чтобы получить ключ для авторизации, откройте Аспро.Cloud и зайдите в «Настройки портала».
Выберите в левом меню «Настройки API», после чего нажмите на кнопку «Создать».
В открывшемся окне укажите название сайта (1) и отметьте модули, к которым необходим доступ (2). Для передачи веб-форм и заказов в Аспро.Cloud поставьте галку в полях CRM (3) и «Пользовательские поля» (4). Сохраните изменения.
После этого на вкладке «Настройки API» появится ключ доступа.
Скопируйте его и вставьте в соответствующее поле в административной части сайта. После этого нажмите «Проверить авторизацию».
После этого станут доступны еще опции. Включите интеграцию (1), чтобы формы и заказы приходили в CRM. Пункт «Использовать логирование» (2) позволяет собирать файлы с логами в папку /upload/logs/aspro.tires2/crm/YY-mm/acloud.log.
Выберите нужные опции и сохраните изменения.
Содержание главы:
назадИнтеграция с CRM-системами Настройка синхронизации форм с Аспро.Cloudвперед
Настройка синхронизации форм с Аспро.Cloud
Чтобы настроить формы обратной связи, перейдите на вкладку «Формы». Здесь вы можете включить автоматическую отправку результатов в CRM (1). Если настройка не включена, синхронизацию нужно будет проводить вручную на вкладке «Результаты».
В поле «Название сделки» (2) вы можете задать произвольное название. Оно может подгрузиться автоматически из настроек формы. Ниже добавлены макросы для автозаполнения названия форм. Клик по макросу добавит его в конец строки.
В пункте «Веб-формы» (3) выбирается форма, для которой вы осуществляете настройку. Для каждой формы настройки проводятся отдельно. Эта настройка не взаимоисключающая, то есть если вы настроили несколько форм, работать будут все.
На вкладке «Поля» задается соответствие полей CRM и формы. В одно поле CRM можно отправить несколько полей формы. Например, поля «Вопрос» и «Должность» можно отправить в поле «Описание».
При необходимости можно создать пользовательские поля. Чтобы это сделать, откройте Аспро.Cloud и зайдите в «Настройки портала».
В разделе «Пользовательские поля» (1) найдите пункт «Сделки» (2), нажмите «Добавить поле» (3) и задайте необходимые параметры.
Вкладка «Результаты» содержит все результаты заполнения форм на сайте.
При необходимости результаты можно отправить вручную с помощью кнопки.
Результат заполнения формы можно отправить в CRM и из самого элемента. Эта возможность доступна только для форм, у которых настроена интеграция с CRM. Для этого в административной части сайта перейдите в Сервисы → Веб-формы → Результаты. В настройках результата необходимой формы выберите «Сделки CRM» и нажмите «Отправить в https://…aspro.cloud».
После отправки результат заполнения формы можно будет тут же открыть в самой CRM.
В Аспро.Cloud результаты можно увидеть в разделе «Сделки».
назадИнтеграция с Аспро.Cloud Настройка синхронизации заказов с Аспро.Cloudвперед
Настройка синхронизации заказов с Аспро.Cloud
Чтобы настроить синхронизацию заказов, перейдите на вкладку «Заказы». Здесь вы можете включить автоматическую отправку результатов в CRM (1). Если настройка не включена, синхронизацию нужно будет проводить вручную на вкладке «Результаты».
В поле «Название сделки» (2) вы можете задать произвольное название. Также оно может подгрузиться автоматически из настроек формы. Ниже доступны макросы для быстрого заполнения названия сделки. Клик по макросу добавит его в конец строки.
В пункте «Тип плательщика» (3) выбирается тип плательщика, для которой вы осуществляете настройку. Для каждой формы настройки проводятся отдельно. Эта настройка не взаимоисключающая, то есть если вы настроили несколько типов плательщика, работать будут все.
На вкладке «Поля» задается соответствие полей CRM и заказа. В одно поле CRM можно отправить несколько полей заказа. Например, поля «Адрес доставки», «Номер заказа» и «Товары» можно отправить в поле «Описание».
При необходимости можно создать пользовательские поля. Чтобы это сделать, откройте Аспро.Cloud и зайдите в «Настройки портала».
В разделе «Пользовательские поля» (1) найдите пункт «Сделки» (2), нажмите «Добавить поле» (3) и задайте необходимые параметры.
Вкладка «Заказы» содержит все оформленные на сайте заказы.
При необходимости результаты можно отправить вручную с помощью кнопки.
Заказ можно отправить в CRM и из самого элемента. Функционал доступен только для заказов, в которых настроен тип плательщика. В административной части сайта перейдите в Магазин → Заказы. В настройках необходимого заказа выберите «Сделка CRM» и нажмите «Отправить в https://…aspro.cloud».
Отправленный заказ можно будет тут же открыть в самой CRM.
В Аспро.Cloud результаты можно увидеть в разделе «Сделки».
назадНастройка синхронизации форм с Аспро.Cloud Интеграция с Битрикс24вперед
Интеграция с Битрикс24
Битрикс24 — это полный комплект инструментов для организации работы компании. В нем вы можете хранить всю информацию о ваших клиентах и заказах, объединять все каналы коммуникации с ними и анализировать результаты работы. А чтобы вы не потеряли ни одну заявку с вашего сайта, мы реализовали простую и легкую интеграцию решений Аспро для интернет-магазинов с CRM-системой.
Внимание! Функционал доступен только на редакциях, начиная с 1С-Битрикс: Стандарт.
Благодаря интеграции с Битрикс24 вы можете переносить:
- в раздел CRM «Сделки» — заказы;
- в раздел CRM «Лиды» — данные с веб-форм «Задать вопрос», «Заказать проект», «Обратная связь», «Нашли дешевле», «Заказать звонок», «Товар под заказ» («Заявка на товар»), «Заказать услугу», «Сообщение сотруднику», «Вопросы и ответы» – в «Лиды».
Настройка передачи данных в «Сделки» и «Лиды» занимает всего пару минут и не требует навыков программирования.
Нужна помощь?
Поручите настройку интеграции нашим разработчикам — они учтут все нюансы работы, чтобы минимизировать сбои и ошибки. Узнайте больше об услуге или оставьте заявку.
Содержание главы:
назадНастройка синхронизации заказов с Аспро.Cloud Передача заказов в раздел «Сделки»вперед
Передача заказов в раздел «Сделки»
Рассмотрим алгоритм настройки передачи заказов с интернет-магазина в Битрикс24 на примере решения Аспро: Next. Откройте в админке Рабочий стол → Магазин → CRM.
Здесь вам будет предложено настроить интеграцию с Битрикс24 по действующей учетной записи или создать новую — «Получить CRM в Битрикс24 (бесплатно)». Если у вас еще нет учетной записи, создайте ее и возвращайтесь к этой инструкции.
Если у вас уже есть учетная запись, нажмите «Настроить интеграцию с CRM». Ниже появится форма:
В ней нужно указать адрес сайта CRM (2) , тип используемого протокола – http или https (1) , логин (3) и пароль администратора CRM (4). Эти сведения можно взять из письма, которое высылается на электронный ящик, указанный при регистрации на Битрикс24.
В процессе настройки интеграции автоматически создается пользователь с особыми правами, из-под которого CRM будет обращаться к интернет-магазину. Вы можете сами создать этого пользователя – снимите галку «Автоматически создать пользователя и настроить права доступа (рекомендуется)» (5). В появившейся форме введите его логин (6) и пароль **(7).
После того, как вы указали все требуемые данные, нажмите кнопку «Настроить интеграцию» (8). Страница перезагрузится и вверху появится сообщение об успешной интеграции. Нажмите «Настроить параметры и импортировать данные».
1С-Битрикс перенаправит вас на страницу CRM с формой настройки параметров соединения. Адрес интернет-магазина, логин пользователя и префикс названия сделок подставятся автоматически. Остается только указать название интернет-магазина и перейти к следующему шагу с помощью кнопки «Далее».
На третьем шаге укажите параметры первого импорта данных:
- Период времени, за который следует импортировать сведения;
- Вероятность успешного завершения сделок из первичного импорта;
- ФИО сотрудника, который ответственный за сделки, импортированные из интернет-магазина;
- Тип импортированных сделок – открытые или закрытые.
Для указания ответственного нажмите «Выбрать». Начните вводить его фамилию в строке поиска. Кликните по нужному варианту, когда он появится в списке.
Для начала процесса импорта нажмите «Далее». По окончании в окне отобразится статистика.
Переходите к следующему шагу – настройке параметров регулярной синхронизации. Здесь укажите частоту синхронизации в минутах (1) и группу, в которую следует отправлять уведомления при поступлении новых заявок с сайта (2).
После нажатия кнопки «Далее» появится информация об успешной синхронизации. Нажмите «Завершить».
Связь Битрикс24 с вашим интернет-магазином настроена! В решении об этом свидетельствует список интеграций (в Рабочий стол → Магазин → CRM).
В Битрикс24 связь с интернет-магазином можно посмотреть в таблице «Связь с интернет-магазинами». После первого импорта данных она открывается автоматически.
В будущем, чтобы увидеть ее, перейдите в раздел «CRM». Далее разверните меню пункта «Еще» на панели сверху и выберите «Настройки».
В меню слева кликните «Интеграция», затем по иконке «1С-Битрикс».
Импортированные данные в Битрикс24 вы можете найти в CRM → Сделки. Здесь же будут автоматически появляться все новые заявки с сайта.
назадИнтеграция с Битрикс24 Настройка связи веб-форм с разделом «Лиды»вперед
Настройка связи веб-форм с разделом «Лиды»
Настроить передачу с заполненных веб-форм с сайта в раздел «Лиды» Битрикс24 можно всего за несколько минут. Инструкции общие для всех интернет-магазинов Аспро, рассмотрим на примере Аспро: Next.
Все веб-формы настраиваются по единому алгоритму. Для примера рассмотрим форму заказа обратного звонка.
Перейдите в Рабочий стол → Сервисы → Веб-формы → Настройка форм. У нужной формы вызовите меню кнопки «Гамбургер» и нажмите «Изменить».
Перейдите на вкладку «CRM». Здесь мы укажем сервер CRM, куда должны уходить сведения. Это достаточно сделать один раз — при настройке остальных форм он уже будет отображаться в перечне автоматически.
Разверните список и выберите пункт «настроить новый».
В открывшемся окне укажите:
- Название для списка в админке**(1);**
- Адрес сайта CRM**(2);**
- Логин (3) и пароль администратора CRM **(4).
Эти сведения можно взять из письма, которое высылается на электронный ящик, указанный при регистрации на Битрикс24.
Сохраните изменения (5). После этого в настройках связи с CRM определите способ отсылки данных с формы (1) – ручной или автоматический, и настройте связанные поля.
Ручной способ: рекомендуется использовать для снижения нагрузки на сайт. При таком способе отправлять данные в Битрикс24 нужно будет вручную. Как это сделать, написано ниже.
Автоматический способ: отправка данных в Битрикс24 будет автоматически осуществляться сразу после того, как пользователь заполнит и отправит веб-форму на вашем сайте.
Связанные поля настраиваются так: в правой колонке (3) нужно выбрать, из какого поля формы сайта будет отправлена запись в CRM, а в левой колонке**(2)** — какое поле CRM ее примет.
Сохраните настройки после изменений.
Для проверки корректности настроек заполните и отправьте соответствующую форму из публичной части сайта. В нашем случае — это форма заказа звонка.
Если вы настроили отправку форм «вручную», то перед тем, как зайти в Битрикс24, перейдите в Рабочий стол → Сервисы → Веб-формы → Результаты. Откройте список нужной формы.
Из настроек параметров формы для быстрого перехода можно использовать кнопку над редактором.
Найдите строку с тестовыми данными (с данными формы, которые вы только что заполнили) и вызовите меню кнопки «Гамбургер» для отправки формы в CRM. После успешной отправки записи в колонке «Отправлено» метка сменит цвет с красного на зеленый.
Если вы выбрали автоматический способ передачи информации о заполненных формах в CRM, сразу перейдите в Битрикс24. Здесь в CRM → Лиды появится новая запись. Кликните на название, чтобы узнать подробности.
В подробной информации вы увидите данные, которые указали на сайте.
Если вы проделали все действия, описанные в инструкции, но результаты в CRM не поступают, проверьте, установлено ли с ней соединение. Для этого перейдите в Рабочий стол → Настройки → Настройки продукта → Настройки модулей → Веб-формы и переключитесь на вкладку «Связь с CRM».
Или откройте настройки любой привязанной к Битрикс24 веб-формы, перейдите на вкладку «CRM» и нажмите «Настроить список».
В настройках связи с корпоративным порталом нажмите «Проверить соединение».
Если соединение установлено, в колонке «Авторизация» отобразится «ОК».
Если при проверке соединения система выдала ошибку, откройте редактор списка при помощи иконки карандаша и проверьте, верно ли заполнены поля.
Исправьте ошибки и попробуйте еще раз.
Если ошибок нет, а установить соединение не удается, обратитесь в нашу техподдержку.
Важно! Если у вас перестал отображаться символьный идентификатор в настройках веб-форм, перейдите в Настройки → Настройки продукта → Настройки модулей → Веб-формы. Проверьте, что поле «Использовать упрощённый режим редактирования форм» неактивно.
назадПередача заказов в раздел «Сделки» Настройка электронной коммерции Google через Google Tag Managerвперед
Настройка электронной коммерции Google через Google Tag Manager
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
Google Tag Manager – это бесплатный инструмент от компании Google, с помощью которого вы сможете создавать, обновлять и отслеживать теги на вашем сайте без внесения изменений через код решения. Тег – это фрагмент кода, который позволяет отслеживать поведение посетителей на сайте, анализировать эффективность источников трафика и др. В Google Tag Manager теги помещаются в контейнер. На сайте размещается один фрагмент кода — код контейнера, а теги добавляются и изменяются в настройках Google Tag Manager.
Благодаря этому с настройкой полноценной системы аналитики справится маркетолог или менеджер, без привлечения программиста. В этом уроке мы рассмотрим, как связать ваши аккаунты в сервисах Google, и объясним общий принцип работы этих инструментов.
Установка и настройка диспетчера тегов в официальной документации Google.
Рекомендуем пройти курс Google — «Основы Диспетчера тегов Google».
Внимание! В рамках технической поддержки мы не консультируем по настройкам Google Analytics. Если вам нужна индивидуальная настройка или диагностика, напишите нам на почту: info@aspro.ru.
Интеграция с электронной торговлей Google через сервис Google Tag Manager настраивается через 4 простых шага:
-
Создаем аккаунт в Google Analytics, в котором будем работать с данными.
-
Регистрируемся в сервисе Google Tag Manager и получаем фрагмент кода для вставки для интернет-магазина.
-
Вставляем фрагмент кода Google Tag Manager в модуль настроек вашего готового решения.
-
Создаем основные теги для передачи информации из интернет-магазина в систему аналитики Google:
a. Тег «Просмотр страниц» — All Pages
b. Тег «Товар добавлен в корзину» — addToCart
c. Тег «Товар удален из корзины» — removeFromCart
d. Тег «Этап оформления заказа» — checkout
e. Тег «Успешное оформление заказа» — gtm.dom
f. Тег отслеживания электронной торговли
Нужна помощь?
Поручите настройку интеграции нашим разработчикам — они учтут все нюансы работы, чтобы минимизировать сбои и ошибки. Узнайте больше об услуге или оставьте заявку.
Содержание главы:
-
Регистрация в сервисе Google Tag Manager и получение фрагмента кода для вставки
-
Добавление фрагмента кода Google Tag Manager в модуль настроек готового решения
-
Создание основных тегов для передачи информации из интернет-магазина в систему аналитики Google
назадНастройка связи веб-форм с разделом «Лиды» Создание аккаунта в Google Analyticsвперед
Создание аккаунта в Google Analytics
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
Чтобы подключить Google Analytics или Google Tag Manager на сайте в решении Аспро, вам прежде всего понадобится аккаунт в Google. Если вы пользуетесь сервисами Google (почтой или браузером), то скорее всего у вас уже есть аккаунт. Если же нет, то регистрация займет всего пару минут.
Авторизуйтесь под своим Google-аккаунтом. Перейдите в Google Analytics. Нажмите кнопку «Создать аккаунт».
Заполните поле «Название аккаунта» и нажмите кнопку «Далее».
На следующем шаге заполните название сайта, часовой пояс и валюту. Затем нажмите «Далее».
Выберите сферу деятельности компании, ее размер и укажите, как вы собираетесь использовать Google Аналитику. Нажмите «Создать».
После этого появится соглашение об условиях использования Google Analytics. Ознакомьтесь с условиями, поставьте галку и нажмите «Принимаю».
Создание потока
Нажмите кнопку «Веб».
Заполните поля «URL веб-сайта» и «Название потока». Название может быть любым. После этого нажмите «Создать поток».
назадНастройка электронной коммерции Google через Google Tag Manager Регистрация в сервисе Google Tag Manager и получение фрагмента кода для вставки вперед
Регистрация в сервисе Google Tag Manager и получение фрагмента кода для вставки
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
Перейдите по ссылке и нажмите на кнопку «Start for free».
Авторизуйтесь под своим Google-аккаунтом, если необходимо, и нажмите «Создать аккаунт».
Введите название аккаунта (1) и выберите страну (2). В качестве целевой платформы выберите «Веб-сайт» (3). После этого нажмите кнопку «Создать».
Ознакомьтесь с условиями использования Google Менеджера тегов, поставьте галку (1) и нажмите «Да» (2).
Скопируйте код из верхнего поля.
Окно с кодом можно вызвать повторно здесь.
В административной части вашего сайта проделайте путь Аспро (1) → Аспро: Max (2) → Настройки (3).
Внизу страницы найдите пункт «Файл со счетчиками» и нажмите «Редактировать».
Вставьте код из Google Tag Manager в открывшееся окно.
Сохраните изменения.
назадСоздание аккаунта в Google Analytics Добавление фрагмента кода Google Tag Manager в модуль настроек готового решениявперед
Добавление фрагмента кода Google Tag Manager в модуль настроек готового решения
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
Чтобы данные собирались о поведении пользователей собирались, необходимо установить фрагмент кода Google Tag Manager в настройки решения.
Перейдите в настройки решения:
- Аспро: Next → Настройки;
- Аспро: Маркет → Настройки;
- Аспро: Оптимус → Настройки.
Найдите блок «Цели и счетчики» и выполните необходимые настройки:
В Аспро: Маркет и Аспро: Оптимус для установки кода счетчика Google Tag Manager вставьте код в соответствующее поле. Активируйте параметр «Использовать электронную коммерцию google».
В Аспро: Next код счетчика вставляется в специально предназначенный для этого файл. Давайте посмотрим, как это сделать.
Найдите блок «Цели и счетчики». Нажмите на кнопку «Редактировать».
Перейдите в режим редактирования исходного кода.
Добавьте код счетчика Google Tag Manager, который вы копировали ранее и сохраните изменения.
Обязательно активируйте параметр «Использовать электронную коммерцию Google».
Примените изменения.
назадРегистрация в сервисе Google Tag Manager и получение фрагмента кода для вставки Создание основных тегов для передачи информации из интернет-магазина в систему аналитики Googleвперед
Создание основных тегов для передачи информации из интернет-магазина в систему аналитики Google
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
Теперь нам необходимо настроить Google Tag Manager таким образом, чтобы данные о посещениях и посетителях сайта передавались в Google Analytics. Для этого нам предстоит работать с тегами и триггерами.
Прежде чем это делать, давайте познакомимся с базовыми терминами и определениями, которые понадобятся нам в дальнейшем для работы.
-
Тег – это основная и главная единица в диспетчере. Фактически это фрагмент JS-кода, который совершает какие-либо операции в рамках сбора статистики. Чтобы тег срабатывал корректно, ему требуется настроенный триггер.
-
Триггер – это активатор, запускающий в работу код из тега. Примеры триггеров: нажатие кнопки, заполнение полей, отправка формы или просто переход на страницу. Триггеры более тонко настраиваются при помощи переменных.
-
Переменные – это частные условия в триггере. Например, идентификаторы и классы веб-элементов.
Далее рассмотрим как создавать основные теги для передачи информации из интернет-магазина в систему аналитики Google:
- Тег «Просмотр страниц»
- Тег «Товар добавлен в корзину»
- Тег «Товар удален из корзины»
- Тег «Этап оформления заказа»
- Тег «Успешное оформление заказа»
- Тег отслеживания электронной торговли.
Содержание главы:
-
Как создать тег removeFromCart для отслеживания удалений товаров из корзины
-
Как создать тег begin_checkout для отслеживания начала оформления заказа
назадДобавление фрагмента кода Google Tag Manager в модуль настроек готового решения Как создать тег All Pagesвперед
Как создать тег All Pages
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
Чтобы отследить общие данные статистики о просмотре страниц, нужно создать тег All Pages. Каждый раз, когда любой пользователь просматривает и переходит по страницам сайта, прибавляется счетчик в этом теге.
Авторизуйтесь в Google Tag Manager под своим аккаунтом и войдите в контейнер, закрепленный за вашим сайтом.
Шаг 1. Создание тега
В диспетчере перейдите на вкладку «Теги» и нажмите «Создать».
После того, как вы нажмете кнопку, справа откроется меню с выбором типа тега. В конфигурации тега выберите универсальную аналитику (Universal Analytics).
Задайте свое название тега, в левом верхнем углу. Также можно оставить название без изменений. Имя подставится при сохранении, исходя из параметров.
В поле «Тип отслеживания» выберите «Просмотр страницы». Нажмите галку в поле «Включить переопределение настроек в этом теге». В поле «Идентификатор» отслеживания вставьте ваш идентификатор из аналитики.
Идентификатор отслеживания берется из настроек аккаунта в Google Analytics. Перейдите в Google Analytics, нажмите кнопку с шестеренкой внизу экрана, чтобы попасть в админпанель. Выберите столбец Ресурс → Код отслеживания → Код отслеживания.
Скопируйте идентификатор отслеживания и вставьте в соответствующее поле в настройках тега.
Затем нажмите на дополнительные настройки. Перейдите в пункт «Электронная торговля». В поле «Включить расширенные функции электронной торговли» задайте параметр — True. Поставьте галочку в поле «Использовать уровень данных».
Далее возвращаемся в диспетчер и настраиваем первый триггер для нашего тега. Для этого нажимаем на область триггера.
В настройках конфигурации вам будет доступно одно значение – All pages, его и выбирайте.
Чтобы опубликовать эту версию контейнера, необходимо отправить данные. Перейдите в рабочую область и нажмите кнопку «Отправить».
Заполните название версии и краткое описание, чтобы вы понимали, в чем суть внесенных изменений и нажмите «Опубликовать»:
Также вы можете сохранять изменения без публикаций. Для этого нужно переключиться на вкладку «Новая версия» и нажать кнопку «Создать». Изменения сохранятся, но не применятся на сайте.
Теперь сервис сбора статистики и диспетчер тегов связаны, и последний может получать актуальную информацию и корректно на нее реагировать.
Чтобы проверить это, перейдите обратно в Google Analytics. На вкладке «В режиме реального времени» выберите пункт «Обзор» и посмотрите на отчет. Если вы настроили первый тег и триггер правильно, в сервисе появится информация о пользователях и просмотрах, которые сейчас на сайте.
назадСоздание основных тегов для передачи информации из интернет-магазина в систему аналитики Google Как создать тег addToCartвперед
Как создать тег addToCart
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
Чтобы отследить данные статистики о добавлении товаров в корзину, нужно создать тег addToCart. Каждый раз, когда любой пользователь нажимает кнопку «Добавить в корзину», прибавляется счетчик в этом теге.
Авторизуйтесь в Google Tag Manager под своим аккаунтом и войдите в контейнер, закрепленный за вашим сайтом.
Шаг 1. Создание переменной
В левом меню переключитесь на пункт «Переменные» и нажмите кнопку «Создать».
При добавлении переменных, тегов, триггеров, вы можете задать им любое название. Также можно оставить название без изменений.
Мы назвали переменную — «Пользовательское событие».
Нажмите в блоке «Конфигурация переменной» на круглую кнопку, чтобы выбрать тип и продолжить настройки. В появившемся списке выберите «Пользовательское событие».
Для этого типа переменной дополнительных настроек не требуется Сохраните изменения.
Шаг 2. Создание триггера
В левой панели выберите раздел «Триггеры» и нажмите «Создать», чтобы начать добавление нового триггера.
Задайте название триггера в левом верхнем углу.
Нажмите на круглую кнопку, чтобы справа появились настройки. Выберите тип триггера «Пользовательское событие».
В поле «Имя события» нужно вставить метку «addToCart». В условии активации триггера выберите «Некоторые специальные события».
В блоке «Активировать триггер при наступлении события и выполнении всех этих условий» установите по порядку значения: Пользовательское событие, равно, имя события «addToCart».
Если вам потребуется добавить еще условия или удалить ненужные, вы можете сделать это кнопками + и — рядом с полями.
Сохраните изменения.
Шаг 3. Создание тега
В левой панели выберите раздел «Теги» и нажмите «Создать», чтобы начать добавление нового тега.
Задайте название тега в левом верхнем углу.
Нажмите на круглую кнопку. После этого справа откроется меню с выбором типа тега. В конфигурации тега выберите универсальную аналитику (Universal Analytics).
В поле «Тип отслеживания» выберите «Событие». Задайте параметры:
- Категория — addToCart
- Действие — ваша переменная, в нашем случае это «Пользовательское событие».
Нажмите галку в поле «Включить переопределение настроек в этом теге». В поле «Идентификатор» отслеживания вставьте ваш идентификатор из аналитики.
Затем нажмите на дополнительные настройки. Перейдите в пункт «Электронная торговля». В поле «Включить расширенные функции электронной торговли» задайте параметр — True. Поставьте галочку в поле «Использовать уровень данных».
Затем нажмите на блок «Триггеры» и выберите триггер «addToCart».
В итоге ваш новый тег должен выглядеть таким образом:
Сохраните тег и нажмите кнопку «Отправить».
В появившемся окне заполните название и описание версии. Это нужно, чтобы при дальнейшей работе вам было понятно, какие изменения были внесены. Нажмите кнопку «Опубликовать», чтобы внесенные изменения вступили в силу.
Также вы можете сохранять изменения без публикаций. Для этого нужно переключиться на вкладку «Новая версия» и нажать кнопку «Создать». Изменения сохранятся, но не применятся на сайте.
Чтобы проверить работу тега, откройте в разных вкладках браузера ваш магазин и аккаунт на Google Analytics. Добавьте товар в корзину. Посмотрите изменение статистики по добавлениям в корзину в GA. Перейдите в режим реального времени во вкладку «События». Если все настройки верные, вы увидите изменение статистики.
назадКак создать тег All Pages Как создать тег removeFromCart для отслеживания удалений товаров из корзинывперед
Как создать тег removeFromCart для отслеживания удалений товаров из корзины
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
Тег removeFromCart собирает статистические данные о товарах, которые сначала добавили в корзину, а затем удалили из нее. Каждый раз, когда любой пользователь удаляет товары, прибавляется счетчик в этом теге.
Откройте Google Tag Manager и выберите ваш аккаунт.
Шаг 1. Создание переменных
Необходимо создать 3 переменные. Отметим, что имена переменных уровня данных отличаются от имен самих переменных. Перечислим их:
- Item price — value.
- Item currency — currency.
- Ecommerce Items — ecommerce.items.
Перейдите во вкладку «Переменные» и нажмите кнопку «Создать».
Выберите тип «Переменная уровня данных».
Создайте переменную Ecommerce Items с именем переменной уровня данных ecommerce.items.
Аналогично этому создайте переменную Item Currency с именем переменной уровня данных currency.
Также создайте переменную Item price с именем переменной уровня данных value.
Шаг 2. Создание триггера
В левой панели выберите раздел «Триггеры» и нажмите «Создать», чтобы начать добавление нового триггера.
Задайте название триггера в левом верхнем углу.
Нажмите на круглую кнопку, чтобы справа появились настройки. Выберите тип триггера «Специальное событие».
В поле «Название события» нужно вставить метку removeFromCart. В условии активации триггера выберите «Все специальные события». Сохраните изменения.
Шаг 3. Создание тега
Перейдите на вкладку «Теги» и нажмите «Создать».
Укажите любое произвольное название тега. Нажмите на область «Конфигурация тега».
Выберите тип тега «Google Аналитика: событие GA4».
В выпадающем списке «Тег конфигурации» выберите тег, который создали в этой главе.
Название события — remove_from_cart.
Разверните вкладку «Параметры события» (1), создайте три строки с помощью кнопки «Добавить строку» (2) и укажите значения (3):
- Название параметра items Значение {{ecommerce items}}.
- Название параметра value Значение {{Item price}}.
- Название параметра currency Значение {{Item currency}}.
Теперь добавьте триггер. Для этого нажмите на область «Триггеры».
И выберите заранее созданный триггер.
Итоговый результат должен быть следующим:
Сохраните тег и нажмите кнопку «Отправить».
В появившемся окне заполните название и описание версии. Это нужно, чтобы при дальнейшей работе вам было понятно, какие изменения были внесены. Нажмите кнопку «Опубликовать», чтобы внесенные изменения вступили в силу.
Чтобы проверить работу тега, откройте в разных вкладках браузера ваш магазин и аккаунт на Google Analytics. Добавьте товар в корзину, а затем удалите. Посмотрите изменение статистики по добавлениям в корзину в GA. Перейдите в режим реального времени во вкладку «События». Если все настройки верные, вы увидите изменение статистики.
В административной части сайта пропишите название тега. Для этого перейдите в Аспро → Аспро: Max → Настройки → Обязательные настройки для быстрого запуска. Найдите блок «Электронная коммерция Google». В строке «Метка события “Товар удален из корзины” в google tag manager» измените название тега на removeFromCart. Сохраните настройки.
назадКак создать тег addToCart Как создать тег begin_checkout для отслеживания начала оформления заказавперед
Как создать тег begin_checkout для отслеживания начала оформления заказа
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
Тег begin_checkout в Google Analytics 4 используется, чтобы отслеживать начало оформления заказа на сайте.
Откройте Google Tag Manager и выберите ваш аккаунт.
Шаг 1. Создание переменных
Необходимо создать 3 переменные. Отметим, что имена переменных уровня данных отличаются от имен самих переменных. Перечислим их:
- Item price — value.
- Item currency — currency.
- Ecommerce Items — items.
Перейдите во вкладку «Переменные» и нажмите кнопку «Создать».
Выберите тип «Переменная уровня данных».
Создайте переменную Ecommerce Items с именем переменной уровня данных ecommerce.items.
Аналогично этому создайте переменную Item currency с именем переменной уровня данных currency.
Также создайте переменную Item price с именем переменной уровня данных value.
Шаг 2. Создание триггера
В левой панели выберите раздел «Триггеры» и нажмите «Создать», чтобы начать добавление нового триггера.
Задайте название триггера в левом верхнем углу.
Нажмите на круглую кнопку, чтобы справа появились настройки. Выберите тип триггера «Специальное событие».
В поле «Название события» нужно вставить метку begin_checkout. В условии активации триггера выберите «Все специальные события». Сохраните изменения.
Шаг 3. Создание тега
Перейдите на вкладку «Теги» и нажмите «Создать».
Укажите любое произвольное название тега. Нажмите на область «Конфигурация тега».
Выберите тип тега «Google Аналитика: событие GA4».
В выпадающем списке «Тег конфигурации» выберите тег, который создали в этой главе.
Название события — begin_checkout.
Разверните вкладку «Параметры события» (1), создайте три строки с помощью кнопки «Добавить строку» (2) и укажите значения (3):
- Название параметра items Значение {{ecommerce items}}.
- Название параметра value Значение {{Item price}}.
- Название параметра currency Значение {{Item currency}}.
Теперь добавьте триггер. Для этого нажмите на область «Триггеры».
И выберите заранее созданный триггер.
Итоговый результат должен быть следующим.
В административной части сайта пропишите название тега. Для этого перейдите в Аспро → Аспро: Max → Настройки → Обязательные настройки для быстрого запуска. Найдите блок «Электронная коммерция Google». В строке «Метка события “Этап оформления заказа” в google tag manager» измените название тега на begin_checkout. Сохраните настройки.
назадКак создать тег removeFromCart для отслеживания удалений товаров из корзины Как создать тег purchase для отслеживания оформления заказавперед
Как создать тег purchase для отслеживания оформления заказа
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
Тег purchase собирает статистические данные по транзакциям: объем продаж определенных товаров, суммы покупок, местоположение плательщиков. С помощью отчетов по электронной торговле можно сегментировать и анализировать данные, а также выявлять взаимосвязи между маркетинговыми кампаниями, привлечением пользователей и совершенными транзакциями.
Тег будет собирать данные при оформлении полного заказа и при покупке в 1 клик.
Откройте Google Tag Manager и выберите ваш аккаунт.
Шаг 1. Создание переменных
Создайте 7 переменных с типом «Переменная уровня данных»: Ecommerce Shipping, Ecommerce Tax, Ecommerce Transaction ID, Ecommerce Value, Ecommerce Affiliation, Ecommerce Currency и Ecommerce Items.
Важно подчеркнуть, что имена переменных уровня данных отличаются от имен самих переменных. Перечислим их:
- Ecommerce Shipping — ecommerce.shipping.
- Ecommerce Tax — ecommerce.tax.
- Ecommerce Transaction ID — ecommerce.transaction_id.
- Ecommerce Value — ecommerce.value.
- Ecommerce Affiliation — ecommerce.affiliation.
- Ecommerce Currency — ecommerce.currency.
- Ecommerce Items — ecommerce.items.
Перейдите во вкладку «Переменные» и нажмите кнопку «Создать».
Выберите тип «Переменная уровня данных».
Создайте переменную Ecommerce Shipping с именем переменной уровня данных ecommerce.shipping.
Аналогично этому алгоритму создайте оставшиеся 6 переменных.
Шаг 2. Создание триггера
В левой панели выберите раздел «Триггеры» и нажмите «Создать», чтобы начать добавление нового триггера.
Задайте название триггера в левом верхнем углу.
Нажмите на круглую кнопку, чтобы справа появились настройки. Выберите тип триггера «Специальное событие».
В поле «Имя события» нужно вставить метку purchase. В условии активации триггера выберите «Все специальные события».
Сохраните изменения.
Шаг 3. Создание тега
Перейдите на вкладку «Теги» и нажмите «Создать».
Укажите любое произвольное название тега. Нажмите на область «Конфигурация тега».
Выберите тип тега «Google Аналитика: событие GA4».
В выпадающем списке «Тег конфигурации» выберите тег, который создали в этой главе.
Название события — purchase.
Разверните вкладку «Параметры события» (1), создайте семь строк с помощью кнопки «Добавить строку» (2) и укажите значения (3):
- Название параметра shipping Значение {{Ecommerce Shipping}}.
- Название параметра tax Значение {{Ecommerce Tax}}.
- Название параметра transaction_id Значение {{Ecommerce Transaction Id}}.
- Название параметра value Значение {{Ecommerce Value}}.
- Название параметра affiliation Значение {{Ecommerce Affiliation}}.
- Название параметра currency Значение {{Ecommerce Currency}}.
- Название параметра items Значение {{Ecommerce Items}}.
Теперь добавьте триггер. Для этого нажмите на область «Триггеры».
И выберите заранее созданный триггер.
Итоговый результат должен быть следующим:
Сохраните тег и нажмите кнопку «Отправить».
В появившемся окне заполните название и описание версии. Это нужно, чтобы при дальнейшей работе вам было понятно, какие изменения были внесены. Нажмите кнопку «Опубликовать», чтобы внесенные изменения вступили в силу.
Чтобы проверить работу тега, откройте в разных вкладках браузера ваш магазин и аккаунт на Google Analytics. Сделайте заказ на сайте через полное оформление или через форму покупки в 1 клик. Посмотрите изменение статистики в GA. Перейдите в Отчеты → Взаимодействие → Конверсии. Выберите актуальную дату. Если все настройки верные, вы увидите изменение статистики.
Данные по статистике могут обновляться с задержкой.
В административной части сайта пропишите название тега. Для этого перейдите в Аспро → Аспро: Max → Настройки → Обязательные настройки для быстрого запуска. Найдите блок «Электронная коммерция Google». В строке «Метка события “Успешное оформления заказа” в google tag manager» измените название тега на purchase. Сохраните изменения.
назадКак создать тег begin_checkout для отслеживания начала оформления заказа Как создать тег отслеживания электронной торговливперед
Как создать тег отслеживания электронной торговли
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
В Аспро: Next вы можете добавить тег, который будет собирать статистические данные по транзакциям: объем продаж определенных товаров, суммы покупок, местоположение плательщиков. С помощью отчетов по электронной торговле можно сегментировать и анализировать данные, а также выявлять взаимосвязи между маркетинговыми кампаниями, привлечением пользователей и совершенными транзакциями. В нашем примере тег мы назовем — purchase. Тег будет собирать данные при оформлении полного заказа, и при покупке в 1 клик.
Перед тем как создавать сам тег, необходимо включить электронную торговлю в Google Analytics.
Перейдите в Google Analytics в раздел администрирования. Нажмите на кнопку «Администратор»,
Затем перейдите в настройки электронной торговли.
Включите настройки и сохраните изменения.
В административной части пропишите название тега. Для этого перейдите в Аспро: Next → Настройки. Найдите блок «Цели и счетчики». В строке «Метка события “Успешное оформления заказа” в google tag manager» измените название тега на «purchase».
Затем авторизуйтесь в Google Tag Manager под своим аккаунтом и войдите в контейнер, закрепленный за вашим сайтом.
Шаг 1. Переменная
Если вы уже создавали ранее переменную «Пользовательское событие», то повторное создание ее не требуется. Вы можете применять эту переменную в новом теге и его триггере.
Если такую переменную вы не создавали, тогда прочтите здесь как создать переменную (шаг 1).
Шаг 2. Создание триггера
В левой панели выберите раздел «Триггеры» и нажмите «Создать», чтобы начать добавление нового триггера.
Задайте название триггера в левом верхнем углу.
Нажмите на круглую кнопку, чтобы справа появились настройки. Выберите тип триггера «Пользовательское событие».
В поле «Имя события» нужно вставить метку «purchase». В условии активации триггера выберите «Все специальные события».
Сохраните изменения.
Шаг 3. Создание тега
В левой панели выберите раздел «Теги» и нажмите «Создать», чтобы начать добавление нового тега.
Задайте название тега в левом верхнем углу.
Нажмите на круглую кнопку. После этого справа откроется меню с выбором типа тега. В конфигурации тега выберите универсальную аналитику (Universal Analytics).
В поле «Тип отслеживания» выберите «Событие». Задайте параметры:
- Категория — purchase
- Действие — ваша переменная, в нашем случае это «Пользовательское событие».
Нажмите галку в поле «Включить переопределение настроек в этом теге». В поле «Идентификатор» отслеживания вставьте ваш идентификатор из аналитики.
Затем нажмите на дополнительные настройки. Перейдите в пункт «Электронная торговля». В поле «Включить расширенные функции электронной торговли» задайте параметр — True. Поставьте галочку в поле «Использовать уровень данных».
Затем нажмите на блок «Триггеры» и выберите триггер «purchase».
В итоге ваш новый тег должен выглядеть таким образом:
Сохраните тег и нажмите кнопку «Отправить».
В появившемся окне заполните название и описание версии. Это нужно, чтобы при дальнейшей работе вам было понятно, какие изменения были внесены. Нажмите кнопку «Опубликовать», чтобы внесенные изменения вступили в силу.
Также вы можете сохранять изменения без публикаций. Для этого нужно переключиться на вкладку «Новая версия» и нажать кнопку «Создать». Изменения сохранятся, но не применятся на сайте.
Чтобы проверить работу тега, откройте в разных вкладках браузера ваш магазин и аккаунт на Google Analytics. Сделайте заказ на сайте через полное оформление или через форму покупки в 1 клик. Посмотрите изменение статистики в GA. Перейдите в Конверсии → Электронная торговля → Эффективность списка. Выберите дополнительный параметр — «Категория товаров (расширенная электронная торговля)» и выберите актуальную дату. Если все настройки верные, вы увидите изменение статистики.
Внимание! Данные по статистике могут обновляться с задержкой.
назадКак создать тег purchase для отслеживания оформления заказа Подключение Google Analytics 4 на сайтевперед
Подключение Google Analytics 4 на сайте
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
В решении Аспро: Next, начиная с версии 1.10.0, можно подключить Google Analytics 4. Это бесплатный сервис аналитики, который позволяет отслеживать посещаемость сайта и поведение пользователей.
Рассмотрели подключение Google Analytics 4 в видео для Аспро: Максимум. Но настройка аналогична и для Аспро: Next.
Чтобы подключить Google Analytics 4, в административной части сайта перейдите в Аспро (1) → Аспро: Next (2) → Настройки (3).
Поставьте галку в поле «Использовать электронную коммерцию google».
В выпадающем меню «Версия Google Analytics» выберите «Google Аналитика 4» и сохраните изменения.
Нужна помощь?
Поручите настройку интеграции нашим разработчикам — они учтут все нюансы работы, чтобы минимизировать сбои и ошибки. Узнайте больше об услуге или оставьте заявку.
Содержание главы:
назадКак создать тег отслеживания электронной торговли Подключение тега Googleвперед
Подключение тега Google
С 1 июля 2025 года вступают в силу изменения в Закон 152-ФЗ, которые запрещают первоначальный сбор персональных данных граждан РФ напрямую на иностранных серверах. Это значит, что Роскомнадзор сможет штрафовать бизнес за использование сервисов, которые хранят данные пользователей за рубежом. Подробнее об изменениях.
В Google Analytics 4 можно подключить общий тег Google. Этот тег будет автоматически собирать и передавать данные в сервис, чтобы вы смогли оценивать эффективность сайта и объявлений.
С помощью тега Google вы сможете получить общую информацию о посещениях. Но события и цели не будут работать — для них потребуется Google Tag Manager.
Чтобы добавить тег, в Google Analytics перейдите в «Потоки данных» и выберите поток вашего сайта.
Далее выберите «Просмотр инструкций тега».
Скопируйте код тега.
В административной части вашего сайта перейдите в Аспро (1) → Аспро: Next (2) → Настройки (3).
Внизу страницы найдите пункт «Файл со счетчиками» и нажмите «Редактировать».
Вставьте код в окно и сохраните изменения.
Проверить работу тега Google можно в отчете реального времени.
Узнать дополнительную информацию и способы проверки активности тега можно в документации Google.
назадПодключение Google Analytics 4 на сайте Настройка поиска по торговым предложениямвперед
Настройка поиска по торговым предложениям
В новых версиях интернет-магазинов появилась возможность осуществлять поиск не только по названиям элементов (товаров), но и по свойствам торговых предложений — например, по размеру «XS» или цвету «Белый»
- Аспро: Next — начиная с версии 1.0.11
- Аспро: Маркет — начиная с версии 1.3.9
- Аспро: Оптимус — начиная с версии 1.1.9
- Аспро: Шины и диски 2.0.
Для настройки перейдите в административную часть сайта в Контент → Инфоблоки → Типы инфоблоков → Каталог → Торговые предложения.
Переключитесь на вкладку «Свойства». У нужного свойства торгового предложения нажмите на многоточие — например, у свойства «Размер».
Поставьте галочку в строке «Значения свойства участвуют в поиске» и сохраните изменения.
Теперь нужно сделать переиндексацию поиска. Перейдите в Настройки → Поиск → Переиндексация.
Вы можете переиндексировать только измененные параметры или все целиком. Мы рекомендуем проводить переиндексацию поиска полностью. Для этого снимите галочку в строке «Переиндексировать только измененные». После этого нажмите на кнопку «Переиндексировать».
В результате после нажатия кнопки «Искать» или кнопки клавиатуры «Enter» поисковая выдача будет иметь вид:
Теперь рассмотрим, как включить поиск по торговым предложениям в выпадающем списке поиска (чтобы торговые предложения отображались еще до нажатия кнопки «Искать» или кнопки клавиатуры «Enter»):
В Аспро: Next эта настройка включена по умолчанию. В Аспро: Оптимус и Аспро: Маркет это нужно сделать дополнительно.
- Аспро: Оптимус
В публичной части сайта при включенном режиме правки наведите на область поиска. В появившейся панели меню нажмите на стрелочку. Выберите «Поиск по заголовкам» → «Редактировать параметры компонента».
На вкладке «Категория #1» в блоке «Ограничение области поиска» выберите вариант «Каталог». В блоке «Искать в информационных блоках типа» установите вариант «все», если хотите, чтобы в поиске отображались и торговые предложения, и товары каталога, в названии которых присутствует поисковое слово — например, «Синий».
Если вы хотите, чтобы в выпадающем списке поиска отображались только торговые предложения, выберите вариант «Торговые предложения».
Результат выбора «все»: поиск и по торговым предложениям, и по заголовкам товаров:
- Аспро: Маркет
В публичной части сайта при включенном режиме правки наведите на область поиска. В появившейся панели меню нажмите на шестеренку.
На вкладке «Дополнительные настройки» в строке «ID инфоблока каталога» напишите «13,all» (обязательно маленькими буквами!), если хотите, чтобы в поиске отображались и торговые предложения, и товары каталога, в названии которых присутствует поисковое слово — например, «Синий».
Если вы хотите, чтобы в выпадающем списке поиска отображались только торговые предложения, укажите ID, равный 14.
Чтобы вернуть первоначальный вариант поиска по заголовкам товаров ,укажите ID инфоблока каталога, равный 13.
Результат выбора «13, all»: поиск и по торговым предложениям, и по заголовкам товаров:
назадПодключение тега Google Для веб-разработчиковвперед
Для веб-разработчиков
Решения Аспро: Next и Аспро: Шины и диски 2.0 созданы на современной технологической платформе. Они имеют принципиально новую архитектуру, с которой по-настоящему удобно работать. В специальном разделе есть библиотеки кнопок, иконок и элементов для оформления.
В этой главе мы расскажем об этих преимуществах, а также о том, как легко и просто изменять основные элементы сайта.
Внимание! Информация, представленная в этой главе, носит рекомендательный характер и предназначена для программистов, владеющих навыками разработки на 1С-Битрикс. Мы не оказываем консультации по разработке и не несем ответственности за последствия изменения кода шаблона. Инструкция подразумевает, что вы сможете выполнить работу с кодом самостоятельно.
Мы настоятельно рекомендуем придерживаться наших рекомендаций. Ошибки, возникшие из-за некорректных действий, устраняются платно.
Если вы не разработчик и хотите доработать решение под ваш проект – например, изменить внешний вид блоков, разделов, элементов или добавить новый функционал, пожалуйста, свяжитесь с нами.
Содержание главы:
назадНастройка поиска по торговым предложениям Графические материалывперед
Графические материалы
В поставку решений Аспро включены библиотеки иконок, кнопок и других элементов интерфейса, которые помогут сделать сайт на основе готового решения еще красивее и уникальнее.
-
Библиотека UI-элементов для интернет-магазина Аспро: Максимум
-
Библиотека UI-элементов для интернет-магазина Аспро: Ландшафт
-
Библиотека UI-элементов для интернет-магазина Аспро: Приорити
-
Библиотека UI-элементов для интернет-магазина Аспро: Корпоративный сайт 2.0
-
Библиотека UI-элементов для интернет-магазина Аспро: Шины и диски 2.0
В разделе «Оформление» показаны варианты отображения текста с использованием заголовков различных уровней для разбиения информации на блоки меньшего размера, что упрощает ее восприятие, и позволяет отделить смысловые блоки друг от друга.
Для того, чтобы визуально выделить перечисление, например, преимуществ сотрудничества, вы можете задействовать один из вариантов представления списков: нумерованный/ненумерованный, иерархический/линейный или с детальным описанием. Также при создании списка в качестве маркера доступно использование пиктограмм, которые включены в библиотеку.
Для приверженцев интересной подачи материала приведен пример оформления цитат и буквиц, гармонирующий с общей стилистикой решения.
Цитата – это ключ, основная идея статьи, поэтому она должна особым образом выделяться на общем фоне и «цеплять» даже беглый взгляд посетителя.
Использование буквицы как художественного приема оформления текста делает его более приятным для чтения и украшает страницу, которая не изобилует другими яркими деталями.
В библиотеке присутствуют средства визуального оформления кода. Выражения из кода в тексте выделяются использованием другого цвета для него самого и его заднего фона, а строки кода для удобства помещаются в специальные блоки, чтобы ни один символ не потерялся в тексте описания.
В этом же разделе вы можете ознакомиться со стилями оформления таблиц, которые удобно использовать для представления структурированной информации (к примеру, отображения реквизитов компании).
Если вам необходимо выделить какой-либо элемент текста, вы можете установить возле него «визуальный якорь» в виде одной из пиктограмм, что в огромном множестве перечислены в разделе «Иконки». Например, к электронному адресу тех. поддержки с меткой легко будет вернуться в подробной инструкции по настройке программного продукта в случае, если инструкция не помогла и на одном из этапов возникли непредвиденные затруднения.
Также в этом разделе вы можете выбрать один из вариантов цветовой схемы, доступный для иконок большего размера.
Раздел «Кнопки» отображает варианты активных и неактивных кнопок, отличающихся размерами и расцветкой, чье поведение также различно при наведении на них указателя.
Раздел «Элементы» содержит примеры внешнего вида ярлыков (Labels) – иконок, содержащих исчерпывающую информацию, например, об участии предложения в действующей акции или отношение товара к хитам продаж.
Здесь же вы можете ознакомиться с отображением всплывающей подсказки, призванной при наведении указателя раскрыть посетителю значения используемых в статье терминов или внести некоторые уточнения.
Пример внутренних вкладок, используемых для улучшения организации предоставляемых пользователю сведений, демонстрирует оформление активных и неактивных вкладок, и поведение страницы при переключении с одной вкладки на другую.
Помимо прочего в этом разделе показаны способы представления аккордеона и его поведения при разворачивании скрытого по умолчанию варианта/полного списка. Функциональной особенностью этого элемента является возможность выбора посетителем какую информацию необходимо раскрыть более подробно, а какая представляется ему излишней.
Один из вариантов аккордеона используется на странице «Вакансии» в решении Аспро: Digital-компания при выборе соответствующей темы оформления раздела.
Ниже расположены примеры оформления предупреждений, шкалы прогресса, формы обратной связи.
Размеры навигационной панели по страницам раздела представлены в 3х вариантах.
Присутствуют дополнительные средства визуального оформления текстовых блоков.
Также в поставку включены элементы для работы с изображениями – Carousel, Fancybox и рамки для миниатюрных изображений.
Содержание главы:
назадДля веб-разработчиков Использование библиотеки UI-элементоввперед
Использование библиотеки UI-элементов
В этом уроке мы расскажем и покажем наглядно, как можно использовать UI элементы из библиотеки, включенной в поставку решения, а также как пользоваться возможностями верстки, вставлять иконки, кнопки и элементы оформления на сайт.
Внимание! Для успешной работы с html-кодом понадобятся хотя бы минимальные знания тегов и принципов записи. Если возникают сомнения или нужно попрактиковаться, вы можете смело экспериментировать с версткой на тестовой странице. Изменение html-кода может испортить верстку отдельной страницы, но не сломает весь сайт.
Представленные на демо-сайте UI элементы являются html-кодом, который вы можете скопировать и вставить в нужное место на странице сайта. В качестве примера добавим на сайт элемент «Шестеренки» и заголовки разного размера.
Перейдите на нужную страницу сайта, где вы хотите разместить элементы, активируйте режим правки и откройте страницу для редактирования. Переключитесь на совмещенный режим отображения, чтобы было видно одновременно и html-код, и внешний вид содержимого.
Откройте на вашем сайте раздел с библиотекой UI-элементов, перейдите на страницу с нужным содержимым, войдите в режим редактирования и также переключитесь в нем на совмещенный режим отображения.
Скопируйте код интересующих вас элементов и вставьте на странице своего сайта.
В нашем примере скопирован код заголовка и код элемента «Шестеренки». Вы можете вносить изменения в код – например, убрать тестовый текст под заголовком или поменять подпись под шестеренками.
После сохранения изменений на странице отображаются нужные элементы:
Важно! Для Аспро: Максимум, начиная с версии 1.6.1, чтобы работали иконки, нужно дополнительно подключить библиотеку иконок font awesome. Подключение производится на той странице, где они будут отображаться. Для этого вставьте код CJSCore::Init(‘aspro_font_awesome’) на странице.
Для Аспро: Корпоративный сайт 3.0 код отличается: CJSCore::Init(‘aspro_font-awesome’).
Подключение библиотеки на Аспро: Лайтшоп
Для десктопной версии Аспро: Лайтшоп вставьте следующий код: \Aspro\Lite\Functions\Extensions::init( БИБЛИОТЕКА);
А для мобильной версии: \Aspro\Lite\Functions\ExtensionsMobile::init(БИБЛИОТЕКА);
Чтобы найти все доступные библиотеки, перейдите в административную часть сайта. Выберите Контент (1) → Структура сайта (2) → Файлы и папки (3). Вставьте следующий путь в поле:
— для десктопной версии: /bitrix/modules/aspro.lite/lib/functions/Extensions.php
— для мобильной версии: /bitrix/modules/aspro.lite/lib/functions/ExtensionsMobile.php
Доступные библиотеки находятся в массиве $arConfig.
назадГрафические материалы Модификация кода решенийвперед
Модификация кода решений
В этой главе мы опишем общие принципы кастомизации решений. Готовые сайты созданы на новой технологической платформе и открывают новые возможности для доработки и развития функционала.
Модифицируйте элементы сайта быстро и без лишних трат благодаря улучшенной архитектуре.
Внимание! Информация, представленная в этой главе, носит рекомендательный характер и предназначена для программистов, владеющих навыками разработки на 1С-Битрикс. Мы не оказываем консультации по разработке и не несем ответственности за последствия изменения кода шаблона. Инструкция подразумевает, что вы сможете выполнить работу с кодом самостоятельно.
Мы настоятельно рекомендуем придерживаться наших рекомендаций. Ошибки, возникшие из-за некорректных действий, устраняются платно.
Если вы не разработчик и хотите доработать решение под ваш проект – например, изменить внешний вид блоков, разделов, элементов или добавить новый функционал, пожалуйста, свяжитесь с нами.
Содержание главы:
назадИспользование библиотеки UI-элементов Общие рекомендациивперед
Общие рекомендации
Для модификации предусмотрены отдельные файлы, которые вы можете редактировать по своему усмотрению и затем подключать как свои шаблоны. Внесенные изменения не будут затираться при обновлениях решения – больше никаких конфликтов функционала!
Внимание! При установке шаблона в режиме многосайтовости новые custom файлы затрут ваши файлы. Чтобы не сталкиваться с этой ситуацией, необходимо переименовать ваши custom файлы и провести установку. Тогда новые файлы не будут их затирать. Затем необходимо переименовать ваши файлы обратно.
Алгоритм:
- Подключите шаблон с пометкой custom в настройках модуля решения или настройках компонента.
- На соответствующей странице выведется подсказка – путь к файлу, в который необходимо вносить изменения.
- Внесите изменения в указанный файл. Для удобства можно использовать код существующих шаблонов.
По этому алгоритму вы можете легко и быстро редактировать код практически любых элементов сайта – от шапки до детальной страницы блога или товара, включая карточку быстрого просмотра. При этом у вас сохранится возможность обновлять платформу и решение, пользоваться услугами стандартной бесплатной поддержки от Аспро.
Обратите внимание, что по описанному алгоритму, без потери обновлений и поддержки, модифицируются составляющие части комплексных компонентов.
Например, вы можете редактировать код шаблона детальной страницы или списка, но не можете сделать это для комплексных компонентов «Каталог» и «Новости». Если вам необходимо изменить шаблоны комплексных компонентов, мы рекомендуем проводить работы на копии шаблона и после каждого обновления вручную синхронизировать файлы. В этом случае решение снимается со стандартной поддержки.
Также мы рекомендуем по возможности воздержаться от кастомизации следующих шаблонов:
- корзина
- оформление заказа
- персональный раздел покупателя D7.
Для этих элементов в наших решениях используются стандартные шаблоны от 1С-Битрикс, которые регулярно обновляются. Их изменение подразумевает, что после каждого обновления платформы вам либо придется вручную синхронизировать файлы, либо отказаться от обновлений.
назадМодификация кода решений Подключение шаблона custom через модуль настроеквперед
Подключение шаблона custom через модуль настроек
Авторизуйтесь и перейдите в Центр управления Аспро → Настройки.
В списке настроек найдите шаблон, который хотите модифицировать – например, тип главной страницы. В выпадающем списке выберите вариант с отметкой custom и подключите его, нажав кнопку «Применить».
Таким способом вы можете подключить шаблоны для модификации следующих элементов:
- Боковое меню
- Тип поиска
- Оформление заголовка и хлебных крошек
- Тип главной страницы
- Фиксированная шапка
- Варианты шапок
- Использовать быстрый просмотр товаров
- Детальная страница каталога
- Контакты
- Блог
- Проекты
- Новости
- Компания \ Наши сотрудники
- Компания \ Бренды
- Компания \ Бренды - детальная
- Компания \ Вакансии
- Компания \ Лицензии
- Футер
- Мобильная шапка
- Тип мобильного меню
- Способ отображения мобильного меню.
После того, как вы нажмете кнопку «Применить», шаблон для кастомизации подключится, а на месте расположения элемента будет выведена подсказка с указанием пути к файлу, куда нужно вносить изменения.
Для примера подключим шаблон для кастомизации в настройках «Оформление заголовка и хлебных крошек».
Перейдем в публичную часть сайта. Блок, где располагается этот элемент, будет выглядеть так:
Строчка /var/www/try/data/www/next.aspro-try.ru/bitrix/templates/aspro_next/page_blocks/page_title_custom.php является подсказкой, которая указывает полный путь к файлу для кастомизации.
Вернитесь в административную часть и найдите нужный файл.
Выберите пункт «Редактировать как PHP». Внесите необходимые изменения и сохраните результат.
Содержание главы:
назадОбщие рекомендации Кастомизация главной страницывперед
Кастомизация главной страницы
Процесс кастомизации шаблона главной страницы незначительно отличается от общего алгоритма, описанного в предыдущей главе.
В Центре управления Аспро найдите настройку «Тип главной страницы». В выпадающем списке выберите вариант custom и нажмите кнопку «Применить».
Затем перейдите в Рабочий стол → Контент → Структура сайта → Файлы и папки. В корне расположен кастомный файл (1) и шаблонные (2).
Из файлов шаблонов (2) в карточку (1) перенесите нужные вам элементы кода. Чтобы открыть файл, кликните на «гамбургер» и выберите «Редактировать как PHP».
При копировании кода обязательно в начале перенесите в файл indexblocks_custom.php строку:
Далее скопируйте нужные блоки. Каждый из них должен начинаться и заканчиваться строками:
- IncludeComponent(
- );?>
Нужно помнить, что расположение блоков главной зависит о того, в каком порядке вставлен код каждого элемента в файле indexblocks_custom.php.
Сохраните изменения. Кастомизация завершена!
назадПодключение шаблона custom через модуль настроек Подключение шаблона custom через настройки компонентоввперед
Подключение шаблона custom через настройки компонентов
С помощью этого способа подключаются шаблоны custom для списков и детальных страниц. Посмотрим, как это делается, на примере страницы списка для блога.
В публичной части сайта перейдите в блог. Вызовите окно настроек параметров компонента.
Найдите раздел «Основные параметры». Подключить custom можно для 2 шаблонов:
- Шаблон страницы блока списка элементов
- Шаблон страницы блока детальной страницы.
Подключим один из них – например, шаблон custom для страницы списка. В публичной части вместо списка элементов выведется подсказка – путь к файлу, в который необходимо вносить изменения.
В нашем случае он выглядит так:
/var/www/try/data/www/next.aspro-try.ru/bitrix/templates/aspro_next/components/bitrix/news/blog/page_blocks/list_elements_custom.php
Далее следуйте инструкции, приведенной в главе «Подключение шаблона custom через модуль настроек».
- Найдите файл list_elements_custom.php в структуре сайта.
- Отредактируйте его.
- Сохраните изменения.
Аналогичным образом можно изменить детальную страницу и страницу списка каталога товаров. В этом случае мы можем подключить шаблон custom для:
- шаблона страницы блока списка разделов
- шаблона страницы блока списка элементов
- шаблона страницы блока детальной страницы.
назадКастомизация главной страницы Модификация списка элементов каталогавперед
Модификация списка элементов каталога
В этом уроке приводятся рекомендации по модификации кода элементов каталога – страницы списка и быстрого просмотра товаров.
Страница списка элементов
Быстрый просмотр товаров
Для того, чтобы модифицировать эти элементы, перейдите в настройки компонента каталога. Найдите параметр «Шаблон страницы блока». Из выпадающего списка выберите list_elements_custom и нажмите кнопку «Сохранить». На странице списка товаров будет выведен путь к файлу для редактирования.
Перейдите в структуру сайта /bitrix/templates/aspro_next/components/bitrix/catalog/main. Найдите папку page_blocks. В ней содержатся файлы, которые можно редактировать без потери обновлений и поддержки.
Файлы с пометкой custom предназначены для внесения изменений:
- element_custom.php – для модификации страницы элемента
- fast_view_custom.php – для модификации быстрого просмотра товаров
- list_elements_custom.php – файл для модификации списка элементов
- sections_custom.php – для модификации компонента списка разделов.
Внимание! Чтобы подключить файл custom для быстрого просмотра товара, в настройках Центра управления найдите параметр «Использовать быстрый просмотр товаров». В выпадающем списке подключите fast_view_custom.
Обратите внимание: изначально файлы для кастомизации будут пустыми. Добавьте или скопируйте из существующих файлов содержимое (нужные компоненты и прочее) и отредактируйте код по своему усмотрению.
Название файлов, откуда вы можете скопировать код для редактирования:
- element_1.php – детальная страница с табами
- element_2.php – детальная страница без табов
- fast_view_1.php – быстрый просмотр
- list_elements_1.php – шаблон страницы блока списка элементов
- sections_1.php – шаблон страницы блока списка разделов.
Укажите в компонентах модифицированных шаблонов (*_custom.php) нужные вам компоненты для bitrix:catalog.section (их необходимо предварительно создать на предыдущих шагах). Пример:
Что получится в итоге:
-
Шаблон каталога (main) не кастомизирован полностью
-
Для шаблонов каталога подключены файлы, которые содержат измененные компоненты – в том числе и быстрый просмотр товаров.
назадПодключение шаблона custom через настройки компонентов Отключение плагина ikSelectвперед
Отключение плагина ikSelect
В решении Аспро: Next, начиная с версии 1.8.11, появилась возможность отключить плагин ikSelect. Этот плагин предназначен для стилизации выпадающих списков, однако некоторые модули могут конфликтовать с ним.
Выпадающий список с подключенным плагином ikSelect — есть функция прокрутки.
Выпадающий список с отключенным плагином ikSelect.
Рассмотрим отключение плагина на примере со страницей «Контакты». В административной части сайта перейдите в Контент (1) → Структура сайта (2) → Файлы и папки (3) → contacts (4).
Найдите файл page_contacts_5.php, нажмите на «Гамбургер» напротив него и выберите «Редактировать как PHP».
В окне редактирования после первой строки добавьте следующий код: [code]
[/code]
Сохраните изменения.
назадМодификация списка элементов каталога Кастомизация цены, кнопок «Купить» и «Наличие»вперед
Кастомизация цены, кнопок «Купить» и «Наличие»
В решениях Аспро: Next, Аспро: Максимум, Аспро: Оптимус и Аспро: Шины и диски 2.0 вы можете модифицировать вывод цены, кнопку «Купить» и метку «В наличии» при помощи специальных событий. При этом изменения не будут затираться при обновлении решения.
Названия событий вы можете найти в файле include.php.
- Адрес файла для решения Аспро: Оптимус
Рабочий стол → Контент → Структура сайта → Файлы и папки → bitrix → modules → aspro.optimus → include.php
- Адрес файла для решения Аспро: Next
Рабочий стол → Контент → Структура сайта → Файлы и папки → bitrix → modules → aspro.next → include.php
- Адрес файла для решения Аспро: Шины и диски 2.0
Рабочий стол → Контент → Структура сайта → Файлы и папки → bitrix → modules → aspro.tires2 → include.php
- Адрес файла для решения Аспро: Максимум
Рабочий стол → Контент → Структура сайта → Файлы и папки → bitrix → modules → aspro.max → include.php
Названия представлены в виде закомментированных областей:
Файл с примерами событий находится тут:
-
\bitrix\modules\aspro.optimus\lib\functions\CAsproOptimus.php (для Аспро: Оптимус)
-
\bitrix\modules\aspro.next\lib\functions\CAsproNext.php (для Аспро: Next).
-
\bitrix\modules\aspro.tires2\lib\functions\CAsproTires2.php (для Аспро: Шины и диски 2.0).
-
\bitrix\modules\aspro.max\lib\functions\CAsproMax.php (для Максимум)
В структуре сайта также предусмотрен специальный файл для вашего кода, в котором вы сможете работать с обработчиками из файла.
- Путь к файлу для Аспро: Оптимус
\bitrix\modules\aspro.optimus\lib\functions\CAsproOptimusCustom.php
- Путь к файлу для Аспро: Next
\bitrix\modules\aspro.next\lib\functions\CAsproNextCustom.php
- Путь к файлу для Аспро: Шины и диски 2.0
\bitrix\modules\aspro.tires2\lib\functions\CAsproTires2Custom.php
- Путь к файлу для Аспро: Максимум
\bitrix\modules\aspro.max\lib\functions\CAsproMaxCustom.php
назадОтключение плагина ikSelect Поддержка PWA вперед
Поддержка PWA
Прогрессивное веб-приложение (PWA) — технология веб-разработки для управления сайтом через приложение на мобильных устройствах:
- Устанавливается на смартфоны и планшеты.
- Доставляет push-уведомления.
Для того, чтобы добавить сайт как веб-приложение, пользователь должен открыть сайт в браузере на мобильном устройстве. Затем перейти в настройки для страницы.
Затем нужно кликнуть поле «Добавить на главный экран».
Затем пользователь может изменить название приложения и добавить на главный экран.
Приложение на главном экране.
Для реализации PWA сайт должен соответствовать требованиям:
- Доступ по протоколу https.
- Адаптивность.
- Отдельный URL для каждой страницы.
Чтобы перейти в настройки приложения, в административной части сайта перейдите в Аспро → Аспро: Next → Веб-приложение.
- Активируйте технологию (1);
- По умолчанию создается файл с названием «manifest.json». Если такой файл у вас уже где-то используется, измените название в этом поле (2) ;
- Название предлагается по умолчанию при добавлении на рабочий стол (3) ;
- Сокращенное название — короткое удобочитаемое имя приложения. Предназначено для использования там, где недостаточно места для отображения полного имени приложения**(4)** ;
- Укажите начальную страницу приложения, по умолчанию задана главная страница сайта. При запуске приложения будет открываться указанная страница, а не та страница, которую добавляли на рабочий стол**(5)** ;
- Выберите режим отображения приложения (6) :
browser — приложение открывается в обычной вкладке браузера или новом окне в зависимости от браузера и платформы.
standalone — приложение будет выглядеть и ощущаться, как отдельное приложение.
fullscreen — используется все доступное пространство экрана.
Для того чтобы изменился режим отображения, необходимо переустановить приложение.
- Измените цвет фона**(7)** и темы (8) при необходимости. Функция актуальна только для Android;
- По умолчанию на мобильных устройствах будет подгружаться фавиконка для обозначения приложения. Также вы можете загрузить иконку в различных размерах (9). Операционная система сама будет подбирать оптимальный размер под конкретное мобильное устройство.
Сохраните изменения. После сохранения настроек будет создан файл манифеста в корне сайта. Если поле «Подключать манифест для сайта» активно, то в теге сайта будет прописана ссылка на файл.
назадКастомизация цены, кнопок «Купить» и «Наличие» Требования к графическим материаламвперед
Требования к графическим материалам
В этом уроке рассмотрим требования к графическим материалам, которые понадобятся для запуска интернет-магазина на основе Аспро: Шины и диски 2.0. К ним относятся баннеры на главной странице, тизеры, картинки для новостей, акций и т.д.
Фавикон
Фавикон — это небольшая картинка, которая отображается в сниппете в результатах поиска, рядом с адресом сайта в адресной строке браузера и около названия сайта в избранном или закладках браузера.
Рекомендации от поисковой системы Яндекс
Размер фавикон: 120x120 px (рекомендуемый), 16x16 px или 32x32 px.
Формат фавикон: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP.
Совет: Используйте размер 120x120 px или формат SVG, чтобы на логотип сайта выглядел более четким и заметным.
Главная страница
Логотип
**
Логотип располагается в левом верхнем углу.
Требования к логотипу: файл .jpg или .png с разрешением 190 x 40 px.
Главный баннер
- Тип главной страницы №1
При таком типе баннер со слайдером располагается во всю ширину экрана.
Требования к основному баннеру: файл .jpg или .png с разрешением 1920 x 450 px.
- Тип главной страницы № 2
Здесь располагаются основной баннер со слайдером и 2 дополнительных маленьких баннера. На основном баннере можно разместить неограниченное количество слайдов, которые будут автоматически меняться через установленные промежутки времени.
В зависимости от выбранной ширины сайта размер баннера может меняться от 930 до 1314 px. Вы можете для каждой ширины сайта указывать свою ширину баннера, но мы рекомендуем выбирать ширину 1920 px, тогда края сами обрезаются под нужную.
Требования к основному баннеру: файл .jpg или .png с разрешением 1920 x 450 px (c рекомендуемой безопасной зоной в 900 px по центру).
Размер элемента на баннер – 450x450 рx.
Требования к дополнительным баннерам: файл jpg, png, gif. Соотношение сторон 3:2.
Размер картинок должен быть:
733 x 486 px – при ширине сайта 1200x1344x1500 px;
834 х 555 px – при ширине сайта 1700 px.
Узкий баннер на главной
**
Требования к узкому баннеру на главной: файл .jpg или .png с разрешением 1920x150 px (c рекомендуемой безопасной зоной в 900 px по центру).
Маленькие баннеры на главной
Требования к 3 маленьким баннерам: файл .jpg или .png с разрешением 530x180 px.
Баннеры для акций
Блок располагается на главной странице. При клике на элемент вы попадаете на детальную страницу акции.
Требования к формату файла .jpg или .png с разрешением 400x266 px. Соотношение сторон 3:2.
Баннеры из блога (большой и малые)
Блок располагается на главной странице. При клике на элемент вы попадаете на детальную страницу новости.
Эти баннеры выстраиваются в ровную плитку на любой ширине окна. Они бывают двух видов: большие и маленькие.
В решении Аспро: Шины и диски 2.0 есть возможность регулировать ширину страницы. Чтобы изображения в плавающих баннерах помещались полностью, необходимо использовать определенные размеры изображений для каждого разрешения.
Допустимые форматы изображений – jpg и png. Соотношение сторон 3:2.
Размер картинок должен быть:
733x486 px – при ширине сайта 1200x1344x1500 px;
834х555 px – при ширине сайта 1700 px.
В административной части перейдите в Аспро: Шины и диски 2.0 → Настройки → Общие.
Задайте ширину сайта и загрузите подходящий размер баннера.
Информационный блок о компании
Допустимые форматы изображений – jpg, png, gif.
Размер картинки может быть любой, но в пределах 222x244 px.
Услуги на главной
Допустимые форматы изображений – jpg, png. Соотношение сторон 3:2.
Размер картинок должен быть:
401x267 px – при ширине сайта 1700 px;
398x265 px – 1500x1344x1200 px.
Иконки в фильтре при 2 типе главной страницы
Допустимые форматы изображений – svg, jpg, png.
Оптимальный размер картинок – 50x50 px.
Тизеры преимуществ
В блоке тизеров на главной странице или в разделах сайта вы можете лаконично представить основные преимущества вашей компании или конкретной услуги. Тизер состоит из иконки и краткого описания.
Допустимые форматы изображений – svg, jpg, png.
Оптимальный размер картинок – 50x50 px.
Логотипы партнеров и производителей
-
Для логотипов в разделе «Наши партнеры» и «Производители» используйте изображения с расширением jpg, png.
-
Максимальный размер картинок – 150х90 px.
-
Допустимо размещение изображения меньшего размера.
Баннеры детальных страниц новостей и акций
Баннеры в детальных страницах разделов
Сюда относятся, например, страницы акций или лендингов. Баннер на таких страницах состоит из фонового баннера и активной картинки.
Требования к фоновому баннеру: файл .jpg или .png. с разрешением 1920x450 px.
Требования к активной картинке: файл .jpg или .png. с разрешением 555x450 px.
Баннеры детальных страниц новостей и акций
Требования к баннерам детальных страниц новостей и акций: файл .jpg или .png. с разрешением 1314x360 px.
Баннеры в колонке
Требования к баннерам: файл .jpg или .png с разрешением 530x390 px.
Фото товара для карточки
Основное фото товара на его странице.
Требования к фото для карточки товара: файл .jpg или .png с разрешением не менее 500х500 px. Оптимально 1000x1000 px. Изображение обязательно должно быть квадратным.
Фото товара для раздела каталога
Требования к фото для раздела каталога: файл .jpg или .png с разрешением не менее 120x120 px. Изображение обязательно должно быть квадратным.
назадПоддержка PWA Установка модулей сторонних разработчиковвперед
Установка модулей сторонних разработчиков
Решения «Аспро» поддерживают стандартный набор модулей и компонентов 1С-Битрикс.
Мы не тестируем модули и компоненты сторонних разработчиков, поэтому не можем гарантировать совместимость с решениями «Аспро» и 100% работоспособность на готовом сайте. Для того, чтобы установить такое решение, рекомендуем обратиться к сертифицированным партнерам 1С-Битрикс.
Внимание! Если вы собираетесь установить модуль или компонент стороннего разработчика, помните: вы делаете это на свой страх и риск. Любые вмешательства такого рода приравниваются к изменению кода и могут привести к нарушению логики работы решения, изменениям верстки и программным ошибкам. Перед тем, как устанавливать модуль, убедитесь, что вы обладаете необходимыми навыками для внесения изменений в решение и обязательно выполните резервное копирование.
назадТребования к графическим материалам
Полная версия курса: Аспро: Шины и диски 2.0 в базе знаний Аспро. Вопросы по внедрению, настройке или обновлению решения — свяжитесь со мной.
Работаю удалённо — цены и условия для вашего города: