Как сделать рабочий тег
Диспетчер тегов упрощает интеграцию сайта со сторонними сервисами и службами аналитики. Из этой статьи вы узнаете, как установить и использовать Google Tag Manager (GTM).
Что такое Google Tag Manager
Диспетчер тегов — сервис, который упрощает использование кодов сторонних служб на сайтах или в приложениях. Благодаря Tag Manager вебмастеру достаточно один раз добавить на сайт контейнер или мастер-код. После этого код других служб можно добавлять через интерфейс диспетчера.
Можно ли обойтись без GTM? Да, если вы используете одну или две сторонних службы, диспетчером тегов можно не пользоваться. А если вы постоянно добавляете на сайт коды разных сервисов, Tag Manager упростит работу с ресурсом.
Настройка Google Tag Manager
Чтобы использовать диспетчер тегов, добавьте на сайт контейнер. Создайте пользовательские или используйте встроенные переменные. Настройте условия активации или триггеры и добавьте в контейнер теги. Подробные инструкции ниже.
Как добавить на сайт контейнер диспетчера тегов
Чтобы добавить на сайт контейнер Google Tag Manager, авторизуйтесь на странице сервиса и создайте новый аккаунт. В настройках контейнера укажите, где он будет использоваться.
Скопируйте код и вставьте его на сайт. Если вы работаете с ресурсом под управлением CMS WordPress, воспользуйтесь плагинами для вставки кода, например, Head, Footer and Post Injections. Первую часть кода вставьте в хедер как можно ближе к открывающему тегу, а вторую в тело страницы сразу после тега .
Сохраните изменения. Публиковать контейнер имеет смысл после добавления первого тега.
Как использовать переменные Google Tag Manager
Активация тегов в диспетчере происходит, когда значение триггера совпадает с заданной пользователем переменной. Например, встроенная переменная Click Text всегда содержит какой-либо текст, а переменная Click URL — URL. В данном случае триггер активируется, если значение переменной совпадает с заданными пользователем параметрами: кликом по элементу с указанным текстом или URL.
Для управления переменными выберите соответствующий раздел меню.
Пользователям доступны следующие типы встроенных переменных:
После включения переменной она становится доступной в фильтре при создании триггера.
Как использовать триггеры Google Tag Manager
На странице настройки триггера укажите название и выберите тип.
В GTM доступны следующие типы триггеров:
После выбора типа триггера необходимо настроить условия его активации: выбрать переменную и указать ее значение. Например, чтобы отслеживать переходы по конкретной ссылке, выберите тип переменной Click URL и укажите значение URL.
Как работают теги в GTM
Чтобы отслеживать события или использовать внешние службы, необходимо создать тег и поместить его в контейнер. Google Tag Manager поддерживает несколько десятков встроенных тегов сторонних сервисов и служб Google. Также вы можете добавлять пользовательские теги.
Если на сайте реализованы AMP, с помощью диспетчера тегов можно подключить ускоренные страницы к службам аналитики. Если ресурс работает на WordPress, установите надстройку AMP for WordPress. В разделе Analytics включите отслеживание с помощью Tag Manager, укажите ID контейнера, тип службы аналитики и идентификатор аккаунта в Google Analytics.
Таким же способом сайт можно интегрировать с другими сервисами.
При необходимости указываете дополнительные настройки тегов. В расширенных настройках выбирайте приоритет и порядок активации тега. Игнорируйте расширенные настройки, если порядок активации тегов не имеет значения.
Ниже вы найдете рекомендации по практическому использованию Google Tag Manager.
Какие задачи можно решать с помощью диспетчера тегов Google
Благодаря контейнеру тегов GTM вам больше не нужно добавлять на сайт код, когда вы хотите расширить функциональность ресурса или подключить его к новому сервису. Вот как можно использовать это на практике.
Добавьте на сайт теги ретаргетинга и ремаркетинга
Таким же способом добавьте теги ремаркетинга и ретаргетинга других социальных сетей и рекламных систем.
Подтверждайте права на сайт с помощью Google Tag Manager
При необходимости аналогичным способом подтвердите все версии сайта.
Добавьте кнопки шеринга на изображения
Проверьте корректность работы кнопок шеринга.
Отслеживайте внутренние переходы на сайте
Внешние переходы удобно отслеживать с помощью UTM-меток. А внутренние клики лучше мониторить с помощью событий в Google Analytics.
Отслеживайте переходы по всем внешним ссылкам
Отслеживайте переходы по конкретной внешней ссылке
Сохраните триггер. Создайте тег Universal Analytics и опубликуйте его в контейнере.
Уточняйте показатель отказов
В условиях активации триггера укажите URL, на которых должен срабатывать таймер.
Создайте и опубликуйте в контейнере новый тег Universal Analytics. Таймер будет активироваться каждый раз, когда посетитель будет проводить на указанных вами страницах более 30 секунд.
Если таймер будет работать на всех страницах сайта, вы сможете отслеживать в Google Analytics уточненный показатель отказов. По умолчанию система аналитики считает отказом все посещения, в ходе которых пользователь просматривает одну страницу сайта. После активации таймера сессии продолжительностью более 30 секунд не будут считаться отказами, даже если посетитель просматривает одну страницу.
Отслеживайте взаимодействие с контактной формой
Создайте соответствующий тег Universal Analytics. Сохраните изменения и опубликуйте контейнер. Значение атрибута class формы можно найти в коде страницы.
Отслеживайте клики по социальным кнопкам и виджетам
Добавьте данные в фильтр диспетчера тегов, сохраните изменения. Создайте соответствующий тег Universal Analytics и опубликуйте обновленный контейнер.
Отслеживайте переходы по тексту клика
Эту функцию можно использовать для проверки эффективности CTR элементов ресурса. Представьте, что на сайте есть одинаковые кнопки с разным призывом к действию. Чтобы определить, какие кнопки нажимают чаще, активируйте переменную Click Text.
Создайте и опубликуйте тег Google Analytics.
Отслеживайте конкретные источники внешнего трафика
Используйте GTM для внедрения микроразметки
Используйте эту рекомендацию, если внедряете на сайте универсальные типы микроразметки. Они содержат одинаковые данные независимо от страницы сайта. Например, внедрите тип разметки Organization.
Отслеживайте источники трафика с помощью событий Google Analytics
Эту функцию можно использовать, чтобы быстро оценить количество источники трафика и количество посещений с того или иного сайта.
Это далеко не все возможности диспетчера тегов. Предложенные примеры помогут освоить принцип работы GTM. После этого вы сможете самостоятельно выбирать параметры для мониторинга с помощью служб аналитики и добавлять на сайт коды интернет-сервисов.
Находка для нетехнических специалистов
Именно так можно коротко охарактеризовать Google Tag Manager. Этот инструмент избавляет владельца сайта от трудностей при интеграции со сторонними сервисами. Достаточно один раз установить контейнер, чтобы забыть о необходимости вставлять код на сайт вручную.
Диспетчер тегов упрощает мониторинг и аналитику эффективности сайта. С помощью набора встроенных и пользовательских переменных вы можете быстро настроить отслеживание практически любых событий на сайте.
HTML — язык разметки, который используется в большинстве веб-страниц. Браузер интерпретирует его значения (теги) и отображает текст и элементы так, как их представляли разработчики. Без стандартизированного языка страницы сайта превращались бы в мешанину из букв, картинок и форм, которой невозможно нормально пользоваться.
Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.
HTML позволяет форматировать страницы, придавая им необходимый вид. Если такой задачи нет, то знание тегов поможет отредактировать код встраиваемого виджета. Понимая структуру HTML, вы, например, можете быстро изменить размер видео или виджета и другие особенности его отображения.
Базовые теги
— тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.
— показывает браузеру тип документа, сообщает его версию и язык.
— корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.
— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, или
Google Tag Manager (GTM) — это удобный и простой инструмент для управления кодами отслеживания и аналитики: счетчики, пиксели и другие скрипты сторонних систем. Благодаря этому инструменту можно добавлять теги на сайт без вмешательства разработчика. Если точнее, вебмастер один раз добавляет контейнер или мастер-код на сайт, после чего коды и скрипты можно добавлять прямо через веб интерфейс GTM.
Вам не нужно будет ждать, пока разработчик найдет свободное время, чтобы поставить код на сайт. Все можно сделать самостоятельно, и бонусом сэкономить деньги на разработчиках.
Также можно быстрее внедрять необходимые изменения — к примеру, менять настройки аналитики, подключать отслеживание новых форм и кнопок, эффективнее настраивать контекстную рекламу и анализировать трафик.
Преимущества и недостатки Google Tag Manager
Прежде чем использовать инструмент, разберемся, в чем его преимущества в сравнении с традиционным размещением тегов и скриптов.
- Возможность отладить тег до запуска его на сайте . Для этого используется предпросмотр.
- Контроль версий . Вы всегда можете в два клика откатиться к предыдущей версии настроек.
- Асинхронная загрузка тегов . В отличие от аналогов, GTM практически никак не влияет на скорость загрузки сайта.
- Возможность выполнять текстовую подмену на сайте без вмешательства в код . Это кладезь для маркетолога, который теперь может тестировать заголовки и другие текстовые элементы сайта без привлечения разработчика.
Теперь перейдем к недостаткам:
В целом преимуществ у Google Tag Manager больше, чем недостатков. Имеющиеся минусы локальны и не каждый предприниматель и специалист по рекламе с ними сталкивается.
Термины, используемые в GTM
Для начала работы с менеджером тегов необходимо разобраться с терминологией этого сервиса, чтобы понимать, что и как работает. Посмотрите, за что отвечает тот или иной термин в сервисе, и вы быстро поймете его смысл и назначение:
JS-код, точнее небольшой его фрагмент, который выполняется системой. В данном случае JS-код — скрипт, который через GTM устанавливается на сайт. К нему подключают триггер. У GTM имеется большое количество различных тегов, что позволяет выполнять подключение тега к сайту без знания JS
Событие, которое включает работу тега. Обычно триггер содержит какое-то событие: нажатие на кнопку, переход по ссылкам, скролл страницы, заполнение формы
Параметр, для которого передается условие. Например: Click URL (клик по ссылке) или Scroll Direction (прокрутка страницы)
Оболочка для всех тегов на сайте. Отвечает за запуск сторонних сервисов
Установка Google Tag Manager на сайт
Сейчас мы рассмотрим два способа — подходящий для всех, а также специфический способ установить на сайт под управлением WordPress.
Универсальный способ подключения к сайту
Дальше нам нужно зайти на сайт Google Tag Manager, чтобы выполнить первичную настройку. Для регистрации в сервисе вам потребуется почта Gmail. Нажимаем на кнопку Start for free:
Добавляем новый аккаунт:
Указываем название аккаунта: у меня это имя автора блога, на который будет установлен GTM.
Настройка аккаунта: обязательно указываем страну:
При создании контейнера указываем, что у нас веб-сайт
Система предлагает установить код на сайт
Открываем код нужного сайта в редакторе. У вас это может быть редактор хостинга, мне же удобнее пользоваться программой Notepad++. Вставляем первый код как можно ближе к открывающему тегу . Это делается для того, чтобы вы смогли отследить даже пользователей, закрывших сайт до момента его полной загрузки. Вот так выглядит код на сайте:
Первая часть кода устанавливается сразу после тега
Копируем второй код. Его нужно разместить сразу после открывающего тега . Логика тут такая же. Чем быстрее будет прогружаться тег Google Tag Manager, тем более полной будет статистика.
Вторая часть кода после тега
Процесс установки довольно простой, хотя на CMS лучше использовать готовые плагины или модули, потому что так будет надежнее. Сейчас мы рассмотрим установку GTM именно таким способом.
Установка Google Tag Manager на WordPress
Существует несколько способов подключения:
- Установка контейнера в код сайта.
- Установка с помощью плагина или модуля.
Выбор конкретного метода зависит от технических особенностей вашего сайта, а также от используемой CMS. В некоторых случаях вам придется воспользоваться услугами разработчика. Я же рассмотрю установку системы на самой популярной CMS — WordPress. Необязательно лезть в код сайта, можно воспользоваться готовым плагином Google Tag Manager for WordPress.
Перед началом установки лучше продумать, какие теги вам нужны будут, чтобы не метаться в процессе настройки.
Что такое глобальный тег
Традиционный путь установки систем аналитики подразумевает использование глобального тега сайта gtag.js. Такой способ не очень гибкий, потому что все правки придется делать руками непосредственно в коде сайта и устанавливать все сторонние скрипты с помощью разработчика ресурса. Это дополнительные затраты для бизнеса.
Для нового сайта мы рекомендуем сразу использовать Google Tag Manager. Но возникает вопрос: что делать, если на сайте уже стоит глобальный тег? Можно без проблем применять эти два способа одновременно — удалять уже установленный код gtag.js необязательно.
Настройка тега
Плагин для установки
Возвращаемся к административной панели сайта. Напомню, что там начали настройку плагина. На его главной вкладке вставляем скопированный идентификатор. Также проверяем расположение кода контейнера. По умолчанию он размещается в подвале сайта: я советую не изменять эту настройку, так как это обеспечивает максимальную скорость загрузки сайта.
Подключение аккаунта к плагину на сайте
Далее нам понадобится вкладка Integration. Google Tag Manager может интегрироваться с несколькими популярными плагинами, и на этой вкладке мы можем выбрать, с какими именно. У меня установлен плагин Contact Form 7, ставлю галочку в чек-боксе. Если у вас есть другие плагины из списка на вкладке, включите интеграции, это позволит им эффективно взаимодействовать.
Подключаемся к плагину Contact Form 7
Теперь остается только сохранить изменения.
Переходим в панель управления для настройки тега. Первое, что обычно делают — подключают к сайту Google Analytics 4. К сайту из приводимого примера подключен Analytics Universal. О совместном подключении двух аналитик рассказано в статье про настройку GA4. Я же сразу перейду к работе с Tag Manager.
Создаем новый тег
Так выглядит стартовая страница настройки нового тега
Находим идентификатор Google Analytics 4
Открываем вкладку потоки данных
Копируем идентификатор потока данных
Возвращаемся на страницу Tag Manager. Даем название тегу и кликаем на конфигурацию. Открывается окно, где вставляем скопированный из GA4 идентификатор:
Вставляем идентификатор в соответствующее поле тега
Настраиваем триггер для активации настроенного тега
Здесь предлагаются три стандартных триггера. Нам нужно настроить простое отслеживание, поэтому выбираем All Pages:
Так выглядит тег после настройки
Даем название версии и публикуем изменения
Первичная настройка занимает 20–30 минут, причем не требует никаких особенных знаний и навыков. Вам даже может не потребоваться клавиатура, потому что все действия можно выполнить при помощи клавиш мыши. Такой подход значительно расширяет возможности и упрощает жизнь начинающему интернет-маркетологу.
Настройка цели в Google Tag Manager
На моем сайте есть контактная форма, и мне нужно настроить сбор конверсий при ее отправке. Поскольку для создания формы использовался плагин Contact Form 7, это значительно упрощает задачу по настройке тега события.
1 — выбираем вкладку с переменными. 2 — нажимаем кнопку с их настройками.
Я обычно включаю все переменные — мешать они не будут. Исключение составляет группа переменных Error, потому что они редко требуются.
Создаем новый тег
После нажатия на кнопку откроется окно, показанное ниже. Вводим туда URL сайта или страницы и нажимаем на кнопку Connect:
Так мы запускаем предпросмотр
После этого откроется новое окно или вкладка — в зависимости от настроек вашего браузера. Ищем нужную форму, заполняем ее и отправляем:
Вот так выглядит окно предпросмотра
Теперь возвращаемся в панель управления, заходим на вкладку предпросмотра и слева в разделе Summary смотрим, какие события там отразились. Нас интересует событие, которое связано с плагином Contact Form 7: в нашем случае оно было последним (на скриншоте подчеркнуто):
Смотрим на произошедшие на сайте события
Нажимаем на это событие и переходим во вкладку Variables. В этой вкладке можно посмотреть, какие переменные сработали во время события и какие значения они имеют. Нас интересует самое первое событие — event:
Находим подходящее значение переменной
В окне конфигурации называем новый тег так, чтобы вы поняли, что он описывает. Также выбираем тег конфигурации, к которому будет подключаться создаваемое событие. Указываем название события: для удобства я просто скопировал название переменной.
Настраиваем событие в конфигураторе
Создаем новый триггер
Проверка работоспособности тега: все в порядке:
Если все верно, публикуем изменения и при этом не забываем давать версии оригинальное имя. Иногда имеет смысл сделать вообще подробное описание, чтобы знать, что поменяли.
Подключение Google Tag Manager к сервисам Google
Помимо взаимодействия с Google Analytics 4, вам может потребоваться подключение и других сервисов. Чаще всего подключают Universal Analytics и Google Ads.
Связываем Google Tag Manager с Universal Analytics
Выбор тега для Universal Analytics
Выбираем переменную настроек
Заходим в настройки Universal Analytics
Остается настроить триггер. Делается это аналогично работе с GA4: выбираем событие All Pages и дальше настраиваем так же, как выше делали при настройке триггера в GA4. Больше ничего сложного в процессе настройки нет.
Связываем Google Tag Manager с Google Ads
Для связывания с Google Рекламой предлагается два варианта
После выбора типа тега нам нужно настроить тег связывания в конфигураторе тега. Выставляем нужные галочки: так как у меня сайт, достаточно включить только связывание URL на всех страницах. В вашем случае может потребоваться связка доменов, если у вас несколько ресурсов на проекте.
Выставляем настройки как на скриншоте
Далее выполняем настройку тега. Обратите внимание на идентификатор конверсии: он должен соответствовать реальному событию, которое настроено в GTM. К примеру, это может быть просмотр страниц All Pages или клик по ссылке Click URL. Пример настройки события мы показали при работе с отправкой формы Contact Form 7.
Вот такие настройки я выбрал. Вы можете подобрать более подходящие для вас
Последний этап — настройка триггера. Если вы уже выполняли действия, описанные выше, у вас он уже настроен. В этом случае просто выбираем нужный триггер из списка:
Использование связки GTManager и сервисов Google позволяет оптимизировать передачу данных и снижает риск потери важной информации о клиентах.
В частности, можно эффективнее использовать автоматические стратегии Google Ads: система будет более точно определять пользователей, которым имеет смысл показывать рекламу. Если используется GA4, вы сможете настроить показ рекламы людям, которые с большей вероятностью сделают заказ в ближайшую неделю, это тоже обеспечивается с помощью связки аккаунта Google Ads и GTM.
Как подключить сторонний код к Google Tag Manager
Остается только настроить триггер: процедура аналогична той, что мы описывали выше, и в качестве типа триггера мы снова выбираем All Pages. В итоге счетчик будет срабатывать каждый раз, когда человек откроет любую страницу сайта.
Нам нужна настройка пикселей
Настраиваем пиксель во всплывающем окне
Копируем код пикселя
После этого настраиваем триггер. Обычно для пикселя требуется работать на любых страницах, поэтому выбираем All Pages.
Выбираем нужный триггер: это снова All Pages
На этом настройка завершена. Через несколько часов, как только на сайт придет первый посетитель — пиксель заработает в штатном режиме.
Выводы
Гугл тег менеджер — это универсальный и простой в использовании инструмент управления тегами. Все действия по настройке и установке сторонних сервисов просты и понятны: мы наглядно показали это в статье.
Польза для экспертов очевидна:
Бизнес экономит время и деньги на настройке взаимодействия сайта со сторонними сервисами. Особенно это важно для малого бизнеса, у которого сильно ограничены финансовые возможности.
Интернет-маркетологи также значительно упростят свою работу. Теперь не нужно обращаться к разработчику для выполнения простейших действий: настройки отслеживания посещений определенных страниц, добавления и отслеживания новых форм захвата. Особенно это важно в случае, когда необходимо оперативно проводить тестовые рекламные кампании.
Полное руководство для блогеров и начинающих верстальщиков. Разберем все самые необходимые HTML-теги и примеры их использования.
HTML-теги для форматирования текста
Заголовки
Заголовки подчеркивают особую важность заключенного в них текста. Вы можете использовать теги от
. Чем больше порядковый номер заголовка, тем меньше важность и размер текста по умолчанию.
Выравнивание заголовков
Заголовки можно выравнивать на странице, но для этого потребуется щепотка CSS:
Можно также использовать ключевые слова left , right или justify .
Абзацы
Можно обернуть абзацы текста, чтобы между ними появилось расстояние.
Выравнивание абзацев
Все работает точно так же, как для заголовков:
Другие значения: left , right или justify .
Разрыв строки
Вместо абзацев можно использовать разрыв строки. Это позволит перенести текст на новую строку в рамках одного параграфа.
Жирный текст
Установит жирное начертание:
Важный жирный текст
Кроме физического выделения жирным, добавляет семантическое. Выделенный текст будет считаться особенно важным для прочтения и понимания:
Курсивный текст
Устанавливает курсивное начертание:
Курсивный текст с особой важностью
Выглядит точно так же, как обычный курсив, но добавляет семантическое значение, как будто вы сделали акцент на этом тексте.
Подчеркнутый текст
Перечеркнутый текст
Добавляет эффект перечеркивания:
Семейство шрифта
Можно изменить шрифт текста с помощью CSS. Используйте безопасные шрифты или подключите Google fonts.
Размер шрифта
Для указания размера можно использовать px , em или проценты. Вот пример с пикселями:
Цвет шрифта
Установите для текста любой HEX-цвет по вашему выбору.
Выделенный текст
Выделите фрагмент текста с помощью CSS и фонового цвета:
Цитата
Полезно для выделения цитат и важных фрагментов текста.
HTML-теги для ссылок
Обычные текстовые ссылки
Открытие в новой вкладке
Используется для открытия гиперссылки в новой вкладке браузера, а не на текущей странице:
Ссылка на email-адрес
Открывает почтовую программу на компьютере пользователя для отправки письма по указанному адресу:
Ссылка на email с указанием темы письма
Полезно, если вы хотите установить для письма клиента конкретную тему. Вместо пробелов используйте %20 :
Ссылка-якорь
Вторая – ссылка, клик по которой отправит пользователя в нужное место документа:
Фон для элементов необходимо указывать в главном CSS-файле сайта или в определенном разделе вашей админ-панели. Если у вас нет такого файла или раздела, вы можете разместить код между тегами в секции прямо на странице. В большинстве случаев рекомендуется все же создать отдельный внешний CSS-файл.
Фоновый цвет страницы
Смените фон для всей страницы с помощью следующего кода с любым HEX-значением цвета.
Повторяющееся фоновое изображение
Подберите нужное изображение, которое должно повторяться на странице и используйте его адрес в следующем коде. Конечно, сначала вам потребуется его загрузить на свой сайт.
Чтобы изображение повторялось только по вертикали, замените значение repeat на repeat-y . Аналогично для повторения только по горизонтали используйте repeat-x .
Неповторяющееся фоновое изображение
Чтобы изображение отображалось на фоне всего один раз, используйте следующий код:
Неповторяющееся фоновое изображение сверху в центре
Установите фоновую картинку вверху страницы:
Вертикально повторяющееся фоновое изображение сверху в центре
Картинка отобразится наверху страницы и будет вертикально повторяться:
Не забудьте заменить URL-адрес изображения.
Списки
Нумерованный список
Создание упорядоченного списка элементов:
Маркированный список с буллитами
Буллиты заменяют собой цифры:
Маркированный список с другими маркерами
Вид буллита можно изменить. Возможные варианты: circle , square , disc (установлено по умолчанию).
Маркированный список с пользовательскими маркерами
Вы можете использовать любое изображение в качестве маркера неупорядоченного списка, например, звездочку или сердечко. Вам просто нужно создать маленькую картинку, загрузить ее на сервер и установить с помощью CSS:
Специальные символы HTML
Большую таблицу HTML-символов вы можете найти здесь.
Если, узнав базовые HTML-теги, вы захотели глубже изучить верстку, ознакомьтесь с небольшой подборкой наших материалов:
Читайте также: