Корректное подключение Google Tag Manager и Google Analytics

Коллеги, создаю топик, в котором можно будет поделиться вопросами/ответами, рекомендациями по именно корректной настройке кодов Google Tag Manager и Google Analytics на сайтах под управлением InstantCMS.

Надеюсь, что общими усилиями удастся накопить ценную информацию, небольшую базу знаний по этой теме.

Для начала вот ссылки на существующие топики форума, в которых затрагивается вопрос Google Analytics:

В какой файл устанавливать код Google Analytics
/forum/thread22756-1.html

Код Google Analytics
/forum/thread33816-1.html

Реально совсем не густо, поэтому хочется эту тему охватить более целостно.
Коллеги, подключайтесь!

Хочу сказать, что Google Analytics — это большая, мощная система веб-аналитики, на базе которой можно строить так называемую "сквозную аналитику", то есть комплексную аналитику маркетинга и продаж с возможностью отслеживания цепочек от затрат на рекламу до конверсий, продаж и прибыли, причём как в целом за определённый период, так и в срезах по различным рекламным кампаниях, группам объявлениями и даже отдельным ключевым словам.

В этом плане Google Analytics не заменяет, а дополняет Яндекс.Метрику.

Далее, по поводу Google Tag Manager-а.

Google Tag Manager (GTM) — это другой удобный, мощный, универсальный инструмент в руках опытного веб-аналитика.

Самая основная функция GTM — это добавление в исполняемый код сайта JS-скриптов и других HTML/CSS/JS-вставок, которые можно добавлять/удалять, включать/выключать на сайте без необходимости каждый раз ковыряться в исходном коде или в настройках CMS.

Если говорить утрированно, GTM — это такой универсальный адаптер. В код сайта нужно единожды вставить код GTM, а затем уже в GTM можно подключать различные коды, включая коды отслеживания Google Analytics, Яндекс.Метрики, множества других систем и сервисов.

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

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

И на самом деле — многое другое.

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

Вебмастера-кодеры (любители ковыряться в коде, любители всё настроить своими руками, напрямую в движке сайта, ...) такой инструмент могут не оценить.

Но более зрелые, мудрые, качественно и системно работающие специалисты — однозначно оценят такой инструмент.
Хотя чтобы освоить его на практике — вебмастерам и веб-аналитикам нужно изменить свою привычную парадигму, приучиться к достаточно непривычной (на мой взгляд) логике и внутренней структуре Google Tag Manager.

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

Поэтому правилом хорошего тона в веб-аналитике считается подключение Google Analytics не напрямую к сайту, а через Google Tag Manager.

И специально для вебмастеров, сайтоделателей (а не комплексных сайтопродвигателей) подчеркну, что Google Analytics — это не "счётчик на сайте", а мощный комплексный инструмент для продвижения сайта и бизнес-проекта в целом.

В руках толкового веб-аналитика и/или диджитал-маркетолога на базе Google Analytics можно и нужно выстраивать систему мониторинга эффективности работы самого сайта, а также эффективности различных источников трафика.

Это настраивается с помощью целей, сегментов, представлений, фильтров, кастомных отчётов.
А также — с помощью событий, конверсий и микроконверсий, основанных на отслеживание выполнения пользователями полезных действий, событий на сайте: кликов по кнопкам, пролистываний, заполнений форм, копирования информации, кликов по номерам телефона и так далее.

Всё это настраивается в связке Google Tag Manager + Google Analytics.

В дополнение к Google Analytics можно и нужно аналогичным образом настраивать связку Google Tag Manager с Яндекс.Метрикой, Пикселем Фейсбука, Пикселем ВКонтакте, дополнительными системами вроде Роистата, Пивика, Хотджара и так далее.

При этом коды перечисленных систем можно устанавливать на сайте ЛИБО напрямую, ЛИБО с помощью продвигаемого мной GTM. :)

Теоретически если вставлять коды напрямую — такая схема будет работать чуть-чуть надёжнее, ведь срабатывание кодов различных систем не будет зависеть от предварительного их вызова в GTM.

Но на практике мы теряем гибкость и робастность.

Поэтому я рекомендую GA (Google Analytics) и часть других систем обязательно заводить через GTM, но, например, Яндекс.Метрику подключать напрямую к сайту, не через GTM. Чтобы в случае чего можно было сравнить показатели в GA и ЯМ.

Соответственно, когда мы говорим об установке на сайте кода Google Analytics — то нам нужно установить на ВСЕХ страницах сайта код "универсального адаптера" Google Tag Manager, а затем в уже в интерфейсе GTM настроить работу скрипта GA (в терминалогии GTM этот скрипт называется "тэгом", а правила его срабатывания на сайте — "триггером").

Код GTM состоит из двух частей.

Для корректной работы GTM важно вставить эти коды корректно, согласно инструкциям.
Одну часть — в блок <head></head>, другую — в блок <body></body>.

Рекомендуется — вставлять именно в начало этих блоков.
Но это уже не так критично.

Вставлять можно так, как указано в данном коротком топике:
/forum/thread33816-1.html

То есть:
либо напрямую в файле main.tpl.php актуально шаблона сайта
либо с помощью виджета «Подключение css/js и вставка кода» (https://instantcms.ru/addons/wdaddcss.html).

Второй способ я не проверял, если проверите — отпишитесь, пожалуйста!

Вставлять код GTM так, как описано в данном топике для GA (/forum/thread22756-1.html, цитата: "Делать все по правилам хорошо, но ведь для того они и созданы чтобы их нарушать :)") — настойчиво не рекомендую!

Просто если вставлять просто базовый код счётчика GA — да, такое канает (цитата: "Понял, спасибо! Добавил код в main.tpl.php перед </head> Правда, на сайте Google Analytics показывает что не видит нужный код на моем сайте, но когда посмотрел на страницы отчетов, увидел что уже считает.").

Но если мы хотим настроить GTM как универсальный адаптер для кодов различных систем, включая GA, пиксели Фейсбука, ВК, код Яндекс.Метрики и других систем — тогда лучше сделать всё корректно.

После установки кода GTM можно проверить, что он корректно работает с помощью сервиса Tag Assistant или аналогичного плагина для браузера Chrome.

А после настройки уже в GTM кода отслеживания Google Analytics (Universal Analytics или новой версии GA4) — можно и нужно проверить корректность работы связки "GA + GTM + движок сайта + сайт" с помощью посещения сайта в браузере и одновременного отслеживания показателей в отчёте Realtime ("В реальном времени").

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

Поделился тем, что я знаю по данной теме.

Далее предлагаю писать свои вопросы.

А также (очень важно!) — пишите, пожалуйста, в данном топике свои фидбэки, что полезно / не полезно, с чем согласны / не согласны, что сработало / не сработало.

У меня тоже есть вопрос, позже напишу его ниже.

Коллеги, выше я поделился с Вами общей информацией, моим профессиональными рекомендациями НЕ как вебмастера-любителя, а именно как профессионального диджатал-маркетолога, руководителя проектов по продвижению многих бизнес-проектов, веб-аналитика-ПРАКТИКА, сертифицированного специалиста Google Analytics, Google Tag Manager и множества других аналитических инструментов, вплоть до Machine Learning и Big Data.

По указанной схеме я настраивал связку "сайт + GTM + GA и другие системы" для многих сайтов.

Но при настройке своего небольшогог проекта именно на базе InstantCMS столкнулся с определёнными сложностями.
Собственно, это было поводом погуглить инфрмацию. И я ОЧЕНЬ СИЛЬНО удивился, что информации именно веб-аналитике для Инстанта — колоссально мало, про связку InstantCMS + Google Tag Manager — вообще отсутствует!

Если Вам эта тема близка, интересна (нужны знания или наоборот есть свои знания, опыт) — напишите свои вопросы, мнения в данном посте.
Или просто напишите: "+1".

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

Будем по кусочку есть этого слона. ))

Итак, какая ситуация возникла у меня и как я её решил.

Сначала я установил код GTM согласно тому, как описано в данных двух топиках:
/forum/thread22756-1.html
/forum/thread33816-1.html

А именно:
1. У меня на сайте уже установлен замечательный шаблон GoodTheme (https://instantcms.ru/addons/goodmade-theme.html)
2. Я пошёл в папочку /template/goodtheme/, нашёл там файл main.tpl.php.
3. В данном файле я нашёл блоки <head> и <body>, и в начале этих блоков добавил нужные части кода GTM.

До этого, конечно же, я создал аккаунты, ресурсы GTM и GA, связал их между собой.
Если Вы ранее не работали с GTM — с этим придётся поразбираться.
Но эти действия выполняются ВНЕ сайта и движка, связка с сайтом выполняется собственно указанными выше тремя действиями.

Но! Ожидаемого результата, корректной работы связки "сайт + GTM + GA" — я не получил.

А именно:
1. В браузере Chrome на ноуте всё заработало корректно, посещение сайта корректно передавались в GA.
2. В браузере Firefox на ноуте — данные в GA не поступали.
3. Аналогично — в браузере Chrome и дефолтном адроидном (или Ксиомовском, толком и не знаю) на смартфоне.

То есть — нихрена не заработало.

Как я решил эту проблему.

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

Отмечу, что я нахожусь в Украине, здесь у нас блокируются сервисы Яндекса, ВК и МейлРу Групп.
Не хочу затрагивать тему политики, но на мой субъективный взгляд, — это полнейшая херня.

В шаблоне GoodTheme и возможно даже в самом движке InstantCMS есть вызовы различных сервисов, типа Вебмастер.Яндекс, кнопки поделиться от ВК и Одноклассников и так далее.

Возможно, ПЕРВОпричина заключалась в этом.
Браузер пытался запустить скрипты, часть из них записало, и он рубил их, а также как-то затрагивал и код GTM.

Хром на ноуте этого не делал, а Хром и другой мобильный браузер на смартфоне — поступал более жёстко.

С Фаерфоксом оказалась другая причина. Там капризничает сам браузер, не хочет корректно обрабатывать код уже именно GA, который вызывается из GTM.

Что я сделал, когда локализировал проблему.

1. Я вернул исходное состояние до выполнения шагов 1-3, то есть удалил код GTM из файла main.tpl.php.
2. В Фаерфоксе включил стандартный уровень защиты.
3. Установил и добавил в шаблон виджет «Подключение css/js и вставка кода» (https://instantcms.ru/addons/wdaddcss.html).
4. В него добавил две части кода GTM, каждый в свою часть.
5. Проверил, что посещения И с Фаерфокса, И с мобильных браузеров начали корректно поступать в отчёт Realtime (В реальном времени) Google Analytics.

Таким образом локальную проблему с тем, что данные из мобильных браузеров не попадали в GA — я решил.
Но точную первопричину я полностью не установил и не решил.

Аналогично — с Фаерфоксом.

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