Google Tag Manager: что это такое и как установить на сайт

Что такое Google Tag Manager? Я не силен в терминах, поэтому объясню простым языком, чтобы всем было понятно. Если совсем упростить, то GTM — это контейнер, в котором хранятся различные коды, которые необходимо иметь на сайте: коды счетчиков, [отслеживания конверсий], [таймеров отказа для Google Analytics] и так далее. Хранить все это в формате данного очень удобно, ведь в подавляющем большинстве случаев достаточно всего лишь один раз подправить код сайта, а дальнейшие вставки кодов производить уже в GTM. Как зарегистрировать и добавить контейнер в Google Tag Manager, я опишу ниже.

Приступим к регистрации в Google Tag Manager. Заходите по ссылке, регистрируйтесь (или выполняйте вход, если уже зарегистрировались). Далее вам предложат ввести имя аккаунта, можете написать свое имя, это не имеет значения. На следующем шаге вам предложат ввести имя контейнера и место его использования: веб-сайт, приложение iOS, приложение Android, AMP (Accelerated Mobile Pages — технология супер-быстрой загрузки страниц для мобильных устройств). Скорее всего, вас интересует именно сайт. По крайней мере именно на его примере я и буду писать данный пост :). Выбирайте необходимые опции, подтверждайте соглашение с условиями сервиса и переходите дальше.

Как создать Google Tag Manager

На следующем экране вас сразу будет ждать готовый код GTM. Здесь указано два кода: первый заключен в тэг <script>, второй — в <noscript>. Нас интересует только код из первого окна. Второй код применяется на сайтах, не поддерживающих JavaScript, что встречается крайне редко. Если вы понимаете о чем идет речь, то вам не составит труда добавить его самим.

Код установки Google Tag Manager

Вы конечно можете поступить по инструкции Google: найти файл header.php вашего сайта/темы оформления и вставить код — особенно если понимаете как это сделать, но, сразу скажу, что устанавливать GTM напрямую в код сайта — моветон. Тема оформления может обновиться, движок, etc. Обновление может перезаписать файл header'а, а вместе с ним и ваш GTM.

Для вставки сторонних скриптов на сайт лучше использовать специальные плагины, которые добавляют произвольный код непосредственно в нужную вам часть сайта, например, в нужный нам Header. Если речь идет про Open Cart, можете попробовать себя в написании собственного модуля OCMOD. В случае с WordPress, такое решение уже есть. Плагин называется Custom css-js-php. Он на английском, но нам от него нужно совсем не много, поэтому проблем не возникнет.

Поскольку мой сайт работает на WordPress, то и описывать я буду случай WordPress. Устанавливаем Custom css-js-php.

Итак, после установки плагина, выбирайте его в меню WordPress, далее пункт «Add JS». Здесь в поле Title указывайте произвольное название фрагмента кода, выбирайте тумблер wp_head, и в поле ниже вставляйте полученный ранее код GTM. !!Важно!! Удалите тэги <script> и </script> в окне плагина, т.к. туда нужно вставлять JS код в «сыром» виде. Далее сохраняйте.

Плагин Custom CSS-JS-PHP в панели управления WordPress

Пропись кода в Custom CSS-JS-PHP

Поздравляю, вы только что установили Google Tag Manager на свой сайт! Чтобы проверить, что все выполнено верно, вернитесь обратно к GTM, закройте окно кода и нажмите кнопку «Предварительный просмотр» в верхнем-правом углу. Теперь перейдите на свой сайт и обновите страницу. Если вы все сделали правильно, то вы увидите на сайте панель отладки. Чтобы выключить её, вернитесь обратно и нажмите «Выйти из режима предварительного просмотра» и обновите страницу на сайте.

Проверка правильности установки Google Tag Manager

Панель отладки GTM

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

Ваш e-mail не будет опубликован.