Установка Google Tag Manager на веб-сайт

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

В этой статье рассмотрим процесс установки GTM на системы управления сайтом [CMS], популярные конструкторы сайтов [Tilda, Wix, Joomla, Shopify] и другие.



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

Если вашей платформы нет в списке и вам нужна помощь по установке диспетчера тегов Google, обращайтесь за помощью!

Перед началом работ у вас должны быть актуальные доступы.

Создаем Gooogle Tag Manager

  1. У вас должен быть аккаунт Google
  2. Открываем сайт https://tagmanager.google.com/
  3. Затем нажимаем «Создать аккаунт»
Создать аккаунт в Google Tag Manager
  1. Заполняем «Название аккаунта», например название вашего бизнеса или сайта
  2. Заполняем «Название контейнера», ваш адрес сайта без htts:// и www
  3. Целевая платформа «Веб-сайт» и нажимаем «Создать»
Заполняем данные о вашей компании в Google Tag Manager
  1. Затем необходимо принять «Условия использования Google Менеджера тегов»
  2. Копируем код для раздела «head» и «body»
Установка Google Tag Manager, копируем код для установки

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

Коды для вставки в head и body вы всегда можете найти нажав на id вашего контейнера (см. скрин ниже)
Код для установки GTM на сайт

Теперь необходимо выбрать свою платформу или конструктор сайтов из оглавления.

Установка на WordPress

Этот метод универсален. Подойдет при использование любой темы Flatsome, Divi, Avada. При использование Elementor, Brizy, Divi Builder, Crockoblock, Visual Composer.

  1. Заходим в панель администратора WordPress по адресу: https://вашсайт.ru/wp-admin
Страница авторизации WordPress

Если не получается открыть страницу авторизации по адресу /wp-admin то скорее всего его изменили. Стоит обратиться к вашему программисту или хостинг провайдеру для уточнения актуального адреса. Также можете написать мне$.
  1. Находим раздел плагины и выбираем «добавить новый»
Панель администратора WordPress, пункт добавления плагина
  1. В поиске набираем «LuckyWP Scripts Control» и нажимаем «Установить»
Установка плагина на сайт WordPress
  1. Активируем плагин
Активация плагина LuckyWP Scripts Control
  1. Слева находим «настройки > скрипты»
Настройки LuckyWP Scripts Control пункт скрипты
  1. Вставляем скрипт в раздел «<head>» из пункта «Вставьте этот фрагмент в раздел <head> кода страницы как можно ближе к началу:»
  2. Вставляем скрипт в раздел «<body>» из пункта «Также вставьте сразу после открывающего тега <body> следующий фрагмент:»
Правильная установка Google Tag Manager
Переносим код, заголовок не обязателен
Переносим код заголовок не обязателен и жмём «Добавить»
Установлен GTM через LuckyWP Scripts

Установка на конструктор сайтов Tilda

P.S. Если у вас ещё нет аккаунта в конструкторе Tilda, получите 14 дней бесплатного использования. Только если у вас ранее не было аккаунта.

  1. Выбираем сайт на который будем устанавливать Google Tag Manager
Страница tilda с сайтами
Страница в Tilda с вашими сайтами
  1. Выбираем пункт «Настройки сайта»
Настройки сайта Tilda
Настройки сайта Tilda
  1. В левом меню находим пункт «Аналитика»
Пункт «Аналитика»
  1. Листаем до пункта «Google Tag Manager ID» и вписываем GTM ID вида «GTM-XXXXXX»
Прописываем Google Tag Manager ID в Tilda
  1. Сохраняем изменения
Кнопка сохранения изменений справа сверху

Пример установленного GTM в Tilda

Переносим GTM ID

Установка на конструктор сайтов Flexbe

P.S. Если у вас ещё нет аккаунта в конструкторе Flexbe, получите пробный бесплатный период. Только если у вас ранее не было аккаунта.

  1. Выбираем сайт в конструкторе Flexbe, на который будем устанавливать Google Tag Manager
Сайты на Flexbe
  1. Выбираем раздел «настройки»
Сайты на Flexbe, раздел настройки
  1. Выбираем пункт «Аналитика»
Раздел Аналитика в конструкторе
  1. Выбираем Google Tag Manager
Раздел аналитика в Flexbe
  1. Переносим Google Tag Manager id на flexbe
Пример как нужно перенести GTM id
  1. Нажимаем «Подключить»

На этом установка Google Tag Manager на сайт с конструктором Flexbe закончена.

Установка на конструктор сайтов Wix

Важно: Установить Google Tag Manger на Wix можно только на платных тарифе.

  1. Открываем панель управления сайтом Wix
Дашборд конструктора сайтов Wix
  1. Переходим в SEO > Интеграции
В пункте «SEO и Маркетинг» находиться раздел «Интеграции»
  1. Далее выбираем Google Tag Manager > Подключить
Доступные инструменты Wix для подключения
  1. Нажимаем «Добавить диспетчер тегов Google»
Добавление диспетчера тегов Google
  1. Пропишите ID контейнера Google Tag Manager и сохраните.

Установка на сайт без CMS

Установить код нужно будет на все страны сайта. Если идет речь про Landing Page с одной странице то вам нужно будет разместить код только на одной странице. Если у вас многостраничный сайт на собственной платформе или без неё, также разместить нужно на все страницы.

В данной инструкции рассмотрим процесс установки через файловый менеджер на хостинге Beget (хороший хостинг по доступной цене + 30 дней бесплатно, пользуюсь сам).

Есть некоторые хостинг провайдеры, у которых нет файлового менеджера. В этом случае все действия можно выполнить подключившись по FTP через Filezilla. Либо можно перейти на хостинг, который рекомендовал выше, они перенесут ваши сайты бесплатно, а затем можно действовать далее по инструкции.

  1. Открываем панель управления сайтом и выбираем файловые менеджер
Панель управления хостингом Beget
  1. В файловом менеджере открываем сайт на который будем ставить GTM
  1. Открываем файл index.html (также возможны index.php)
  2. Прописываем в <head>, <body> код для данных разделов
Правильная установка кода Google tag manager на сайт без CMS

ЧАВО

А как установить Google Tag Manger на другую платформу или конструктор?

Процесс установки GTM на другие платформу идентичны, как в примерах выше. Но если у вас не получается смело пишите.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Похожие посты