Отслеживание метатегов в Google Tag Manager

30 августа, 2019

Метатеги - элементы (X)HTML-разметки, которые содержат в себе информацию о странице сайта. Являются необязательными атрибутами, но имеют важное значение для поискового продвижения. В этой статье разберем способ их отслеживания в Google Tag Manager.

Поисковые роботы обращаются к метатегам для получения информации об описании сайта, заголовках страниц, ключевых словах, авторах публикаций, управляющих командах и прочей служебной информации, которая не предназначена для посетителей. Метатеги используются в самых разных системах, и в каждой они свои.

Рекомендуется к прочтению:

Отслеживание метатегов в Google Tag Manager

Примеры метатегов

Метатеги добавляются в тег <head> веб-страницы, в теге <meta> и <title>.

Примеры распространненых мета-тегов:

<title>заголовок страницы</title>
<meta name = "description" content="краткое описание страницы">
<meta name = "keywords" content="ключевые слова через запятую">
<meta name = "author" content="автор">
<meta name = "copyright" content="авторские права">

<title>заголовок страницы</title>

Подробнее про метатеги читайте на htmlbook.ru и habr.com. Хотелось бы еще пару слов сказать про стандарт Open Graph, который разработал Facebook. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим интернет-сервисам.

Стандарт Open Graph, пример разметки статьи для Facebook

Разметку Open Graph используют Facebook, Вконтакте, Google, Яндекс, Twitter, LinkedIn, Pinterest и многие другие сервисы.

Основные метаданные Open Graph: og:title (название объекта), og:type (тип объекта), og:image (URL изображения, описывающего объект). og:url (канонический URL объекта, который будет использован в качестве постоянного идентификатора в графе).

Дополнительные метаданные Open Graph: og:audio (URL-адрес звукового файла, который относится к описываемому объекту), og:description (краткое описание объекта), og:determiner (слово, которое появляется перед названием объекта в предложении), og:locale – (тег локации, язык описания объекта), og:site_name (название сайта, на котором размещена информация об объекте), og:video (URL-адрес видео-файла, который относится к описываемому объекту).

Подробнее про Open Graph читайте по ссылке.

Используя Google Tag Manager, вы можете импортировать данные, которые есть в метатегах, в Google Analytics.

Это может быть полезно в различных случаях:

проверить, проиндексирована ли страница или заблокирована роботом;
узнать, кто автор публикации;
узнать, когда была опубликована статья или отредактирована;
проверить, есть ли на странице описание (description);
проверить, есть ли на странице пользовательские метатеги (собственные);
и т.д.

Все, что необходимо сделать, это в GTM создаю пользовательскую переменную типа Собственный код JavaScript, и вставить в нее следующий код:

function (){
 var metaName = "description";
  var metas = document.getElementsByTagName('meta');
  var content = undefined;
  for (i = 0; i < metas.length; i++){
     if (metas[i].getAttribute("name") == metaName){
          content = metas[i].getAttribute("content");
     }
  }
  return content;
}

function (){

var metaName = "description";

var metas = document.getElementsByTagName('meta');

var content = undefined;

for (i = 0; i < metas.length; i++){

if (metas[i].getAttribute("name") == metaName){

content = metas[i].getAttribute("content");

}

return content;

}

В Google Tag Manager это выглядит так:

Собственный код JavaScript

Этот скрипт создает массив всех метатегов. Затем он проверяет каждый элемент в массиве. Если элемент соответствует metaName, которое мы ищем, тогда переменной 'content' будет предоставлена информация о значении в метатеге.

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

Вы также можете изменить атрибут метатега в приведенном выше операторе if, чтобы отслеживать meta property (протокола Open Graph) вместо meta name. Просто измените в строчке:

if (metas[i].getAttribute("name") == metaName){

на

if (metas[i].getAttribute("property") == metaName){

Пример для свойства article:published_time:

Красным подчеркнуто то, что нужно заменить

Давайте создадим еще несколько переменных в GTM и посмотрим, какие значения они принимают для одной из моих статей в блоге (Пример: Настройка сквозной аналитики). Это будут:

description – краткое описание страницы (статьи);
og:title – название объекта (статьи);
og:url – url-объекта (статьи);
article:section (название категории);
article:published_time (когда статья была впервые опубликована).

Получим в GTM 5 переменных типа Собственный JavaScript:

Пять пользовательских переменных GTM

В режиме предварительного просмотра перейдем на страницу и увидим на вкладке Variables (Переменные) наши пользовательские переменные с корректными значениями:

Просмотр изменений в режиме отладки GTM

В дальнейшем информацию о метатегах можно передать в Google Analytics в пользовательские определения (специальные параметры и показатели).

Код взят из этой статьи: https://lynuhs.com/tracking-meta-tags-with-google-tag-manager/

Понравилась статья? Ставьте оценку ?

Метки: Google Tag Manager, метатеги

Отслеживание метатегов в Google Tag Manager

Получайте бесплатные уроки и фишки

Еще статьи