Google tag manager руководство

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

Не знаете, что вам лучше использовать: Менеджер тегов или тег Google? Прочитайте статью о различиях и примерах использования.

	Основы | Как настроить и использовать Менеджер тегов Хотите управлять всеми тегами в одном сервисе? Узнайте, как настроить Менеджер тегов для сайтов.  Как настроить Google Менеджер тегов
	Google Реклама | Как настроить отслеживание конверсий и ремаркетинг Хотите управлять конверсиями и тегами ремаркетинга Google Рекламы с помощью Менеджера тегов?  Как настроить теги Google Рекламы
	Google Аналитика | Как настроить события Google Аналитики 4 и Universal Analytics Менеджер тегов тесно интегрирован с Universal Analytics и Google Аналитикой 4 и поддерживает все теги Аналитики, включая теги событий и теги для междоменного отслеживания и электронной торговли.  Как настроить теги Google Аналитики
	Floodlight | Как настроить теги Floodlight с помощью Менеджера тегов Google Менеджер тегов поддерживает теги счетчика и продаж Floodlight. Как настроить теги Floodlight
	Google Оптимизация | Как отслеживать эффективность экспериментов Тестируйте варианты сайтов с помощью Google Оптимизации. Как настроить тег Оптимизации в Менеджере тегов
	Другие руководства по настройке тегов | Как наиболее эффективно использовать все возможности Google Менеджера тегов В Менеджере тегов можно управлять не только тегами Google, но и любыми другими. В нем доступно, например, следующее: Пользовательские теги Настройка функций для получения согласия Тег связывания конверсий Пользовательские шаблоны Галерея общедоступных шаблонов

Эта информация оказалась полезной?

Как можно улучшить эту статью?

В этом руководстве рассказывается, как реализовать Google Менеджер тегов на вашем сайте.

Как работать с уровнями данных

Чтобы создать максимально простое, гибкое и переносимое решение, рекомендуем использовать Google Менеджер тегов совместно с уровнем данных.
Уровень данных – это объект, содержащий всю информацию, которую требуется передавать в Менеджер тегов. Таким образом можно передавать события, переменные и прочие данные. При этом в Менеджере тегов можно настраивать триггеры, основанные на значении переменных (например, активацию тега ремаркетинга, когда purchase_total больше 6000 руб.) или на определенных событиях. Значения переменных можно также передавать в другие теги (например, значение purchase_total в поле со значением тега).

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

Как добавить на страницу переменные уровня данных

Чтобы настроить уровень данных, добавьте в начало страницы перед контейнером следующий фрагмент кода:

<script>
  dataLayer = [];
</script>

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

<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>

Например, Google Менеджер тегов можно настроить так, чтобы теги активировались на всех страницах категории signup и/или на тех, посетители которых помечены как high-value. Код уровня данных обязательно должен размещаться выше контейнера, как описано в кратком руководстве по началу работы.

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

Неверно

<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->
<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>

Верно

<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->

Все переменные, объявленные в объекте уровня данных, сохраняются, пока посетитель остается на текущей странице.
Переменные уровня данных, которые релевантны для нескольких страниц (например, visitorType), должны быть объявлены в уровне данных на каждой странице. Не обязательно задавать один и тот же набор переменных в уровне данных каждой страницы, но необходимо использовать единый принцип их именования. Другими словами, если для страницы регистрации вы задаете категорию с помощью оператора pageCategory, необходимо использовать тот же оператор (pageCategory) и на странице покупки.

Уровень данных не обязательно задавать явным образом. Поэтому, если вы решили не добавлять код уровня данных (и не указывать в нем переменные), фрагмент-контейнер Google Менеджера тегов инициирует объект уровня данных самостоятельно.

Как использовать уровень данных в обработчике событий HTML

В Google Менеджере тегов доступна специальная переменная уровня данных event, которая используется в блоках прослушивания событий JavaScript для активации тегов при взаимодействии пользователя с элементами сайта (например, кнопками). Допустим, вы хотите, чтобы тег отслеживания конверсий срабатывал при нажатии кнопки Submit в форме подписки на рассылку. События могут вызываться в результате взаимодействия пользователя с элементами сайта (ссылками, кнопками, Flash-компонентами меню) или в результате срабатывания JavaScript (например, при задержке).

Для этого используется вызов push API в качестве метода для уровня данных страницы (например, привязанного к определенным элементам, которые нужно отслеживать). Самый простой синтаксис для настройки события выглядит так:

dataLayer.push({'event': 'event_name'});

В строке event_name указывается, что собой представляет конкретное событие или элемент.

Например, чтобы настроить событие для нажатия кнопки, можно изменить ссылку кнопки, чтобы вызвать push() API:

<a href="#" name="button1" onclick="dataLayer.push({'event': 'button1-click'});" >Button 1</a>

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

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

В случае событий этот результат достигается вызовом push() API, который добавляет переменные в уровень данных и заменяет их. Самый простой синтаксис для настройки динамических переменных уровня данных выглядит так:

dataLayer.push({'variable_name': 'variable_value'});

Здесь variable_name – название переменной уровня данных, которую нужно настроить, а variable_value – значение переменной, которое нужно задать или заменить.

В примере ниже показано, как настроить динамическую переменную уровня данных для выбора цвета (например, в виджете конструктора автомобиля):

dataLayer.push({'color': 'red'});

Одновременная передача нескольких переменных

Вы можете передавать несколько переменных и событий одновременно с помощью одного оператора dataLayer.push().
Вот пример того, как это сделать:

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customizeCar'
});

Этот же принцип можно использовать для обработчика событий ссылки:

<a href="#"
   name="color"
   onclick="dataLayer.push({
     'color': 'red',
     'conversionValue': 50,
     'event': 'customizeCar'});">Customize Color</a>

Следует учитывать, что передача на уровень данных переменной с тем же названием, что и у существующей, приведет к перезаписи текущего значения новым. Например, если в момент нажатия на ссылку выше на уровне данных уже была объявлена переменная color со значением blue, оно будет заменено новым (red).

Как работает асинхронный синтаксис

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

Асинхронный синтаксис возможен благодаря объекту dataLayer [уровень_данных].
Он срабатывает в порядке очереди, то есть обрабатывает вызовы API и активирует соответствующие теги по мере поступления обращений.
Чтобы добавить в очередь элемент, используйте метод dataLayer.push. Метод dataLayer.push позволяет передавать в Менеджер тегов дополнительные метаданные с помощью переменных и задавать события.

Создание объекта dataLayer можно определить перед кодом Менеджера тегов. Если этого не сделать, то объект dataLayer будет создан Менеджером тегов.

Дополнительную информацию об асинхронном синтаксисе вы найдете в разделе об отслеживании с помощью метода dataLayer.push.

Как избежать распространенных ошибок

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

Слой данных dataLayer нельзя переопределять

Когда вы назначаете значения в уровень данных dataLayer (например, так: dataLayer = [{'item':
'value'}]), любые существующие значения будут перезаписаны. Класс dataLayer рекомендуется объявлять в коде как можно выше, над фрагментом-контейнером и любыми другими сниппетами Google Оптимизации для скрытия страницы. После того как вы объявите уровень данных dataLayer, можно использовать метод dataLayer.push({'item': 'value'}), чтобы позднее добавить в него дополнительные значения с помощью скриптов.

В имени объектов dataLayer учитывается регистр

Если вы в названии объекта используете неверный регистр, он не сможет передавать переменные или события. Примеры:

datalayer.push({'pageTitle': 'Home'});    // Won't work

dataLayer.push({'pageTitle': 'Home'});    // Better

Имена переменных должны быть заключены в кавычки

Кавычки не обязательны для названий переменных, которые состоят только из букв, цифр и символов нижнего подчеркивания или не являются зарезервированными словами (например, function, export, native и т. д.),
но мы рекомендуем всегда использовать их, чтобы избежать проблем. Примеры

dataLayer.push({new-variable: 'value'});      // Won't work

dataLayer.push({'new-variable': 'value'});    // Better

Имена переменных должны быть одинаковыми на разных страницах

Если вы используете разные имена для одних и тех же переменных на разных страницах, Менеджер тегов не сможет последовательно запускать на них теги. Примеры:

Неверный код

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

Рабочий код

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

Вся информация, необходимая для активации тегов при загрузке страницы, должна быть объявлена в уровне данных перед фрагментом-контейнером

Для того чтобы теги активировались при загрузке страницы и выполнении заданного условия (например, на страницах, для которых переменной pageCategory присвоено значение sports), переменная pageCategory должна быть определена в уровне данных перед фрагментом-контейнером (например, 'pageCategory': 'sports'). Если переменные, передаваемые на уровень данных (например, с помощью метода dataLayer.push()), расположены после фрагмента-контейнера, они не смогут активировать теги при загрузке страниц, соответствующих определенному условию.

Теги, внедренные с помощью Менеджера тегов, не должны быть одновременно заданы в коде или добавляться с помощью других инструментов

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

Переименование уровня данных

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

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

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

<script>
  myNewName = [{
    // ...
  }];
  myNewName.push({'variable_name': 'variable_value'});
</script>

Перенос тегов в Менеджер тегов

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

1. Создайте схему сайта (необязательно)

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

2. Добавьте стандартный фрагмент кода Менеджера тегов

   Составив схему, добавьте на сайт один (пустой) фрагмент кода Менеджера тегов и разверните его. Подробную информацию об этом вы найдете в кратком руководстве.

3. Добавьте события и переменные

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

4. Добавьте теги и связанные с ними триггеры в интерфейс управления Менеджера тегов

   После того как вы добавите на сайт фрагмент кода Менеджера тегов и API сбора данных, необходимо добавить теги сайта в пользовательский интерфейс, но публиковать их пока НЕ НУЖНО.
   Просто добавьте теги с вашего сайта в интерфейс управления Менеджера тегов и настройте их, используя соответствующие шаблоны, а также настройте триггеры.

5. Замените теги

   Одновременно удалите старые теги и опубликуйте новые в Менеджере тегов. Для этого в течение нескольких минут выполните следующие операции:

   • Удалите теги сайта с помощью разовой передачи кода.
   • Убедитесь, что предыдущий шаг выполнен успешно, и опубликуйте текущую версию контейнера.

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

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

Работа с несколькими доменами

Вы можете использовать один и тот же контейнер для нескольких сайтов. Однако мы рекомендуем развертывать каждый веб-ресурс с собственным контейнером. Тогда изменения, произведенные на одном сайте, не будут затрагивать другие сайты, на которых используется тот же самый контейнер. Однако в ситуациях, когда несколько доменов верхнего уровня или субдоменов относятся к одному и тому же сайту, управление тегами на этих сайтах с помощью одного и того же контейнера Менеджера тегов оправданно.

Если у вас один контейнер для нескольких доменов, тщательно настройте теги и триггеры в Менеджере тегов. Использование в Менеджере тегов триггера по умолчанию для всех страниц ($url matches RegEx .*) приведет к срабатыванию тегов на всех страницах всех доменов, где размещен фрагмент-контейнер. Поскольку настройки или цели некоторых тегов зависят от доменов, на которых они размещаются, может понадобиться создать собственные триггеры (или даже удалить триггер «Все страницы»), чтобы обеспечить активацию тегов на всех страницах одного или всех доменов.

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

В этом случае вам потребуется вручную задать основной домен, на котором будут настроены файлы cookie Google Аналитики, добавив строку в код отслеживания Google Аналитики (например, настроить файлы cookie для общего домена .example-petstore.com на сайтах www.example-petstore.com и dogs.example-petstore.com). Однако для дополнительного сайта, например www.my-example-blogsite.com, вы можете установить файлы cookie для домена .my-example-blogsite.com. Таким образом, один из двух тегов отслеживания Google Аналитики (с настройками для .example-petstore.com и .my-example-blogsite.com) будет активировать теги в каждом из этих доменов. Если в оба домена добавить один и тот же контейнер Менеджера тегов (с помощью используемого по умолчанию триггера «Все страницы»), все теги будут срабатывать на всех страницах обоих доменов.

Использование нескольких контейнеров на одной странице

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

Если вам необходимо использовать больше одного контейнера, внедрите все фрагменты-контейнеры в одном объекте уровня данных. Пример для двух контейнеров:

1. Скопируйте приведенный ниже код JavaScript и добавьте его на страницу как можно ближе к открывающему тегу <head>.

   <!-- Google Tag Manager -->
   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
   new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
   j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
   'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
   })(window,document,'script','dataLayer','GTM-XXXX');</script>
   
   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
   new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
   j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
   'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
   })(window,document,'script','dataLayer','GTM-YYYY');</script>
   <!-- End Google Tag Manager -->
   
   

2. Скопируйте приведенный ниже фрагмент и вставьте его сразу после открывающего тега <body>.

   <!-- Google Tag Manager (noscript) -->
   <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
   
   <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYY"
   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
   <!-- End Google Tag Manager (noscript) -->
   
   

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

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

Flash и ActionScript

Чтобы Менеджер тегов активировал теги в зависимости от контента Flash-ролика или взаимодействия с ним, используйте метод ActionScript ExternalInterface для передачи событий и динамических переменных уровня данных из ролика SWF в уровень данных на странице контейнера. Для этого необходимо внедрить фрагмент-контейнер Менеджера тегов в HTML-код родительской страницы SWF-ролика в соответствии с этими инструкциями.

События и динамические переменные уровня данных могут передаваться из компонента Flash в Менеджер тегов вызовом метода push с помощью ExternalInterface. Например, чтобы инициировать событие при нажатии кнопки mybutton_btnс помощью ActionScript 3, добавьте приведенный ниже код в файл SWF.

import flash.display.*;
import flash.events.*;
import flash.external.*;
mybutton_btn.addEventListener(MouseEvent.MOUSE_UP, onButtonClick);
function onButtonClick( Event:MouseEvent ):void {
  var name:String= "FLASH_EVENT";
  if (ExternalInterface.available) {
    ExternalInterface.call('dataLayer.push',{'event': name});
  }
}

Чтобы метод ExternalInterface работал корректно, атрибуту allowscriptaccess при встраивании в SWF должно быть присвоено значение always.

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
        width='300' height='300' id='player1' name='player1'>
  <param name='movie' value='file.swf'>
  <param name='allowfullscreen' value='true'>
  <param name='allowscriptaccess' value='always'>
  <param name='flashvars' value='file=playlist.xml'>
  <embed id='player1' name='player1'
         src='file.swf'
         width='300' height='300'
         allowscriptaccess='always'
         allowfullscreen='true'
         flashvars="file=playlist.xml"/>
</object>

Как добавить переменные уровня данных для устройств, не поддерживающих JavaScript

Для устройств, которые не поддерживают JavaScript или на которых он отключен, в Менеджере тегов предусмотрен фрагмент кода <noscript>. С его помощью осуществляется развертывание независимых от JavaScript тегов в случаях, когда основной JavaScript Менеджера тегов не может быть загружен.

Важно отметить, что для работы уровня данных (содержащего переменные уровня данных, объявляемые при загрузке страницы), а также любых событий или динамических переменных уровня данных, передаваемых на уровень данных, требуется наличие JavaScript. Поэтому, если триггеры, которые активируют теги, не зависящие от JavaScript (и которые необходимо активировать, даже если JavaScript не может быть загружен), зависят от переменных уровня данных, вы должны передать эти переменные слоя данных в окно iframe <noscript> как параметры запроса. Например, чтобы тег активировался, когда категория страницы (pageCategory) – sports, а тип посетителя (visitorType) – returning, фрагмент-контейнер на этой странице необходимо изменить следующим образом:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX&pageCategory=sports&visitorType=returning" height="0"
                  width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

В примере выше все переменные уровня данных добавляются в конец исходного URL страницы окна iframe в виде текстовых параметров запроса, разделенных амперсандами.

Защита

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

Администраторы могут ограничить внедрение тегов для своих установок, чтобы применялись только определенные теги. Кроме того, можно настроить Google Менеджер тегов для работы с правилами защиты контента.

Использование URL без указания протокола

По умолчанию фрагмент-контейнер Менеджера тегов всегда использует для загрузки контейнеров протокол https (например, https://www.googletagmanager.com). Это помогает защитить контейнер от отслеживания и действий злоумышленников и, как правило, повышает эффективность его работы.

Если вы хотите загружать контейнеры Менеджера тегов без указания протокола, замените https:// на // в исходном URL фрагмента-контейнера (см. выделенный код в примере ниже).

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Если вы используете URL без указания протокола, контейнер будет загружен с использованием протокола http на страницах, адрес которых начинается с http://, и https на страницах, адрес которых начинается с https://.

В более старых версиях фрагмента-контейнера Менеджера тегов для загрузки контейнеров всегда используются URL без указания протокола (например, //www.googletagmanager.com). Эти версии будут продолжать работать, вносить в них изменения не требуется.

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

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

С помощью GTM на сайт можно добавить код разных служб аналитики: Google Analytics, «Яндекс.Метрики», Google Maps и других сервисов для мониторинга сайта.

1. Шаблоны для интеграции Google Analytics, разных метрик и так далее.
2. Можно использовать пользовательские теги.
3. Предпросмотр и инструмент отладки тегов.
4. Система контроля версий — в любой момент можно откатиться к более ранней.
5. Реализация асинхронной загрузки тегов, что положительно сказывается на скорости загрузки страниц сайта.
6. Можно настраивать текстовую подмену на сайте, мгновенно меняя варианты.

Перейдите на сайт Google Tag Manager и авторизуйтесь с помощью
Google-аккаунта. Если аккаунта нет, создайте и затем авторизуйтесь.

После авторизации создайте аккаунт для GTM или выберите из уже созданных. Я покажу настройку GTM на своем небольшом тестовом сайте sokratzona.info.

В открывшемся окне добавления нового аккаунта введите его название. Нажмите кнопку Далее.

Для создания контейнера введите его название и укажите, где он будет использоваться. Я выбрал веб-сайт. Нажмите кнопку Создать.

Скопируйте код контейнера.

Если вы случайно закрыли окно с кодом и не скопировали его, ничего страшного, найти его можно, нажав на идентификатор контейнера в правом верхнем углу.

Нажмите на идентификатор, и у вас появится окошко с кодом. Скопируйте его и разместите на своем сайте.

В моем случае файл, куда я поместил код, называется index.html. Если вы используете CMS, возможно что файл будет называться header.php или еще как-то.

Давайте подключим сайт к Google Analytics. В рабочей области в карточке Новый тег нажмите на ссылку Добавить новый тег.

Далее перейдите в Конфигурацию тега и выберите его тип. Например, Google Аналитика — Universal Analytics.

Укажите идентификатор отслеживания. Найти его можно в аккаунте Google Analytics, Администратор — Настройки ресурса — Идентификатор отслеживания.

В качестве типа отслеживания выберите Просмотр страницы. В категории Триггеры выберите All Pages. Сохраните изменения.

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

Сайт откроется в том же браузере. Если у вас внизу на панели отладки появился тег, то вы все сделали правильно.

Опубликуйте контейнер.

Проверьте корректность работы Google Analytics. Да, все работает.

Триггеры находятся в меню рабочей области GTM.

Выберите тип триггера.

Выбрав тип триггера, настройте условие его активации: укажите тип переменной Click URL и ссылку, переходы по которой будете отслеживать.

Чтобы задействовать переменные, выберите соответствующий пункт в меню рабочей области GTM.

Можно настраивать встроенные шаблоны переменных или создавать пользовательские.

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

Создайте тег Пользовательский HTML и скопируйте код кнопок шеринга сервиса, которым вы пользуетесь.

Укажите триггер All Pages. Сохраните и опубликуйте контейнер. Триггер можно указать как для всех страниц, так и выборочно.

Вот, что получилось после публикации:

Так же, как и в предыдущем примере, сгенерируйте код с помощью сервиса Schema или любого другого. Создайте тег Пользовательский HTML и разместите туда полученный код, настройте активацию триггера. Вот так настраивается микроразметка.

Создайте новый тег. Тип тега выберите Universal Analytics.

Настройте конфигурацию тега.

Настройте триггер. Выберите тип Только ссылки, отметьте пункт Некоторые ссылки и назначьте событие активации триггера.

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

Посмотрите в Google Analytics вкладку события в режиме реального времени.

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

Даже если по итогу вы позвонили по указанному на сайте телефону, а не через кнопку обратного звонка, и купили товар, все равно Google Analytics учтет вас как «отказника». Такое состояние дел несколько искажает действительность и не дает реальной картины.

Для уточнения показателя отказов и получения более точных сведений можно настроить отслеживание длительности посещения без привязки к действиям. Пробыли на сайте десять секунд — уже не отказ.

Чтобы настроить показатель отказов, создайте тег Universal Analytics, тип отслеживания Событие.

Затем укажите для тега триггер Таймер и задайте нужный интервал в миллисекундах.

Проверьте подключение тега.

В Google Analytics показатель уменьшился.

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

На курсе Skillbox вы сможете углубить свои знания в веб-аналитике, рассмотрите множество реальных кейсов и познакомитесь со всеми инструментами сбора, обработки и визуализации информации, которые можно использовать на практике.

Диспетчер тегов упрощает интеграцию сайта со сторонними сервисами и службами аналитики. Из этой статьи вы узнаете, как установить и использовать Google Tag Manager (GTM).

Что такое Google Tag Manager

Диспетчер тегов — сервис, который упрощает использование кодов сторонних служб на сайтах или в приложениях. Благодаря Tag Manager вебмастеру достаточно один раз добавить на сайт контейнер или мастер-код. После этого код других служб можно добавлять через интерфейс диспетчера.

С помощью диспетчера тегов на сайт можно добавить код любых служб: от сервисов Google до сторонних платформ. Например, вы можете добавить код Google Analytics, «Яндекс.Метрики», Liveinternet и других служб аналитики. Это удобно, если вы пользуетесь разными сторонними сервисами для повышения эффективности и мониторинга сайта.

Можно ли обойтись без GTM? Да, если вы используете одну или две сторонних службы, диспетчером тегов можно не пользоваться. А если вы постоянно добавляете на сайт коды разных сервисов, Tag Manager упростит работу с ресурсом.

Настройка Google Tag Manager

Чтобы использовать диспетчер тегов, добавьте на сайт контейнер. Создайте пользовательские или используйте встроенные переменные. Настройте условия активации или триггеры и добавьте в контейнер теги. Подробные инструкции ниже.

Как добавить на сайт контейнер диспетчера тегов

Чтобы добавить на сайт контейнер Google Tag Manager, авторизуйтесь на странице сервиса и создайте новый аккаунт. В настройках контейнера укажите, где он будет использоваться.

Скопируйте код и вставьте его на сайт. Если вы работаете с ресурсом под управлением CMS WordPress, воспользуйтесь плагинами для вставки кода, например, Head, Footer and Post Injections. Первую часть кода вставьте в хедер как можно ближе к открывающему тегу, а вторую в тело страницы сразу после тега <body>.

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

Как использовать переменные Google Tag Manager

Активация тегов в диспетчере происходит, когда значение триггера совпадает с заданной пользователем переменной. Например, встроенная переменная Click Text всегда содержит какой-либо текст, а переменная Click URL — URL. В данном случае триггер активируется, если значение переменной совпадает с заданными пользователем параметрами: кликом по элементу с указанным текстом или URL.

Для управления переменными выберите соответствующий раздел меню.

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

Пользователям доступны следующие типы встроенных переменных:

• Страницы. В качестве переменной вы можете выбрать полный URL (Page URL), относительный URL (Page Path), имя хоста страницы (Page Hostname), источник запроса (Page Referrer).
• Утилиты. Этот тип переменных включает события, ID и версию контейнера, название рабочей области и ID HTML-тега.
• Ошибки. Этот тип встроенных переменных включает просмотр контейнера в режиме отладки, а также сообщение об ошибке, URL ошибки и номер строки ошибки.
• Клики. В качестве переменной можно использовать HTML-элементы, классы элементов, URL, текст элемента, атрибуты target и ID элемента.
• Формы. В качестве переменной можно использовать элементы и классы формы, атрибуты target и href, а также текст формы.
• История. Этот тип переменных поддерживает активацию триггера при изменении хеша URL. В качестве переменной можно использовать новый и старый фрагменты URL, а также новое и старое состояние истории или источник истории.

После включения переменной она становится доступной в фильтре при создании триггера.

Как использовать триггеры Google Tag Manager

Триггер — условие активации тега. Оно наступает, когда триггер совпадает с указанным значением переменной. Чтобы настроить триггер, выберите в меню соответствующий раздел и нажмите кнопку «Создать».

На странице настройки триггера укажите название и выберите тип.

В GTM доступны следующие типы триггеров:

• Просмотр страницы. Этот тип активируется по готовности объектной модели документа (Модель DOM готова), после полной загрузки всех элементов страницы (Окно загружено) или сразу после перехода на страницу (Просмотр страницы).
• Клик. Этот тип триггера фиксирует клики по ссылкам или любым кликабельным элементам сайта.
• Другие типы. Здесь можно выбрать тип «Ошибка JavaScript», «Таймер», «Пользовательские события», «Отправка формы» и «Изменение в истории».

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

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

Как работают теги в GTM

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

Принцип работы с тегами удобно осваивать на примере интеграции ресурса с системами аналитики «Яндекс.Метрика» и Google Analytics.

Подключите сайт к Google Analytics. В рабочей области воспользуйтесь функцией «Добавить новый тег». В разделе «Конфигурация тега» выберите тип тега Universal Analytics или «Классический Google Analytics». Google рекомендует пользоваться Universal Analytics.

Укажите идентификатор ресурса. Его можно найти в аккаунте Google Analytics в разделе «Администратор – Ресурс – Код отслеживания». В разделе «Тип отслеживания» выберите опцию «Просмотр страницы».

В разделе «Триггеры» выберите вариант «Все страницы». Сохраните изменения.

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

В соответствующее поле вставьте код счетчика «Яндекс.Метрики». Его можно найти в разделе «Настройки» сервиса аналитики. Выберите триггер All Pages.

Перед публикацией контейнера воспользуйтесь функцией «Предварительный просмотр и отладка».

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

Опубликуйте контейнер. Проверьте корректность работы служб аналитики. В Analytics можно отправить тестовый трафик в разделе «Администратор – Ресурс – Код отслеживания». В «Метрике» корректность работы счетчика можно проверить с помощью отмеченной на иллюстрации кнопки.

Если на сайте реализованы AMP, с помощью диспетчера тегов можно подключить ускоренные страницы к службам аналитики. Если ресурс работает на WordPress, установите надстройку AMP for WordPress. В разделе Analytics включите отслеживание с помощью Tag Manager, укажите ID контейнера, тип службы аналитики и идентификатор аккаунта в Google Analytics.

Таким же способом сайт можно интегрировать с другими сервисами.

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

Ниже вы найдете рекомендации по практическому использованию Google Tag Manager.

Какие задачи можно решать с помощью диспетчера тегов Google

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

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

Чтобы добавить код ретаргетинга «Вконтакте» через Google Tag Manager, создайте новый тег. Выберите тип «Пользовательский HTML». Добавьте в предложенное поле код ретаргетинга. Его можно создать в разделе «Ретаргетинг» кабинета рекламодателя «Вконтакте». В поле «Триггеры активации» укажите вариант All Pages. Если код должен срабатывать при посещении некоторых страниц, укажите их URL в триггере типа «Просмотр страницы». Сохраните изменения и опубликуйте тег.

Таким же способом добавьте теги ремаркетинга и ретаргетинга других социальных сетей и рекламных систем.

Подтверждайте права на сайт с помощью Google Tag Manager

Если вы еще не подтвердили права на сайт в кабинете вебмастера Google, сделайте это с помощью диспетчера тегов. В Search Console выберите соответствующий способ и нажмите кнопку «Подтвердить».

При необходимости аналогичным способом подтвердите все версии сайта.

Добавьте кнопки шеринга на изображения

Это одна из частных возможностей мгновенной интеграции сайта со сторонними сервисами с помощью Tag Manager. Скопируйте код кнопок шеринга выбранного сервиса, например, AddThis. Создайте тег типа «Пользовательский HTML». Вставьте код кнопок. В качестве триггера активации укажите вариант All Pages. Сохраните изменения и опубликуйте контейнер.

Проверьте корректность работы кнопок шеринга.

Отслеживайте внутренние переходы на сайте

Внешние переходы удобно отслеживать с помощью UTM-меток. А внутренние клики лучше мониторить с помощью событий в Google Analytics.

Представьте, что планируете отследить переходы по конкретной ссылке. В Tag Manager выберите меню «Переменные – Настроить – Click URL». Вы активировали нужную переменную.

В разделе «Триггеры» создайте новый триггер. Выберите тип «Клик — Только ссылки».

На следующей странице отметьте галочкой опции «Ждать теги» и «Все клики по ссылкам». В качестве условия выполнения триггера укажите URL целевой страницы. Сохраните изменения.

После настройки триггера добавьте тег отслеживания. В разделе «Теги» создайте новый. В настройках конфигурации выберите тип Universal Analytics. В меню «Триггеры» выберите соответствующее значение. В настройках конфигурации заполните поля «Тип отслеживания», «Категория», «Действие», «Ярлык». Для удобства мониторинга значение в поле «Ярлык» должно соответствовать выбранному действию.

После публикации контейнера вы сможете отслеживать выбранное событие в разделе Google Analytics «Поведение – События».

Отслеживайте переходы по всем внешним ссылкам

В данном случае речь идет о кликах по любым внешним ссылкам, которые есть на сайте. Создайте пользовательскую переменную. Выберите тип компонента «Имя хоста» для переменной типа URL. Отметьте флажком опцию «Убрать www». В дополнительных настройках укажите в поле «Источник URL» значение Click URL.

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

Создайте тег активации триггера. Выберите тип Universal Analytics. Выберите тип отслеживания, заполните поля «Категория», «Действие» и «Ярлык». Опубликуйте тег в контейнере.

Отслеживайте переходы по конкретной внешней ссылке

Создайте пользовательскую переменную, выберите тип URL. Укажите тип компонента «Полный URL». В поле «Источник URL» выберите значение Click URL.

В условиях активации выберите значение «Некоторые ссылки». Укажите, что триггер активируется, если пользователь переходит по конкретному URL.

Сохраните триггер. Создайте тег Universal Analytics и опубликуйте его в контейнере.

Уточняйте показатель отказов

Google Analytics не точно определяет этот показатель, если пользователь во время сеанса просматривает только одну страницу. Исправить ситуацию можно с помощью Google Tag Manager.

Создайте новый триггер, укажите тип «Таймер».

В поле «Интервал» укажите время активации триггера. Например, для активации таймера через 30 секунд укажите значение 30 000 миллисекунд. В поле «Ограничение» укажите значение «1». В этом случае таймер будет активироваться один раз для каждой сессии
.

В условиях активации триггера укажите URL, на которых должен срабатывать таймер.

Создайте и опубликуйте в контейнере новый тег Universal Analytics. Таймер будет активироваться каждый раз, когда посетитель будет проводить на указанных вами страницах более 30 секунд.

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

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

Если на сайте есть контактные формы, отслеживайте заполнения с помощью GTM. Для этого в меню «Переменные» активируйте переменную Form Classes.

Создайте триггер. В настройках укажите тип «Отправка формы».

В настройках триггера переключите галочку в положение «Некоторые формы». Укажите в качестве условий активации «Фильтр Form Classes содержит» и укажите значение атрибута class формы.

Создайте соответствующий тег Universal Analytics. Сохраните изменения и опубликуйте контейнер. Значение атрибута class формы можно найти в коде страницы.

Отслеживайте клики по социальным кнопкам и виджетам

Практически на каждом сайте есть социальные плагины, например, виджеты страниц в Facebook и «Вконтакте», кнопки Follow Me. С помощью диспетчера тегов можно отслеживать клики по конверсионным кнопкам виджетов типа «Нравится» или «Подписаться». Например, настройте отслеживание кликов по иконке Twitter в блоке Follow Me.

В меню «Переменные» активируйте переменную Click Classes.

Создайте триггер, выберите тип «Клик — все элементы». Переключите флажок в положение «Некоторые клики». В фильтре активации укажите значение атрибута class кнопки Twitter из блока Follow Me. Его можно найти в коде элемента.

Добавьте данные в фильтр диспетчера тегов, сохраните изменения. Создайте соответствующий тег Universal Analytics и опубликуйте обновленный контейнер.

Отслеживайте переходы по тексту клика

Эту функцию можно использовать для проверки эффективности CTR элементов ресурса. Представьте, что на сайте есть одинаковые кнопки с разным призывом к действию. Чтобы определить, какие кнопки нажимают чаще, активируйте переменную Click Text.

Создайте триггер, выберите тип «Клик – Все элементы». Установите галочку в положение «Некоторые клики». Выберите фильтр Click Text. В качестве условия активации триггера отметьте «Содержит» и укажите нужный текст.

Создайте и опубликуйте тег Google Analytics.

Отслеживайте конкретные источники внешнего трафика

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

Создайте тег с типом отслеживания «Событие» и опубликуйте его в контейнере. После этого Google Analytics будет фиксировать событие при каждом посещении сайта из выбранного источника.

Чтобы отслеживать посещения с конкретной страницы, в качестве переменной укажите Referrer, а в правилах активации отметьте «Равно» и добавьте полный URL страницы.

Используйте GTM для внедрения микроразметки

Используйте эту рекомендацию, если внедряете на сайте универсальные типы микроразметки. Они содержат одинаковые данные независимо от страницы сайта. Например, внедрите тип разметки Organization.

Воспользуйтесь генератором Schema JSON-LD или аналогичным инструментом, чтобы получить код. Создайте тег типа «Пользовательский HTML». Вставьте код разметки. Выберите триггер активации All Pages.

Отслеживайте источники трафика с помощью событий Google Analytics

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

Создайте пользовательскую переменную типа «Источник ссылки HTTP». Укажите тип компонента «Имя хоста».

Создайте триггер типа «Просмотр страниц». В условиях активации укажите, что тег активируется, если URL источника не совпадает с URL вашего сайта.

Создайте и опубликуйте в контейнере тег Google Analytics. После этого в разделе «События – Обзор – Категория событий» Google Analytics можно оценивать источники трафика.

Это далеко не все возможности диспетчера тегов. Предложенные примеры помогут освоить принцип работы GTM. После этого вы сможете самостоятельно выбирать параметры для мониторинга с помощью служб аналитики и добавлять на сайт коды интернет-сервисов.

Находка для нетехнических специалистов

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

Диспетчер тегов упрощает мониторинг и аналитику эффективности сайта. С помощью набора встроенных и пользовательских переменных вы можете быстро настроить отслеживание практически любых событий на сайте.

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

Давайте разберемся, что умеет этот инструмент и как им воспользоваться.

Что такое Google Tag Manager

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

GTM будет полезен:

1. Веб-аналитикам или маркетологам – для самостоятельного внедрения внешних сервисов, создания эффективной системы аналитики и отслеживания KPI.
2. Тем, кто связан с контекстной рекламой – для оценки эффективности рекламных компаний.
3. Для самостоятельного управления аналитикой.
4. Маркетинговым агентствам – в помощь быстрой и эффективной работе с профилями клиента.

Стоит также понимать, что GTM – это не единственный сервис в своем роде, существуют такие системы, как Tealium, Adobe Dynamic Tag Manager, Yahoo Tag Manager. Но почему же все выбирают Google? Рассмотрим далее.

Почему Google Tag Manager

Обычно выделяют следующие преимущества сервиса:

• Возможность использовать шаблоны для интеграции Google Analytics и прочих метрик.
• Разрешено внедрять пользовательские теги.
• Контроль версий, благодаря чему можно всегда откатиться к ранней версии.
• Настройка текстовой подмены, что позволяет мгновенно изменять варианты кода.
• Асинхронная загрузка тегов.

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

Настройка Google Tag Manager

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

1. Переходим на официальную страницу Google Tag Manager и нажимаем на «Start for free». Проверьте, чтобы вы были авторизированы в аккаунте Google – это понадобится, чтобы зарегистрироваться на сервисе. Если у вас нет аккаунта, то можете создать его здесь.
2. Следующим шагом выбираем «Создать аккаунт».
3. Указываем все необходимые параметры и жмем «Создать». Обратите внимание на целевую платформу – здесь необходимо указать то, для чего будет использоваться инструмент, например, для приложения или веб-сайта. После этого потребуется принять пользовательское соглашение – просто жмем «Да».
4. В результате перед нами отобразится наш личный аккаунт и небольшое окно, в котором содержится весь необходимый код. Он нам и потребуется – копируем его.
5. Если вы случайно закрыли окно, нажмите на уникальную надпись, отмеченную на скриншоте ниже.
6. Осталось разместить указанный код в шапку (<head>) вашего сайта.

В данном случае файл, в котором был прописан код, называется index.html. Также он может именоваться как header.php или как-то иначе, если сайт расположен на CMS.

Основные параметры

Прежде чем переходить к настройкам сервиса, давайте остановимся на некоторых понятиях, относящихся к GTM. Это контейнер, тег, триггер и переменная – именно они нас встречают на главной странице сервиса.

• Контейнер – это некая оболочка, где хранятся все теги сайта или мобильного приложения. Его основной контент – код, используемый на сайте и отвечающий за активацию тегов прочих ресурсов.
• Тег – часть кода JavaScript, которую необходимо выполнить. С помощью данной операции можно провести отслеживание трафика и поведения посетителей, анализ эффективности рекламы, ремаркетинга и таргетинга.
• Триггер – выполняет или блокирует тег. Он включает в себя определенное событие, например, загрузку страницы или переход по ссылке. Также триггер позволяет настроить фильтры; один из них – показ URL страниц, где должен срабатывать тег.
• Переменная – основной параметр, получающий определенные значения.

Объясняю на пальцах: в каждом аккаунте есть как минимум один контейнер. В нем располагается один или несколько тегов – например, код Google Analytics. Для него устанавливается триггер, который определяет условия срабатывания тега и отправки им данных. После того как триггер срабатывает, он считывает определенную переменную. Например, встроенная переменная Click Text содержит текст, а Click URL — URL. Данный триггер активируется, если значение переменной совпадает с заданными пользователем параметрами: кликом по элементу с указанным текстом или URL.

Именно с переменных и начинается базовая настройка Google Tag Manager.

Настройка переменных

Все переменные в Google Tag Manager разделяются на два типа: встроенные и пользовательские. Сейчас нам достаточно будет встроенных значений, но в последующем вы можете настроить свои переменные.

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

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

Пройдемся по каждому типу встроенных переменных:

• Страницы. Может принимать полный URL, относительный URL, имя хоста страницы и источник запроса.
• Утилиты. Используются для взаимодействия с событиями, ID и версией контейнера, названием рабочей области и ID HTML-тега.
• Ошибки. Данный тип позволяет посмотреть контейнер в режиме отладки, а также сообщить об ошибке, указать ее URL либо номер строки, где она зафиксирована.
• Клики. В качестве переменной можно использовать HTML-элементы, классы элементов, URL, текст элемента, атрибуты target и ID элемента.
• Формы. Может принимать элементы и классы формы, атрибуты target и href, а также текст формы.
• История. Этот тип переменных поддерживает активацию триггера при изменении хеша URL. Переменная может принимать новый и старый фрагмент URL, а также новое и старое состояние истории или источник истории.

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

Настройка триггеров

Для начала давайте рассмотрим основные параметры триггеров, а затем перейдем к их настройке. Всего их 4 типа:

Просмотр страницы

• Модель DOM готова – выполняется во время загрузки страницы.
• Окно загружено – просмотр фиксируется при полной загрузке страницы и всех ее элементов.
• Просмотр страницы – активируется при переходе на страницу.

Клик

• Все элементы – действие по любому кликабельному элементу.
• Только ссылки – действие по клику на ссылку.

Взаимодействия пользователей

• Видео на YouTube – срабатывает при просмотре видео.
• Видимость элемента – срабатывает в зависимости от видимости элемента; выбрать отслеживание можно по ID элемента либо CSS-селектору.
• Глубина прокрутки – позволяет определить скролл страницы в вертикальной или горизонтальной прокрутке.
• Отправка формы – триггер запускается при отправке форм, при этом срабатывание можно настроить только на успешную отправку формы.

Другое

• Группа триггеров – позволяет добавить несколько триггеров в одну группу.
• Изменение в истории – отслеживает изменения в хэше URL-страницы.
• Ошибка JavaScript – срабатывает при появлении ошибки в JavaScript; также можно настроить триггер на ошибку в определенной строке кода.
• Специальное событие – лучшим примером пользовательского события является установка кода Яндекс.Метрики и Google Analytics для отслеживания формы, если стандартный тип триггера «Отправка формы» не сработал.
• Таймер – предназначен для срабатывания события через определенный отрезок времени. Примером может служить срабатывание таймера каждые 25 минут для продления отслеживания сеанса Google Analytics.

Вот такой функционал поддерживают триггеры. Давайте создадим один триггер, который будет взаимодействовать с переменной. Для этого выполним следующее:

1. Открываем раздел «Триггеры» и выбираем «Создать».
2. Следующим шагом кликаем по области «Настройка триггера».
3. Для примера выберем триггер по клику «Только ссылки».
4. Указываем условие активации «Некоторые клики по ссылкам», выбираем предварительно созданную переменную и прописываем ссылку, переходы по которой будем отслеживать.
5. В завершение жмем «Сохранить».

Готово! Мы создали свой первый триггер. При необходимости вы можете настроить более точное срабатывание с помощью дополнительных параметров.

Настройка тегов

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

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

Здесь мы можем выбрать один из тегов, который соответствует нужному нам сервису. Пусть это будет «Google Аналитика: Universal Analitics».

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

Найти идентификатор можно в аккаунте Google Analytics, Администратор -> Настройки ресурса -> Идентификатор отслеживания.

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

В завершение сохраняем созданный нами тег.

Готово! Тег был создан, теперь давайте проверим его работоспособность – для этого в Google Tag Manager есть специальная функция «Предварительный просмотр».

На отобразившейся странице вводим ссылку на свой сайт и жмем «Start».

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

Осталось опубликовать контейнер с созданным тегом. Для этого на главной странице выбираем «Отправить».

На этом настройка Google Tag Manager завершена. Как только вы нажмете на кнопку «Отправить», перед вами отобразится новое окно, в котором можно указать название версии и ее описание. После внесения изменений останется нажать на кнопку «Опубликовать».

Теперь вы знаете, как можно использовать Google Tag Manager. Спасибо за внимание!