Уведомления в Slack с помощью Google Tag Manager

Руководство по настройке отправки уведомлений в корпоративный мессенджер Slack с помощью Google Tag Manager.

Вводная часть

Несколько дней назад я общался со своим другом из рекламного агентства на тему Google Tag Manager и его возможностях относительно отслеживания различных уведомлений с сайта. Ему очень понравился способ получения заявок с сайта в Telegram, и он спрашивал меня, возможно ли отправлять такие же нотификации с помощью диспетчера тегов Google, только в Slack.

Slack - это корпоративный мессенджер для организации общения (текст, голос, видеосвязь) посредством рабочих пространств и отдельных каналов. Еще проще, то Slack - командный мессенджер для работы над конкретным проектом. Он очень популярен в мире у многих компаний, поскольку легко и просто позволяет собрать всех членов команды, инструменты и файлы в одном месте. Когда я работал в агентстве, мы тоже использовали его в качестве основного способа коммуникации внутри команд и разных отделов. Slack популярен и тем, что в нем можно создавать сообщества по интересам, общаться и делиться знаниями с другими.

Примечание: в конце июля 2021 года Salesforce купил Slack за 27,7 миллиардов долларов.

Кто-то использует для общения и работы Telegram, кто-то WhatsApp, кто-то Slack, а кто-то социальные сети. У каждого из нас есть выбор. А поскольку Slack очень востребован среди специалистов нашей отрасли, оставить его без внимания я просто не мог. Благодаря моему другу и проблеме, которую он озвучил, на свет появился этот материал.

Если при описании способа для Telegram мне потребовалось использовать нестандартные приемы и собственные наработки, то для Slack и Google Tag Manager уже существует готовое решение, которое можно сразу использовать. И благодарны мы должны быть за это Джулиану Джуенманну (Julian Juenemann), основателу проекта Measureschool и популярного Youtube-канала по веб-аналитике. Пару лет назад я брал у него интервью, ознакомиться с которым вы можете по ссылке.

• Проект на GitHub;
• Видео на YoTube;

Благодаря его шаблону тега Slack Webhook вы сможете получать различные уведомления с сайта в канал Slack через собственное приложение и webhooks (вебхуки). Например:

• когда кто-то оставил заявку или совершил покупку;
• отслеживать ошибки (в том числе и ошибки 404);
• когда пользователь скачал какой-нибудь файл;
• когда кто-то просмотрел 100% видео;
• когда посетитель использовал промокод;
• любые другие сценарии, которые вы планируете отслеживать.

Давайте перейдем к настройке уведомлений в Slack с помощью Google Tag Manager. Весь процесс сводится к 2 основным блокам:

1. настройка на стороне Slack;
2. настройка в Google Tag Manager.

Настройка на стороне Slack

Перейдите по ссылке и создайте новое приложение с помощью кнопки Create an App:

Выберите способ создания приложения с нуля (From scratch):

Укажите название приложения (App Name) и ваше пространство Slack (Pick a workspace to develop your app in), для которого будет использоваться это приложение.

Пример отслеживания 404 ошибок очень показателен. Его демонстрировал Джулиан в своем видео. Поэтому давайте выполним такие же настройки. В качестве примера я назову приложение Ошибки 404, а рабочее пространство у меня одно, и оно называется Новое рабочее пространство (у вас может быть по-другому).

После ввода информации нажмите Create App. Через несколько секунд вас перенаправит на страницу с настройками созданного приложения.

После этого необходимо создать пользовательского бота. Для этого перейдите в меню App Home и напротив раздела Your App’s Presence in Slack нажмите кнопку Edit.

Задайте боту интерфейсное название (Display Name) и никнейм (Default username), по которому вы сможете к нему обращаться. Например, как у меня - slackBot и mybot:

Нажмите Добавить (Add).

На следующем шаге на вкладке Basic Information выберите опцию Incoming Webhooks:

Именно эта настройка отвечает за публикацию сообщений из внешних источников в Slack. На следующем шаге включаем опцию:

Пролистываем в самый конец страницы, пока не увидим кнопку создания нового вебхука для рабочего пространства (Add New Webhook to Workspace).

Нажмите на нее. В следующем окне выберите из списка канал, в который будут приходить уведомления. Нажмите Разрешить (Allow).

Если вы все сделали верно, то в выбранном канале должно появится уведомление об успешной интеграции приложения с этим каналом:

Вернитесь на сайт Slack в меню Incoming Webhooks. В самом низу у вас появится ссылка на вебхук (Webhook URL):

Скопируйте его, он нам пригодится при настройке тега GTM.

Настройка в Google Tag Manager

Откройте свой Google Tag Manager и в разделе Теги создайте новый тег. На выборе типа тега перейдите в галерею шаблонов сообщества:

В строке поиска начните вводить Slack. Вы увидите шаблон тега Slack Webhook от measureschool:

Добавьте его в свою рабочую область:

После этого вам откроются настройки тега, которые можно задать под себя:

Их не так много, всего три поля:

1. Slack Webhook URL - ссылка на вебхук из интерфейса Slack, которую вы сохранили на предыдущем шаге;
2. Slack Message Text - произвольный текст сообщения, который вы хотите отправить в канал Slack;
3. Use advanced Variable - пользовательская переменная (возвращает объект), чтобы обеспечить отображение сниппета внутри канала Slack. Является продвинутой настройки и для отправки уведомлений необязательна. Подробнее читайте в официальной документации Slack.

Последнюю настройку использовать необязательно, а вот первые две да. Поскольку мы настраиваем отслеживание 404 ошибок, то исходя из материала, который я публиковал ранее в своем блоге на эту тему, перед настройкой тега Slack Webhook следует:

1. создать триггер активации;
2. активировать встроенные переменные {{Page URL}} и {{Referrer}};

Первая переменная отвечает за путь к URL-страницы, на которой произошла ошибка, а вторая будет передавать значение страницы, с которой перешел пользователь, то есть предыдущая страница.

В результате итоговый тег может иметь такой вид:

Для него я добавил следующий текст:

К сожалению, поле Slack Message Text не поддерживает динамическую вставку переменных во время ввода {{ . Поэтому вам необходимо ввести переменные {{Page URL}} и {{Referrer}} вручную. В качестве триггера активации выберите настроенный по статье выше. Сохраните тег.

Проверить отправку уведомления об ошибке 404 в Slack можно с помощью режима предварительного просмотра. Для этого я сразу же в строке с веб-сайтом укажу несуществующую страницу, например: https://osipenkov.ru/takoj-stranicy-na-sajte-net.

Это позволит активировать тег и передать уведомление в канал Slack, где Page URL примет значение https://osipenkov.ru/takoj-stranicy-na-sajte-net, а Referrer - https://tagassistant.google.com/.

Как только режим отладки откроет эту страницу, на шкале событий GTM для соответствующего триггера вы увидите активированный тег Slack Webhook:

А в самом канале Slack отобразится новое уведомление с настроенными данными:

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

Как я писал в самом начале статьи, вы можете настроить получение уведомлений в канал Slack с помощью шаблона тега Google Tag Manager абсолютно на любые события, которые захотите. Здесь вы ограничены только своей фантазией!

P.S. Если вы используете серверное добавление тегов GTM (server-side tagging), то можете попробовать настроить уведомления через Slack Ping.