Google Tag Manager для чего нужен и как его использовать на сайте

Всем привет! В этом посте мы продолжим изучать тему по структурированным данным Schema.org и JSON-LD, начатую в предыдущих статьях. Грамотная организация схемы структурированных данных на вашем сайте может привести к результатам поиска, которые будут всегда в топе у интернет-пользователей.

В этой статье я покажу вам, как внедрить структурированные данные с использованием разметки JSON-LD Schema.org на страницах вашего сайта. Далее мы подробнее рассмотрим, как можно управлять структурированными данными с помощью диспетчера тегов ― Google Tag Manager (GTM).

Создание структурированных данных с Google Tag Manager (GTM)

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

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

Кроме того, в Tag Manager есть режим предварительного просмотра, который позволяет вам сразу же проверить, успешно ли вы внедрили свои данные.

Как работает Google Tag Manager

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

Теги

Тег ― это фрагмент кода, который можно запустить на странице вашего сайта. Вы можете поместить много всего в тег. Например, вы можете добавить код отслеживания Google Analytics в тег. Этот тег позволит Google Analytics собирать аналитические данные и отслеживать ваш сайт. Точно так же вы можете поместить свой структурированный код данных в тег. Другими словами, тег содержит информацию о том, что вы хотите добавить на страницу.

Триггеры

Теги работают только при наличии триггера. Вам нужен способ сообщить Google Tag Manager, при каких условиях тег должен использоваться или запускаться в работу. Если у вас есть структурированный тег данных, то триггер сообщает Google Tag Manager, на каких страницах запускать этот тег. Это происходит потому, что, возможно, не всем вашим страницам нужна разметка структурированных данных. Говоря простым языком, триггер сообщает Google Tag Manager: «Пожалуйста, запускайте этот тег на «вот этих» страницах, а не на «этих» страницах».

Переменные

Переменные выполняют две основные функции. Во-первых, триггерам нужны переменные, чтобы знать, срабатывать или нет. Предположим, что Tag Manager уже работает на вашей странице. Если значение переменной соответствует заданным условиям, то триггер сработает. Это, в свою очередь, позволяет работать и тегу. Во-вторых, переменная выдает Google Tag Manager переменную информацию. Это означает, что информация может быть разной в разных контекстах. Например, дата публикации будет отличаться для каждой новой публикуемой электронной книги. Если сработает триггер, Google Tag Manager получит определенное значение с конкретной страницы, которую он посещает.

Примером переменной является URL-адрес страницы, но вы можете использовать любой элемент страницы в качестве переменной. Это может быть, например, кнопка «Добавить в корзину» или H1 страницы. Наиболее часто используемые переменные предопределены в Google Tag Manager. Но такие инструменты, как кнопки или H1 ― это те переменные, которые вы должны определить сами. С помощью переменных вы можете редактировать свой код таким образом, чтобы он использовал элементы текущей страницы для дальнейшего применения их в теге.

Микроразметка JSON-LD алгоритм внедрения на сайт

Давайте попробуем внедрить структурированные данные на страницах вашего сайта. Рассмотрим это на примере проекта Schema.org. Ранее мы уже упоминали, что будем использовать разметку JSON-LD. Так вот, есть пять основных шагов:

1. Создать структурированные данные
2. Создать теги и триггеры
3. Создать переменные
4. Запустить формирование кода
5. Подтвердить и опубликовать
   

Шаг 1: Создание кода для структурированных данных

Создание кода JSON-LD для структурированных данных вручную или с помощью Google Markup Helper.
В этом примере я использовал адрес страницы где опубликована статья Что такое структурированные данные, которая выглядит следующим образом:

<!-- Разметка JSON-LD, созданная Мастером разметки структурированных данных Google. -->
<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Article",
  "name" : "Что такое структурированные данные на сайте?",
  "author" : {
    "@type" : "Person",
    "name" : ": Эдуард Бунаков"
  },
  "datePublished" : "2019-03-26",
  "image" : "https://starting-constructor.ru/wp-content/uploads/2019/03/structur.jpg",
  "articleSection" : "Техническое SEO"
}
</script>

Теперь все по шагам. Необходимо вставить в нижнее поле адрес той страницы, на которой будут находится выделенные фрагменты, а чтоб эти фрагменты появились на странице, просто наводим курсор на нужное место на странице (название, видео, дата, изображение и т. д.), а в выпадающем списке выбираем нужные значения.

Как только вы нажмете на кнопку Начать разметку, сразу эта страница откроется в мастере google. Выбирая курсором нужную информацию, добавляем ее в правую часть страницы. Затем нажимаем на кнопку создать html

После того, как вы создали свою разметку, вы должны подготовить ее для Google Tag Manager. Вставьте свой код и нажмите «Готово». Инструмент создаст фрагмент кода, который вы можете использовать в Google Tag Manager. Скопируйте этот код, т.к. он понадобится вам для вашего нового тега.

Шаг 2: Создание тегов в Google Tag Manager

Когда вы готовы создать свои теги и триггеры, следуйте инструкциям ниже:
1. Создать новый тег в Google Tag Manager (GTM) и дать ему имя (например, «обучение структуре сайта»)

2. Нажмите «Конфигурация тега» и выберите тип тега: «Пользовательский HTML»

3. Вставьте подготовленный код из предыдущего инструмента мастера настроек.

4. Проверьте поддержку document.write – находится чуть ниже блока с кодом.
5. Нажмите «Сохранить»

Шаг 3: Создание триггеров в Google Tag Manager

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

Нажмите на поле «Триггеры» в вашем новом теге и выберите нужный просмотр страницы, затем нажмите «Сохранить». Ваш фрагмент теперь внедрен.

Нажмите кнопку «Новый» или «+», чтобы добавить новый триггер. Дайте ему имя и нажмите «Настройка триггера». Выберите «Просмотр страницы» из списка типов триггеров и нажмите «Просмотреть страницы выборочно». Теперь вы можете выбрать, когда должен срабатывать тег, и какие условия должны быть выполнены, прежде чем это станет возможным.

Шаг 4: Создание переменных в Google Tag Manager

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

Можно использовать уже готовые переменные, а можно создать свои (Пользовательские переменные).
После этого выполните следующие действия:
1. Назовите переменную
2. Нажмите на конфигурацию переменной
3. Выберите тип переменной
4. В этом примере: URL

Четвертый шаг зависит от типа тега или триггера, который вы хотите создать. В этом примере мы будем использовать элемент DOM. Элемент DOM ― это часть вашей страницы, такая как DIV, HTML и BODY. В этом примере элементом DOM является H1 ― наиболее важный заголовок страницы.

После того, как вы нажали на элемент DOM, вам нужно выбрать, какой метод вы хотите использовать для выбора элемента страницы. В этом случае мы будем использовать селектор CSS. Просто введя h1 в Element Selector, вы уже создали переменную, которая принимает H1 страницы.
Если вы хотите использовать мета-описание страницы, введите meta [name = ”description”], и тогда эта переменная добавит мета-описание ваших страниц.

Создав эти переменные, вы можете использовать их в своих тегах.
Например при использовании идентификатора (id), можно отследить разные события на сайте:

• клик по кнопке
• отправку формы
• различные аналитические данные ()
• вход в аккаунт
• яндекс метрику
• google analytics
• объявления google adwords
• и т. далее

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

Шаг 5: Проверка, сохранение и публикация

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

Далее в вашем браузере перейдите на страницу, на которой вы внедряете структурированные данные, и обновите. Появится вкладка «Предварительный просмотр», в которой будут показаны запущенные теги. Если вы хотите узнать больше подробностей, то вы можете перейти в окно «Window Loaded», чтобы увидеть, правильно ли были использованы ваши переменные. В данном случае тег который я создавал для конкретной страницы, появился на сайте, а в предварительном просмотре он показан как обучение структуре сайта. Всегда проверяйте свой код перед публикацией!

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

Чтобы опубликовать свой тег, нажмите кнопку «Отправить», которую вы видите в правом верхнем углу. Дайте вашему варианту имя описательного характера и нажмите «Опубликовать». После публикации тега структурированных данных перейдите в «Инструмент тестирования структурированных данных» и введите URL-адрес страницы. Теперь данная страница должна содержать структурированные данные. С помощью этого инструмента вы можете проверить, правильно ли вы внедрили структурированные данные:

Не видите сообщений об ошибках и других предупреждениях? Отлично сработано! Если вы видите ошибки, изучите эту тему глубже и почитайте, что советует Google по этой теме.

Google Tag Manager для чего нужен – практика использования

Заключение

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

Подробнее: Структурированные данные Schema.org: полное руководство