Отслеживание изменений контейнеров Google Tag Manager на GitHub с помощью локального запуска

Хотели бы вы автоматически отслеживать изменения в контейнерах Google Tag Manager? И я сейчас имею в виду не ваши контейнеры GTM, а чужие (конкурентов), чтобы шпионить за ними и знать, что и когда они настраивают у себя? Тогда добро пожаловать в отряд шпионов-аналитиков!

Этот материал - продолжение первой статьи, в которой разобран способ отслеживания через Google Cloud и Cloud Functions, а также рассказывается о том, что в принципе вы можете отслеживать благодаря опубликованному репозиторию на GitHub (автор - dustinrecko), и какой результат вы в итоге получите.

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

Однако для его выполнения требуется выполнить ряд настроек. Давайте сделаем это!

Установка Visual Studio Code

Visual Studio Code - это простой, но мощный редактор исходного кода, который работает на Windows, macOS и Linux. Он поддерживает все популярные языки программирования. Для его установки перейдите по ссылке и выберите установщик для своей операционной системы:

Примечание: поскольку я работаю на Windows, то все последующие установки и настройки (+скриншоты) я буду выполнять в этой операционной системе.

Он будет скачан на ваш компьютер. Откройте его и следуйте дальнейшим инструкциям. Примите условия соглашения:

Укажите папку, в которую вы хотите установить Visual Studio Code:

На этапе дополнительных задач оставьте настройки по умолчанию:

• Зарегистрировать Code в качестве редактора для поддерживаемых типов файлов;
• Добавить в PATH (доступно после перезагрузки).

При желании вы можете создать значок на своем рабочем столе.

В завершение нажмите Установить. Visual Studio Code начнет устанавливаться на ваш компьютер.

После установки запустите программу:

Установка Git

Теперь необходимо установить Git (систему контроля версий, которая помогает отслеживать историю изменений в файлах). Для этого в левом боковом меню нажмите на иконку Source Control и нажмите кнопку Download Git:

В открывшемся окне нажмите Open:

Официальная сборка доступна для скачивания на официальном сайте Git. Именно туда вас перенаправит после того, как вы нажмете на кнопку Open. Скачайте последнюю доступную версию по ссылке Click here to download или воспользуйтесь установщиками ниже:

На ваш компьютер загрузится установщик Git. После скачивания запустите его и следуйте шагам настройки.

Укажите папку, в которую будет установлен Git (можно оставить по умолчанию):

Компоненты установки Git оставьте без изменений:

В качестве текстового редактора по умолчанию, используемого Git, выберите Visual Studio Code:

Когда вы инициализируете репозиторий командой git init, Git создает ветку с именем master по умолчанию. Начиная с версии 2.28, вы можете задать другое имя для создания ветки по умолчанию. В рамках текущей настройки выбор можно не менять, оставьте Let Git decide:

Оставьте рекомендованный вариант использования Git  - Git from the command line and also from 3rd-party software. Он позволяет работать с Git из разных оболочек и интегрировать его с другими приложениями.

Изначально Git поставлялся со встроенным SSH-клиентом, но не так давно появилась возможность использования внешнего клиента. Если у вас уже что-то установлено на компьютере - можете выбрать второй вариант. Если вы устанавливаете Git впервые, то оставьте Use bundled OpenSSH:

По умолчанию Git будет использовать свою OpenSSL библиотеку с заранее определенным списком корневых сертификатов. Для наших задач этого достаточно, поэтому в следующем окне установки оставьте выбор Use the OpenSSL library:

Существует два основных способа формирования конца строки в файлах - CRLF и LF. Первый используется в Windows, второй - в Unix-like системах. Первая опция позволяет извлекать файлы из репозитория в Windows-стиле, при этом отправлять файлы в репозиторий в Unix-стиле. Для отслеживания чужих контейнеров Google Tag Manager данная настройка особой роли не играет, поэтому вы можете оставить первый вариант Checkout Windows-style, commit Unix-style line endings:

Эмулятор, который будет использоваться в командной строке Git Bash. MinTTY — удобный вариант, поэтому он выбран по умолчанию. Не меняйте его, а просто нажмите Next:

На следующем шаге настройки необходимо задать стратегию git pull. Опция default будет пытаться обновить историю коммитов без создания коммитов слияния. Это самый часто используемый вариант, поэтому оставьте его:

Настройка Git Credential Manager позволит Git запоминать логины и пароли для подключения к удаленным репозиториям (например, GitHub, GitLab или корпоративное хранилище) и не вводить их постоянно. Это нам подходит:

Кэширование позволит ускорить работу Git, эту опцию оставьте. А вот символические ссылки нам не нужны:

Экспериментальные настройки еще не переведены в стабильную стадию, поэтому мы не будем их использовать и просто пропустим данный шаг:

В завершение нажмите Install. Git начнет устанавливаться на ваш компьютер. По окончании снимите галочку с View Release Notes и нажмите Finish:

Клонирование репозитория GitHub

После того, как вы создали учетную запись на GitHub, перейдите в Visual Studio Code (закройте программу и откройте вновь, чтобы настройки только что установленного Git применялись к VSC) и в меню View выберите Command Palette... (Ctrl + Shift + P):

Введите команду Git Clone и выберите ее из списка:

Затем нажмите на Clone from GitHub:

Если вас попросят войти в GitHub, сделайте это, авторизовавшись под своей учетной записью (логин и пароль). После в поле URL-адрес репозитория вставьте ссылку https://github.com/dustinrecko/gtm-container-watch:

Выберите (или создайте) на компьютере папку, в который вы хотите клонировать проект:

Когда вы получите уведомление с вопросом, хотите ли вы открыть клонированный репозиторий, выберите Open:

После проделанных действий содержимое репозитория будет отображаться в вашей папке/каталоге Visual Studio Code:

В открывшемся окне подтвердите, что вы доверяете автору этих файлов, нажав на кнопку Yes, I trust the authors:

Перенос репозитория на свой аккаунт Github

Для этого откройте меню View -Command Palette... (Ctrl + Shift + P). Введите команду Git:Push

Эта команда используется для выгрузки содержимого локального репозитория в удаленный репозиторий. Она позволяет передать коммиты из локального репозитория в удаленный.

В открывшемся окне вы можете войти в GitHub через браузер или с помощью кода. Можете выбрать любой, я буду использовать вход через браузер:

После этого вам выдаст уведомление о том, что у вас недостаточно прав для отправки на GitHub. Вместо этого вы можете создать вилку (fork). Нажмите на Create fork:

Вилка - это личная копия репозитория другого пользователя, которая находится в вашей учетной записи GitHub. Вилки позволяют свободно вносить изменения в проект, не затрагивая исходный вышестоящий репозиторий.

Как только вилка будет создана, в правом нижнем углу Visual Studio Code вы увидите уведомление об ее успешном создании на GitHub:

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

Нажав на кнопку Open on GitHub, убедитесь, что ваш проект создан в учетной записи GitHub:

Редактирование файла config.json

Откройте в Visual Code Studio файл config.json и измените в нем данные на свои.

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

• https://osipenkov.ru
• https://convertmonster.ru
• https://prometriki.ru
• https://simoahava.com
• https://measureschool.com
• https://analyticsmania.com
• https://thyngster.com
• https://skillbox.ru
• https://ppc.world
• https://elama.ru

Имя владельца репозитория в переменной GITHUB_OWNER измените на свое. Оно будет отображаться в самом верху страницы до названия самого репозитория:

Получение персонального токена

Теперь вам необходимо получить персональный токен. Для этого в правом верхнем углу GitHub откройте настройки учетной записи и перейдите в раздел Settings (Настройки):

В левом меню в самом низу будет раздел Developer settings. Откройте его:

На открывшейся странице раскройте меню Personal access tokens и выберите Tokens (classic):

Далее нажмите на Generate new token - Generate new token (classic):

На открывшейся странице задайте настройки для генерации вашего токена. В поле Note вы можете написать для каких задач вы хотите использовать новый токен. Например, GTMTrackerToken:

В Expiration задайте срок жизни вашего токена. Можно задать бессрочный (No expiration), чтобы он хранился без ограничений по времени:

В областях действия (scopes) я рекомендую установить галочки для всех условий использования и уровней доступа.

Сгенерируйте токен, нажав в самом низу страницы на кнопку Generate token:

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

Обязательно сохраните его у себя на компьютере (можете в блокноте) и никому не показывайте, ни с кем с ним не делитесь.

Создание глобальной переменной GITHUB_AUTH

Если вы используете операционную систему Windows, то создайте глобальную переменную GITHUB_AUTH и пропишите в нее созданный на предыдущем шаге токен. Глобальную переменную еще называют переменной среды или окружения.

Переменная окружения (переменная среды, environment variable) - текстовая переменная операционной системы, хранящая какую-либо информацию, например, данные о настройках системы или сведения о текущем пользователе.

Чтобы открыть переменные среды Windows, вы можете:

• использовать поиск в панели задач. Начните вводить переменных и откройте пункт Изменение системных переменных среды

• нажать клавиши Win+R на клавиатуре, ввести sysdm.cpl и нажать Enter. На вкладке Дополнительно нажмите кнопку Переменные среды…

В открывшемся окне переменных среды в окне Системные переменные нажмите кнопку Создать:

Для новой системной переменной введите:

• Имя - GITHUB_AUTH
• Значение - ваш персональный токен

Нажмите ОК. Повторите то же самое для окна Переменные среды пользователя:

Для новой пользовательской переменной введите:

• Имя - GITHUB_AUTH
• Значение - ваш персональный токен

Нажмите ОК. И в завершение еще раз ОК.

Примечание: используйте эту инструкцию для добавления переменных окружения на macOS.

Установка Node.js

На JavaScript выполняется большая часть интерактивных элементов на сайтах и в мобильных приложениях. JavaScript отлично работает с HTML/CSS и интегрирован основные браузеры на рынке. Для работы с JavaScript вне браузера разработчики используют различные среды выполнения, например, Node.js.

Node.js - это кроссплатформенная среда выполнения кода JavaScript. Она позволяет использовать JavaScript как язык программирования общего назначения: создавать на нем серверную часть и писать полноценные клиентские приложения.

Для запуска нашей программы необходимо установить Node.js на компьютер. Для этого перейдите по ссылке и для своей операционной системы скачайте рекомендованную для большинства пользователей версию:

На ваш компьютер загрузится установщик Node.js. После скачивания запустите его и следуйте шагам настройки. Нажмите Next.

Затем примите условия лицензионного соглашения:

Укажите путь установки Node.js на своем компьютере. Можете оставить его без изменений:

Не изменяйте никакие функции и компоненты в следующем окне, просто нажмите Next:

В окне предложения установки нативных модулей нажмите Next:

Подтвердите начало установки, нажав на кнопку Install. Дождитесь ее завершения, а затем нажмите Finish.

npm install

npm (Node Package Manager) - пакетный менеджер для JavaScript, работающий на Node.js. Менеджер npm состоит из двух частей:

1. CLI (интерфейс командной строки) - средство для размещения и скачивания пакетов;
2. онлайн-репозитории, содержащие JavaScript-пакеты.

Для запуска программы по отслеживанию чужих контейнеров Google Tag Manager вам необходимо установить определенные пакеты. Для этого используется команда npm install.

Перед использованием этой команды перезагрузите программу Visual Studio Code (закройте и откройте вновь), а затем откройте терминал через меню View - Terminal:

На открывшейся вкладке Terminal введите команду npm install и нажмите Enter. Нужные пакеты начнут устанавливаться:

На этом предварительная настройка всех программ завершена.

Запуск index.js

Откройте файл index.js и прокрутите в самый низ программы. Последней строкой вставьте gtmWatch();

Сохраните изменения в файле (File - Save или Ctrl+S). Теперь можно запустить сам скрипт. Для этого, находясь на открытой вкладке index.js, откройте меню Run - Start Debugging (F5):

Выберите Node.js:

Скрипт начнет свою работу, в консоли отладки (Debug Console) вы будете видеть процесс выполнения:

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

После завершения выполнения программы зайдите на свою страницу GitHub. Открыв страницу со скопированным проектом, вы должны увидеть новое уведомление об изменениях в директории tracking:

Оно означает, что вы можете поделиться своими изменениями с разработчиком репозитория, который скопировали к себе. Но это делать не нужно. Наша задача - отслеживать изменения чужих контейнеров Google Tag Manager в своем проекте на GitHub. Поэтому вы можете просто открыть директорию tracking, перейти в папку containers и убедиться в том, что запущенная тестовая функция создала папки с новыми сайтами:

Поскольку это был ваш первый запуск, то скрипт просканировал перечисленные в файле config.json сайты и создал для них первую версию контейнера Google Tag Manager.

Например, вот такой файл находится в папке моего сайта osipenkov.ru:

В нем отображается код моего контейнера Google Tag Manager (номер версии - 208), отсканированный и скопированный автоматически благодаря программе dustinrecko:

Если в контейнере отслеживаемого сайта будут внесены изменения, то после запуска программы эти обновления станут доступны в вашем проекте GitHub. И в отличие от способа, описанного в первом руководстве по отслеживанию чужих контейнеров Google Tag Manager, где благодаря Cloud Functions в облаке Google Cloud и Cloud Scheduler можно настроить автоматическое обновление (запуск скрипта) по расписанию, используя локальный запуск программы с помощью Visual Studio Code, вам необходимо это делать периодически и самостоятельно. Зато вам не нужно иметь активный платежный аккаунт в облаке Google и платить деньги за вычислительные мощности, поскольку в качестве такого сервера и ресурсов выступает ваш компьютер. Просто открываете Visual Studio Code, программу и запускаете скрипт. Если он найдет обновления контейнеров GTM из списка отслеживаемых, то автоматически добавит их на GitHub. А дальше вы уже сможете сопоставить изменения, которые были выполнены владельцами в их диспетчерах тегов Google.