Google Tag Manager
Что за красавец и зачем нам нужен?
Выглядит вот так https://tagmanager.google.com/
Основное для чего нужен GTM - отслеживание дополнительных событий на сайте - скролы, клики на текст, на кнопки, которые не засекает фб через свою настройку.
Грубо говоря вы сможете прилепить скрипты и отслеживание ко всем элементам сайта от текста, до URL.
Сперва регистрируемся по ссылке, после жмем создать аккаунт - все интуитивно понятно.
Внутри также создается контейнер под работу с конкретным сайтом.
Да, пока все звучит жутко непонятно, но это нормально. Идем далее.
Структура GTM
Наша работа будет идти с 2-мя направлениями - теги и триггеры
Тег - это определенная папка, куда вы складываете все свои скрипты. Каждому тегу вы закладываете отдельный скрипт.
Триггер - обозначает где нужный скрипт должен быть вызван или где он должен сработать на вашем сайте.
Когда вы будете регистрировать контейнер - GTM предложит выбрать условие либо под WEB (Сайты), либо под Mobile Applications (Приложения)
Чаще всего мы работаем с WEB, как вы понимаете)
Первое, что делаем после регистрации контейнера - переходим на вкладку переменные, нажать конфигурацию и включить вообще все чек боксы, которые там указаны.
Это подготовка GTM. Для дальнейшей работы нам необходимо установить сам контейнер на ресурс, если сайт не на платформе, то пишем прогерам, просим установить контейнер на сайт. Но сейчас уже большинство платформ поддерживают интеграцию (Tilda, LP) - просто находим окошечко GTM и вставляем туда код контейнера. Все как с пикселем.
Код, который закидываем находится вот тут
Если у вас кастомный сайт, то просто нажимаем на этот идентификатор и нам выпадает подробная инструкция как это все установить - копируем и отправляем прогерам прямо в личку.
После установки проверяем как все работает через расширение - Google Tag Assistant ( Не забудьте отключить блокировщики рекламы при проверке)
Устанавливаем на сайт, активируем расширение нажатием и обновляем ее. После этого GTA показывает нам все продукты гугла установленные на сайте. Если все ок, то будет гореть зеленый значок тега, если нет, то расширение станет красным или желтым и покажет в чем проблема.
Далее переходим обратно в наш Tag Manager и начинаем скриптовать сайт.
1) Создаем новый тег, описываем его FB-Pixel
2) Идем в тэг конфигурацию. Google хочет все поджимать под свои платформы, поэтому для FB вы конкретного варианта не найдете, поэтому выбираем Cutom HTML
И в открывшийся бокс закидываем код пикселя. Именно код, который длинный и выглядит как штука для проггеров.
Таким образом мы поставили в этот контейнер код пикселя. Теперь нам нужно настроить триггеры, где этот код будет срабатывать.
Мы выбираем All Pages. Сохраняем.
Теперь у нас есть в контейнере пиксель и триггер, где он скрипт должен срабатывать.
Нажимаем отправить.
GTM предлагает указать версию и описание изменений - можете добавить, что поставили код пикселя. Но в большей степени этот инструмент нужен не будет, так как вряд ли большинству нужно будет постоянно вносить огромное количество изменений и тестить их работоспособность.
Но все же обозначив версии вы можете переключаться между ними. Нафакапили что-то? - Откатываемся в версию 1.0
Как все проверить?
Нажимаем предварительный просмотр и открываем наш сайт.
Должно быть вот так
Снизу сводка от GTM, которая показывает все теги, которые у нас поставлены и какие триггеры работают.
Чтобы добавить больше кастомных событий - переходим в Facebook и в ручные настройки пикселя
Далее выбираем любой из вариантов и копируем его.
Выглядеть должно так:
<script>
fbq('track', 'Вот здесь пишем любое событие, которое мы хотим видеть');
</script>
Например
<script>
fbq('track', 'ClickOnButtonATC');
</script>
Указать можно все, что угодно. Зависит от ваших потребностей и фантазии.
НО СТРУКТУРА СКРИПТА ДОЛЖНА ОСТАТЬСЯ ТАКОЙ ЖЕ.
То есть меняем только то, что в кавычках.
Переходим в GTM
Добавляем новый тег.
Все те же действия - пользовательский HTML и закидываем туда кусок кода
Теперь по триггерам
По умолчанию только PageView, поэтому создаем новый
Выходит список возможных вариантов. Под мою цель - клик на кнопку, я выбираю раздел клик (все элементы)
Выбираем некоторые клики
Вот дальше будет еще интереснее - переходим на сайт. Задача найти ID элемента к которому будем цеплять скрипт и вписать его в триггер.
Нажимаем правой кнопкой мыши на нужный элемент и нажимаем посмотреть код. Выделяется код, который отвечает за этот элемент. В моем случае - могу прицепить код только по классу, его вы видите по стрелке.
Ставлю класс в GTM
Сохраняем, обязательно нажимаем опубликовать и обновить предпросмотр, обновляем страницу сайта ииии...
При нажатии на сайте все работает исправно.
Так можно прицепить к элементу текста видео и вообще чего вам только не вздумается. Тем более, что сам фб иногда упрямится и не дает установить события на некоторых кнопках.
Таким образом вы без программистов сможете обеспечить себе настройку базовых и кастомных событий самостоятельно за 15-20 минут. Чаще всего инструмент нужен либо в сложных сайтах, либо в моментах, где инструмент установки от FB уже не вывозит какие-либо элементы.