Как настроить Google Tag Manager для WordPress

Диспетчер тегов Google — настолько мощный инструмент, что я был потрясен отсутствием информации при исследовании этого поста. Ну, не совсем «отсутствие информации» как таковой, а очевидная неспособность нескольких доступных сообщений объяснить, что такое Диспетчер тегов Google и что он делает.

Если вам нужна дополнительная информация о Диспетчере тегов Google и о том, как его настроить на своем сайте WordPress, не ищите дальше. Потому что вы пришли в нужное место.

В этом посте мы расскажем:

• Что такое Диспетчер тегов Google
• Почему вам нужно использовать инструмент, и
• Как установить его на свой сайт WordPress вручную или с помощью плагина

Кроме того, мы продемонстрируем Диспетчер тегов Google в действии, чтобы дать вам представление о том, чего вы можете достичь с помощью уникальной системы управления тегами. Мы говорим это, потому что существует ряд других систем управления тегами, таких как Tealium, Qubit и Adobe Experience Platform Launch, и это лишь некоторые из них.

В общем, есть чему поучиться, так что давайте сразу приступим.

Что такое Диспетчер тегов Google?

Диспетчер тегов Google — отличный инструмент для ваших потребностей в цифровом отслеживании. Это позволяет вам размещать теги на вашем веб-сайте без редактирования кода. Неясно много? Чтобы дать вам более четкое представление, давайте сначала определим тег с точки зрения цифрового отслеживания.

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

Хорошим примером тега является код отслеживания Google Analytics, который вы добавляете на свой сайт, чтобы отслеживать трафик.

Вся цель тега — собирать данные о посетителях для аналитики и инструментов цифрового маркетинга. Компании, предоставляющие эти теги, например Google Analytics, AdWords, Facebook, LinkedIn и т. д., известны как поставщики тегов.

Почему Диспетчер тегов Google?

Традиционно реализация тегов на вашем веб-сайте WordPress означала редактирование кода вручную (или, скорее, напрямую). В WordPress это означает редактирование различных файлов, таких как header.php и  functions.php среди прочих.

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

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

Что делать?

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

Вот несколько преимуществ, которые помогут вам понять суть:

• С Диспетчером тегов Google вам больше никогда не придется копировать блоки кода на свои страницы.
• Вы можете перенести все существующие теги в Диспетчер тегов Google.
• Диспетчер тегов Google предлагает вам единый контейнер для развертывания нескольких тегов и управления ими с интуитивно понятной панели управления, которая упрощает весь процесс.
• Эта система управления тегами позволяет быстро развертывать теги. Например, вместо того, чтобы копировать и вставлять код Google Analytics на свой сайт, вам просто нужно добавить свой идентификатор отслеживания Google Analytics в Диспетчер тегов Google и вуаля — Google Analytics работает на вашем сайте.
• Настроить Диспетчер тегов Google на вашем сайте WordPress так же просто, как A, B, C. Добавить GTM в WordPress вручную очень просто. Использование плагина еще проще. Выберите метод, который работает для вас.
• Диспетчер тегов Google поможет вам собрать много данных для ваших маркетинговых нужд. Данные, которые вы, возможно, не сможете получить с помощью другого программного обеспечения для отслеживания. Это приводит к своевременным и точным данным — тем данным, которые означают всю разницу между успехом и неудачей.
• Нажмите и перейдите, чтобы добавить теги на свой сайт, поскольку Диспетчер тегов Google поставляется со многими встроенными интеграциями, такими как AdWords, Analytics, Google Optimize, Adometry, Crazzy Egg, LinkedIn и Shareholic среди других.
• Кроме того, вы можете создавать неограниченное количество тегов благодаря пользовательской поддержке HTML.

И все, что вам нужно сделать, это установить код Диспетчера тегов Google на свой сайт вручную или с помощью плагина.

Затем Диспетчер тегов Google «обработает» код JavaScript для вас, а затем предоставит функциональность вашему сайту через контейнер. Это вообще имеет смысл? Я очень надеюсь, что это так.

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

Будет миллион готовых функций, вы удивитесь, почему Диспетчер тегов Google бесплатен. Да, вы правильно прочитали. Это бесплатно. Но есть и премиум-версия с еще большим количеством функций и поддержкой 24/7. Тем не менее, я сомневаюсь, что вам когда-либо понадобятся премиум-функции в ближайшее время, потому что бесплатная версия упакована до краев. Упакован со всеми функциями, которые вам нужны для сбора данных, как профессионалы.

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

Минусы

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

Это не исчерпывающий список достоинств/недостатков, так что продолжим. Давайте засучим рукава и присядем и испачкаемся.

Как настроить Диспетчер тегов Google в WordPress

В этом разделе мы установим Диспетчер тегов Google на ваш сайт WordPress:

• Вручную и
• Через плагин

Без дальнейших церемоний, давайте приступим к делу.

Сначала создайте учетную запись Google Tag Manager.

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

Перейдите на сайт Диспетчера тегов Google. Войдите в свою учетную запись Google (или создайте учетную запись, если у вас ее еще нет), как показано ниже.

Вы будете перенаправлены на красивую панель администратора Google Tag Manager. Затем нажмите ссылку «Создать учетную запись», как показано на снимке экрана ниже.

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

Затем введите имя своего домена в поле Имя контейнера и выберите Интернет. После этого нажмите  кнопку «Создать», как мы подробно расскажем ниже.

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

Появится следующее всплывающее окно с кодами установки Диспетчера тегов Google.

Оставьте вкладку выше открытой, так как вам понадобятся эти два кода для ручной настройки Диспетчера тегов Google на вашем сайте WordPress. Как вы заметили, GTM предлагает инструкции о том, куда вставлять коды, но это может быть сложно, если вы абсолютный новичок.

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

Важные примечания, прежде чем продолжить:

• Сделайте резервную копию вашего сайта WordPress, прежде чем вносить изменения в файлы темы.
• А еще лучше создайте дочернюю тему WordPress и отредактируйте ее вместо родительской темы.

Настройка Google Tag Manager вручную

В новой вкладке войдите в панель администратора WordPress и перейдите в  раздел «Внешний вид» -> «Редактор».

Обратите внимание, что на изображении выше мы используем дочернюю тему бесплатной темы Elegant WordPress в нашем примере. Мы также скопировали пару файлов, например,header.php, footer.php, rlt.css  и 404.php в дочернюю тему. Мы вставим наши установочные коды Google Tag Manager в  файл header.php.

Кликните заголовок темы ( header.php ) в правом файловом навигаторе, чтобы запустить header.php в редакторе тем.

В нашей учетной записи GTM инструкции говорят, что вам нужно вставить первый код выше <head>, а второй код сразу после открывающего тега <body>.

Видите ли вы теги <head> и <body> в файле header.php ? Тег <body> в WordPress может выглядеть немного иначе. Например, наши выглядят так: <body <?php body_class(); ?>>. Вы видите это на изображении выше? Бьюсь об заклад, вы делаете так давайте двигаться вперед.

Скопируйте первый код из Диспетчера тегов Google и вставьте его высоко в  элемент <head>, как показано на изображении ниже.

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

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

Но допустим, вам не нравится редактировать код, и вместо этого вы предпочитаете использовать плагин.

Как добавить Диспетчер тегов Google в WordPress через плагин

В этом разделе мы будем использовать отличный плагин, известный как Диспетчер тегов Google DuracellTomi для WordPress. Он доступен в репозитории плагинов WordPress, что означает, что вы можете установить его прямо из панели администратора WordPress. Как говорится, приступим к работе.

Перейдите в  «Плагины» -> «Добавить новый» в меню администратора WordPress.

Введите Диспетчер тегов Google DuracellTomi для WordPress в поле поиска, и, как только вы найдете плагин, нажмите  кнопку «Установить сейчас».

После установки плагина нажмите кнопку «Активировать», как показано ниже.

Уведомление в верхней части экрана сообщит вам, что вам нужно ввести свой идентификатор GTM, чтобы начать использовать Диспетчер тегов Google для WordPress. Нажмите на  ссылку введите свой идентификатор GTM, как показано ниже.

Вы можете найти свой идентификатор GTM в своей учетной записи Диспетчера тегов Google, как показано ниже.

Скопируйте идентификатор GTM из своей учетной записи Диспетчера тегов Google и вернитесь в панель администратора WordPress. Вернитесь на свой сайт WordPress, вставьте идентификатор GTM и нажмите кнопку «Сохранить изменения», как показано ниже.

И это все! Вы только что узнали, как добавить Диспетчер тегов Google на свой сайт WordPress с помощью плагина. В путь, приятель, в путь. Ты быстро учишься.

Теперь, когда вы можете успешно добавить Диспетчер тегов Google на свой сайт WordPress, давайте протестируем его. Для этой части мы добавим Google Analytics на ваш сайт, не копируя код в ваш  header.php.

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

Как добавить Google Analytics на свой сайт WordPress с помощью Google Tag Manager

Вернитесь в Диспетчер тегов Google и нажмите «Теги» в меню навигации слева.

После этого нажмите кнопку «Создать», как показано ниже.

В появившемся всплывающем окне назовите свой тег, а затем кликните поле «Конфигурация тега», чтобы выбрать тег (в нашем случае Google Analytics).

Выберите Google Analytics — Universal Analytics , как показано на следующем рисунке.

Это возвращает вас к настройке тегов. Выберите «Просмотр страницы» в разделе «Тип отслеживания», так как мы хотим сообщать обо всех просмотрах страниц в Google Analytics. См. изображение ниже.

В разделе «Настройки Google Analytics» выберите «Новая переменная». Откроется новое поле, в котором вы должны ввести свой идентификатор отслеживания Google Analytics. Не забудьте назвать свою переменную, как показано на изображении ниже.

Чтобы найти свой идентификатор отслеживания Google Analytics, войдите в свою учетную запись Google Analytics и выберите учетную запись для своего сайта WordPress (сделайте это, если у вас есть несколько ресурсов в вашей учетной записи Google Analytics).

Затем нажмите  «Администратор» и перейдите к «Информация об отслеживании» -> «Код отслеживания». Вы должны увидеть свой идентификатор отслеживания, поскольку мы выделяем его номером элемента. 3 ниже.

Скопируйте идентификатор отслеживания и вставьте его в поле конфигурации переменной. Затем нажмите кнопку «Сохранить», как показано ниже.

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

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

Наконец, нажмите  кнопку Сохранить.

Проверка вашего тега

Ваш тег Google Analytics еще не работает на вашем сайте, но вы можете проверить, работает ли он, нажав кнопку «Предварительный просмотр», как показано на следующем изображении.

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

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

Вот оно! Конечно, вы можете видеть это на изображении выше? Да ладно, я добавил стрелку, чтобы вам было проще. Помните, что нам не нужно было добавлять Google Analytics (код JavaScript) непосредственно на наш сайт для сбора данных — все отчеты по данным выполняются с помощью диспетчера тегов Google.

То же самое относится ко всем тегам, которые вы добавляете через Диспетчер тегов Google — вы никогда не добавите код на свой сайт. Как мило?

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

Это запустит всплывающее окно, которое позволит вам назвать вашу версию и добавить описание. См. изображение ниже.

Наконец, нажмите кнопку «Опубликовать», как показано на изображении выше. В конце концов, ваша живая Google Analytics должна выглядеть примерно так:

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

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

Дополнительные ресурсы

Мы надеемся, что наше руководство указало вам правильное направление в том, что касается понимания и внедрения Диспетчера тегов Google на вашем сайте WordPress. Если вы хотите узнать больше, вот несколько дополнительных ресурсов (мы обещали, не так ли?) для вашего удовольствия от просмотра.

• Серия видеороликов Measureschool Google Tag Manager
• Поддержка Диспетчера тегов Google

Завершение нашего руководства по Диспетчеру тегов Google для WordPress

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

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

Есть мысли или вопросы по Диспетчеру тегов Google? Давайте учиться вместе. Поделитесь своими мыслями в разделе комментариев ниже. Удачи и счастливого интеллектуального анализа данных!