Google Tag Manager — что это такое и для чего он нужен

Google Tag Manager (он же ГТМ или гугл таг менеджер) используется для того, чтобы более удобно обновлять и настраивать коды отслеживания веб-аналитики и рекламных систем.

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

Термин Определение
Тег Куски кода, которые вам необходимо поставить на своей сайт или приложении. В качестве тегов может выступать Яндекс Метрика, Гугл Аналитика или же счетчик Фейсбука.
Триггер Событие при котором должен срабатывать тег. Например, просмотр страницы или клик по какой-то определенной кнопке на сайте.
Переменные У программистов переменные используются для хранения каких-либо значений. Это как некая коробка, куда вы можете положить название страницы на которой был пользователей. Или, например, там можно хранить текст кнопки по которой пользователи сайта кликали.
Контейнер Место в котором хранятся все ваши теги, триггеры, переменные и другие настройки. И через этот контейнер происходит внедрение тегов на сайт.

Как было в древние времена или чем ГТМ выручает

Когда-то давно, для того, чтобы установить все необходимые счетчики на сайт и настроить их работу, было необходимо их внеднять непосредственно в програмный код движка вашего сайта. И выглядело это как-то так:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-XXXXXX-1');
    </script>
    <script type="text/javascript">
        window.vkAsyncInit = function() {
        VK.Retargeting.Init("VK-RTRG-XXXXXX");
        };
        window.vkAsyncInit();
    </script>
    <!-- Facebook Pixel Code -->
    <script>
          !function(f,b,e,v,n,t,s)
          {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
          n.callMethod.apply(n,arguments):n.queue.push(arguments)};
          if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
          n.queue=[];t=b.createElement(e);t.async=!0;
          t.src=v;s=b.getElementsByTagName(e)[0];
          s.parentNode.insertBefore(t,s)}(window, document,'script',
          'https://connect.facebook.net/en_US/fbevents.js');
          fbq('init', 'XXXXXX');
          fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
      src="https://www.facebook.com/tr?id=XXXXXX&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Facebook Pixel Code -->
    <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(XXXXXX, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/XXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->

    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
    <link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
    <?php endif; ?>
    <?php wp_head(); ?>
</head>

Сразу после открывающегося тега <head> подряд идут всего лишь четыре счетчика. При этом они занимают достаточно много места и со временем в них достаточно легко было запутаться. Особенно при условии того, что их нужно периодически модернизировать и добавлять всевозможные временные счетчики. Например, вы запускаете рекламу через программатик-подрядчика на месяц. И вам необходимо установить их код к себе на сайт, а затем удалить его. Подобных счетчиков может быть достаточно много и как правило их забывали поддерживать в актуальном состоянии.

С помощью GTM код, который нужно разместить напрямую в коде сайте значительно уменьшился. Например, вот так бы выглядел код выше при использовании GTM:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<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-XXXXXX');</script>
    <!-- End Google Tag Manager -->

    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
    <link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
    <?php endif; ?>
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

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

Код значительно сократился в объемах и при этом он выполняет точно такие же функции, как и код, который был ранее. Теперь счетчики Яндекс Метрики, Google Analytics, VK и Facebook внедряются с помощью GTM.

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

Установка GTM на сайт

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

  1. Перейти по адресу https://tagmanager.google.com/.
  2. Авторизироваться или создать аккаунт в Google.
  3. Создать аккаунт в ГТМ и установить его на сайт.

О последнем пункте поговорим чуть подробнее.
Первым делом создаем аккаунт.
Нажимаем кнопку создать аккаунт в GTM

Затем заполняем название вашей компании, выбираем страну и указываем адрес сайта.
Настройки при создание аккаунта в ГТМ

Далее появляется соглашение с Гугл, которое нужно принять, чтобы начать пользоваться сервисом. Или не принять и не пользоваться.

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

код_ГТМ

Далее ваши действия могут различаться в зависимости от движка вашего сайта (CMS). Как правило, во всех движках, в том числе самописных, код разбивают на разные блоки: шапку сайта, тело сайта, подвал сайта и другие. Поэтому в первую очередь вам нужно найти файл, который отвечает за вывод шапки сайта. И в большинстве случаев подобный файл называется header.php. В CMS под названим Opencart и его производных, файл называется header.tpl.

Заключение

С появлением ГТМ менеджера работа со счетчиками веб-аналитики и рекламных систем стала значительно проще. Менеджер тегов позволяет совместно работать над настройкой аналитики, значительно проще стала настройка многих событий, есть отладчик тегов, есть сохрание версий и история изменений, а так же ряд других полезностей.

Использование ГТМ в работе с аналитикой можно сказать стала обязательна для компаний и проектов любого уровня и масштабов (если только у вас проект по нагрузке не уровня Яндекса или Гугла).

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