Как извлечь данные из JSON-объектов разных API и передать их в аналитику?

Из этого руководства вы узнаете, как можно извлечь данные из JSON-объектов разных API с помощью Яндекс Тег Менеджера и Google Tag Manager и передать их в аналитику.

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

Введение

Классическая веб-аналитика не учитывает контекст вашего бизнеса: погоду, курсы валют, цены конкурентов и многое другое. Этой информации просто нет в Яндекс Метрике и Google Analytics 4. Однако вы можете расширить собираемые данные вашего счетчика с помощью сторонних решений, извлекая нужные значения через открытые и бесплатные API и передавая их в свою систему аналитики. Но для этого нужно понимать, как работают API и что такое JSON-объекты.

Возможно, вы не знали, что на GitHub существуют репозитории, которые полезны не только разработчикам, но и интернет-маркетологам. Одним из них является public-apis - крупнейший и самый популярный каталог бесплатных открытых API. Он уже много лет обновляется IT-специалистами и содержит сотни готовых интерфейсов, которые можно использовать в своих проектах (часто на бесплатной основе или с щедрыми лимитами).

Примечание: на момент публикации этой статьи public-apis находится на 4 месте в списке всех репозиториев в истории GitHub с 420 000+ звезд, опережая OpenClaw, React, Linux и многие другие.

Но:

• OpenClaw, React, Linux и другие репозитории - это рабочие инструменты, которые устанавливают и используют миллионы разработчиков;
• public-apis - это список ссылок (ресурсный репозиторий).

Оба варианта полезны, но природа их популярности совершенно разная. В мире GitHub ресурсные репозитории традиционно набирают больше звезд, чем инструментальные. Это не умаляет достижения public-apis, но важно понимать для контекста.

Если вы хотите обогатить свою аналитику новыми данными, начните с поиска нужного API в этом репозитории. Однако будьте внимательны: многие из представленных решений являются условно-бесплатными (с ограничением количества запросов), либо недоступны на территории России. Еще можно найти похожие репозитории и списки бесплатных API в поисковике, просто введя запрос free api list или список популярных бесплатных api.

Что такое API и зачем он маркетологу? API (Application Programming Interface или программный интерфейс) - это посредник, который позволяет двум программам обмениваться данными по строгим (заданным) правилам. Представьте официанта в ресторане: вы делаете заказ (запрос), официант передает его на кухню (сервер), а затем приносит вам готовое блюдо (ответ). API работает так же: вы отправляете запрос на определенный адрес (URL), а сервер возвращает данные. Как правило, в формате JSON.

Для интернет-маркетолога API - это мощный инструмент, который открывает доступ к данным, которых нет в стандартной веб-аналитике. Вам не нужно уметь программировать как профессиональный разработчик. Достаточно понимать логику запросов и уметь читать JSON-ответы. Этим мы с вами и будем заниматься далее.

Однако прежде, чем начать использовать готовые решения, полезно понять, чем API отличаются друг от друга. Во-первых, по способу доступа: одни API полностью открыты и отдают данные по простому HTTP-запросу (например, https://api.example.com/rate), другие требуют API-ключ (API key, уникальный идентификатор вашего проекта), а третьи работают по протоколу OAuth (например, Авторизация через Google - для действий от имени пользователя).

Во-вторых, по политике CORS: если вы планируете отправлять запросы напрямую из браузера (например, через JavaScript на сайте), API должен поддерживать CORS, иначе браузер заблокирует ответ. В-третьих, API отличаются по стоимости: есть полностью бесплатные сервисы (часто с лимитом запросов в день), условно-бесплатные (freemium - бесплатно до определенного числа запросов) и коммерческие.

Наконец, формат данных данных у разных API и сервисов может отличаться. Стандартом де-факто является формат JSON, но иногда встречается XML или даже CSV.

В качестве примера давайте возьмем проект Cloudflare Trace из раздела Development. Как видите, он поддерживает HTTPS-запросы (Yes), CORS (Yes) и не требует никакой авторизации (No):

Это готовое open-source решение (программное обеспечение, исходный код которого доступен всем, его можно свободно использовать), которое превращает внутренние технические страницы Cloudflare в бесплатный и сверхбыстрый API для определения параметров сети. Оно позволяет разработчикам без использования платных сервисов мгновенно получать:

• публичный IP-адрес пользователя;
• его геолокацию (код страны);
• ближайший дата-центр (IATA-код);
• версию TLS;
• User Agent.

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

Вы можете в этом убедиться самостоятельно, открыв этот проект на GitHub и перейдя по ссылке Cloudflare Geolocation API:

В отдельном окне браузера вы должны увидеть собственные параметры сети:

То, что представлено на экране - классический формат JSON (JavaScript Object Notation). Подробнее об этом я расскажу ниже.

Автор приводит в своем репозитории следующий набор ссылок:

Это список публичных точек доступа (эндпоинтов), принадлежащих инфраструктуре Cloudflare. Все они по умолчанию отдают служебную страницу /cdn-cgi/trace в текстовом формате. Автор проекта на GitHub предлагает использовать их как бесплатные зеркала для получения данных о клиенте.

Вот что стоит за каждой ссылкой:

• one.one.one.one и 1.0.0.1 - это адреса их публичного DNS-сервиса (1.1.1.1). Самый быстрый способ узнать свой IP, так как эти серверы распределены по всему миру;
• cloudflare-dns.com - основной домен для работы с DNS через HTTPS (DoH);
• cloudflare-eth.com - шлюз Cloudflare для сети Ethereum (Web3-инфраструктура);
• workers.dev и pages.dev - платформы для хостинга кода (Serverless) и статических сайтов;
• cloudflare.tv - видеоплатформа компании Cloudflare;
• icanhazip.com - известный сервис для простого получения своего IP-адреса, который Cloudflare выкупила несколько лет назад и интегрировала в свою сеть.

Такое количество разных точек доступа неслучайно. Если один домен будет заблокирован (например, корпоративным файрволом или РКН) или временно недоступен, скрипт автоматически переключится на следующий. Также все эти ссылки возвращают данные в одном и том же формате, поэтому мы можем написать один парсер и использовать любой из этих адресов как источник данных о пользователе.

Если открыть любую из ссылок автора, то отображение данных будет представлено в текстовом формате и отличаться от предыдущего:

А нам, для того чтобы работать с такими данными и передавать их в Яндекс Метрику или Google Analytics 4 с помощью Яндекс Тег Менеджера и Google Tag Manager соответственно, нужен именно формат JSON.

Например, если вы воспользуетесь API погодного сервиса Open-Meteo и введете в браузере адрес такого вида:

, то сможете бесплатно получить текущие данные о погоде в Москве прямо в формате JSON:

Другой пример - использование сервиса ipapi.co:

Пример результата:

О формате JSON

JSON (JavaScript Object Notation) - это текстовый формат обмена данными, основанный на синтаксисе JavaScript. Несмотря на происхождение, он является независимым от языка и поддерживается большинством современных языков программирования (Python, Java, C#, PHP и др.). JSON представляет данные в виде пар ключ:значение и упорядоченных списков, что делает его идеальным для передачи информации между сервером и веб-приложением.

Представьте себе анкету: у каждого пункта есть название (ключ) и ответ (значение). Например:

• имя - Яков
• фамилия - Осипенков
• возраст - 34
• город - Москва
• специализация - Веб-аналитика

JSON выглядит точно так же, только в строгом компьютерном формате:

А вот как будут выглядеть данные о погоде, которые вы получите из API Open-Meteo (часть данных):

Очень похоже, не правда ли? Здесь temperature - это ключ, а 10.4 - его значение (температура в градусах). Внутри фигурных скобок {} находится объект, а внутри квадратных [] - массив (список). Этот формат любят разработчики, потому что он легкий, понятный и с ним умеет работать любой язык программирования - от JavaScript до Python. Если вы видите в браузере ответ API в виде {"ключ": "значение"}, знайте: это и есть JSON.

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

Вернемся к нашему примеру с Cloudflare Trace. Как мы уже определили, ответ предоставляется в текстовом виде, а не в формате JSON. Именно поэтому в своем проекте автор приводит пример кода, который преобразовывает возвращаемый ответ от сервера в JSON-объект. Он доступен на сайте StackOverflow и выглядит так:

Вы можете скопировать его и вставить в консоль разработчика своего браузера на любом HTTPS-сайте, перейдя на вкладку Console и нажав Enter:

Примечание: на сайтах с http:// браузер заблокирует запросы к Cloudflare из-за смешанного контента.

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

Вы должны увидите свои данные: IP-адрес, страну (loc), версию TLS и другие параметры.

Предположим, мы хотим извлечь значение IP-адреса, который находится в ключе ip. Чтобы отобразить его в консоли разработчика, замените последнюю строку кода с:

на:

После этого в консоли появится только IP-адрес:

Для извлечения других параметров все делается аналогично. Замените в новой строке:

Часть с data.ip. Таким образом, для разных параметров будет отличаться только конец: data.colo, data.fl, data.gateway, data.loc, data.ts и т.д.

Но вернемся к Cloudflare Geolocation API и более простой конструкции:

Это технический API, который используется инструментом проверки скорости Cloudflare (Speed Test) для получения метаданных о текущем соединении. Он полностью бесплатный и работает глобально через Anycast-сеть Cloudflare (330+ городов), что гарантирует минимальную задержку.

Его можно использовать в своем проекте, но с осторожностью. Этот эндпоинт не является частью публичного API для разработчиков (Cloudflare API v4). Это значит, что Cloudflare может изменить его формат или закрыть без предупреждения.

Если вы будете отправлять слишком много запросов с одного IP, Cloudflare может временно заблокировать ваш доступ. Условия использования запрещают создавать "чрезмерную нагрузку" на инфраструктуру или использовать сервисы в целях, мешающих работе других пользователей. Однако в демонстрационных и обучающих целях работать с ним можно и нужно. Для больших проектов и частых запросах есть смысл рассмотреть платные решения с доступом по API-ключу. Например, сервис ipgeolocation.io.

Примечание: ошибка 403 Forbidden при обращении к https://speed.cloudflare.com/meta обычно означает, что защитные системы Cloudflare посчитали ваш запрос подозрительным или автоматизированным, и заблокировали его. Если это произошло, то какое-то время вы не сможете использовать этот сервис API.

Нам Cloudflare Geolocation API полезен еще и потому, что он:

• возвращает данные сразу в формате JSON;
• возвращает данные не только по IP-адресу (как у Cloudflare Trace), но еще и по городу пользователя.

Именно город пользователя (ключ city) я буду использовать в качестве примера извлечения из JSON-объекта в Яндекс Тег Менеджере / Google Tag Manager и передачи этой информации в счетчики веб-аналитики (GA4/ЯМ).

Как вы уже знаете, результат возвращаемых данных у Cloudflare в JSON следующий:

Прежде чем получить город пользователя, нужно понять, где эти данные лежат. В мире API адрес, по которому живут нужные данные, называется эндпоинт (точка доступа). Это просто URL (как ссылка на сайт), только вместо веб-страницы вам вернется структурированный набор данных. Именно это и произошло, когда вы перешли по ссылке https://speed.cloudflare.com/meta. Вы увидели JSON с информацией о текущем посетителе: его IP‑адрес, страну, город, координаты и даже название провайдера. Эндпоинт - это входная дверь к данным.

Самый простой способ - открыть эндпоинт в браузере, как обычный сайт. Вы увидите JSON и убедитесь, что данные существуют. Но чтобы забрать их прямо во время работы вашего сайта или скрипта, используют метод fetch(). Это встроенная команда JavaScript, которая отправляет запрос к эндпоинту и получает ответ. Представьте, что fetch - это курьер, который ходит по адресу и приносит вам посылку с данными.

Допустим, мы отправили запрос к эндпоинту https://speed.cloudflare.com/meta. Сервер вернет JSON - длинную строку, похожую на набор вложенных конструкций из фигурных скобок, двоеточий и кавычек. Такую строку неудобно читать и тем более извлекать из нее отдельные поля. К счастью, у fetch есть встроенный метод .json(), который превращает эту строку в настоящий JavaScript‑объект. После этого данные становятся похожи на обычный словарь: у каждого ключа (например, city) появляется свое значение (Moscow).

Когда JSON стал объектом, получить значение нужного ключа очень просто. Для этого используется точечная нотация - точка и имя ключа. Например:

Если ключ называется сложно или содержит пробелы, помогут квадратные скобки и кавычки:

Оба способа вернут вам город пользователя. Точно так же можно достать страну (data.country), координаты (data.latitude, data.longitude) или даже вложенный объект colo. Например, data.colo.iata вернет код аэропорта.

В качестве примера возьми нижеприведенный код и вставьте его на вкладке Console, нажав Enter:

Вы увидите, как из JSON извлекаются данные конкретных ключей:

Другой пример - это извлечение данных о погоде:

Результат:

Таким образом, весь процесс извлечения нужных данных из JSON-объектов сводится с следующим действиям:

• найти эндпоинт (ссылку), где находятся данные (в качестве примера мы использовали популярный репозиторий GitHub public-apis с большим количеством разных API);
• попросить JavaScript «постучаться» по этому адресу через метод fetch;
• превратить полученный JSON в объект с помощью встроенного метода .json();
• взять нужное значение через точку (точечная нотация) или квадратные скобки;
• передать это значение в счетчик аналитики.

Фактически, JSON - это просто текст, похожий на объект. А .json() превращает его в настоящий объект, из которого можно удобно доставать данные.

Примечание: подробнее о переменных с точечной нотацией в Google Tag Manager читайте в этом материале.

Теперь, когда вам известна последовательность действий и алгоритм извлечения конкретных значений из JSON-объекта через метод fetch, пришло время перейти в системы управления тегами и там написать итоговый код.

Настройка в GTM / YTM

В качестве демонстрации я буду использовать Яндекс Тег Менеджер. Однако в Google Tag Manager все будет аналогично. Эти инструменты предоставляют схожий функционал, и все действия идентичны.

Первым делом вам необходимо активировать опцию Пользовательский HTML в настройках счетчика Яндекс Метрики. Для этого перейдите в раздел Настройки - Счетчик:

И включите функцию Пользовательский HTML:

Пользовательский HTML в Yandex Tag Manager (YTM) - это тип тега, который позволяет добавлять на сайт произвольный HTML-код, JavaScript или другие скрипты, которые не поддерживаются стандартными тегами и которых нет в каталоге шаблонов. Код будет выполняться при срабатывании триггера, в нем также можно использовать переменные для динамической подстановки нужных значений.

Сохраните изменения.

Теперь перейдите на вкладку Триггеры и создайте триггер типа Инициализация:

Задайте ему название (например - Инициализация) и сохраните его.

Откройте раздел Теги и создайте тег типа Пользовательский HTML. В него вы должны будете вставить свой уникальный код. К сожалению, я не смогу написать универсальный код под все API и JSON-объекты, поэтому придется сделать это самостоятельно или попросить нейросеть сгенерировать код под ваш конкретный запрос и API.

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

Или чуть проще и компактнее:

В Яндекс Тег Менеджере / Google Tag Manager это будет выглядеть так:

Не трудно догадаться, что этот код:

• запрашивает данные о посетителе через Cloudflare API (геолокацию и IP);
• извлекает из JSON-ответа город (city) и IP-адрес (clientIp);
• отправляет эти данные в dataLayer с событием cloudflare_geo_data для их последующего использования в Яндекс Метрике и Google Analytics 4.

В вашем примере будут другие ключи, которые вы извлекаете из JSON-объекта, а также другой итоговый dataLayer. Подробнее о том, как они формируется, читайте в этом руководстве.

В качестве триггера активации выберите триггер Инициализация, созданный на предыдущем шаге. Введите название тегу (например - HTML - Извлечение данных из JSON-объекта) и сохраните его:

В Google Tag Manager:

Следующим шагом создайте триггер типа Специальное событие. В названии события укажите то название, которое вы задали в своем коде HTML (см. выше). У меня - это cloudflare_geo_data:

Задайте название триггеру (например - cloudflare_geo_data) и сохраните его.

В Google Tag Manager:

Теперь перейдите в раздел Переменные и создайте пользовательскую переменную типа Переменная уровня данных. В имени переменной уровня данных укажите то название, которое вы задали в своем коде HTML в dataLayer (см. выше). В моем примере - это:

1. user_city - город пользователя;
2. user_ip - IP-адрес пользователя.

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

Задайте переменным названия и сохраните их.

В Google Tag Manager:

После этого перейдите в режим предварительного просмотра (подробнее для Яндекс Тег Менеджера и подробнее для Google Tag Manager) и проверьте, как данные извлекаются и сохраняются в созданные переменные. Если вы все сделали правильно, на шкале событий появится ваше событие. Нажав на него, перейдите на вкладку DataLayer. Там вы должны увидеть извлеченные данные из JSON-объекта.

А перейдя на вкладку Переменные этого же события, вы увидите, как ваши переменные уровня данных приняли нужные значения:

В Google Tag Manager:

Все, что осталось сделать - это создать финальный тег и передать эти данные в Яндекс Метрику или Google Analytics 4.

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

• Параметры посетителей, визитов и событий в Яндекс Метрике
• Области действия в Google Analytics

Я покажу стандартный способ отправки данных в качестве параметров событий. Реализуется это стандартным способом - сначала создается цель типа JavaScript-событие в интерфейсе Яндекс Метрики:

А затем используется тег типа Яндекс Метрика, для которого назначаются параметры события в поле params. Триггером активации будет являться триггер специального события, созданный на предыдущем шаге.

В Google Tag Manager тег события будет выглядеть так:

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

И в режиме отладки Google Tag Manager:

И в инструменте DebugView:

Через некоторое время эти данные появятся в ваших отчетах.

Пример отчета с параметрами события в Яндекс Метрике:

Другие материалы в моем блоге о передачи геоданных пользователя в аналитику:

• Географические идентификаторы и местоположение в Google Analytics 4
• Передача IP-адреса в Google Analytics 4
• Передача IP-адреса в Яндекс Метрику
• IP-адрес с помощью Google Tag Manager
• Передача IP-адреса посетителя в Universal Analytics (устар.)
• Определение геолокации пользователя с помощью GTM

Итоги

В этом руководстве мы с вами разобрали полный цикл - от поиска бесплатного API до передачи конкретного значения в счетчик веб-аналитики. Это не какая-то магия, а вполне понятный, воспроизводимый алгоритм, который под силу любому вдумчивому интернет-маркетологу.

Лучшая стартовая точка - репозиторий public-apis на GitHub. Это крупнейший каталог бесплатных открытых API, который много лет поддерживается сообществом. В нем сотни сервисов на любой вкус: погода, курсы валют, геолокация, новости, финансы, даже шутки и данные о покемонах.

Важные ограничения, о которых нужно знать заранее:

• бесплатные тарифы почти всегда имеют лимиты (например, 1000-1500 запросов в месяц). Для небольшого сайта или блога этого достаточно, но перед интеграцией проверьте документацию;
• авторизация бывает разной - многие API требуют API-ключ (регистрация), некоторые работают через OAuth (сложнее), а есть и вовсе открытые - без ключа. В репозитории public-apis есть колонка Auth, где указано, что нужно;
• CORS (Cross-Origin Resource Sharing) - критически важная колонка, если вы планируете отправлять запросы прямо из браузера (через fetch). Ищите значение Yes, иначе браузер заблокирует ответ;
• Геодоступность - некоторые API могут быть недоступны на территории России или требовать VPN.

Сохраните себе универсальный алгоритм работы с любым API:

1. найти эндпоинт - конкретный URL, по которому API отдает нужные данные. В документации сервиса это обычно называется endpoint;
2. «постучаться» по этому адресу через метод fetch (встроенную функцию JavaScript, которая отправляет запрос к серверу);
3. превратить полученный JSON в объект с помощью метода .json();
4. извлечь нужное значение через точечную нотацию data.city или квадратные скобки data["city"];
5. передать это значение в счетчик аналитики с помощью dataLayer (для Google Tag Manager и Яндекс Тег Менеджера) или напрямую в код отслеживания.

Современные платформы, инструменты автоматизации (например, n8n), языки программирования и базы данных повсеместно используют JSON как основной формат обмена данными. Если вы понимаете, как устроен JSON и как из него извлекать значения, вы получаете ключ к интеграции с тысячами сервисов - от CRM и рекламных кабинетов до погодных API и финансовых агрегаторов.

Для маркетолога это означает:

• больше контекста: вы знаете не только что пользователь сделал, но и при каких внешних условиях (погода, курс валют, город, провайдер);
• глубже аналитика: можно сравнивать когорты, искать корреляции и принимать обоснованные решения;
• меньше «черных ящиков»: вы сами решаете, какие данные собирать и куда их отправлять, не полагаясь на ограниченный набор полей в стандартной аналитике.

Не нужно пытаться подключить все и сразу. Выберите один API, один эндпоинт и одно значение (например, курс доллара или город пользователя). Пройдите алгоритм из пяти шагов. Увидели, что данные приходят в консоль или dataLayer? Отлично! Теперь вы готовы масштабировать этот подход на другие источники.

Помните, что JSON - это просто текстовый формат, а метод .json() делает из него полноценный объект, с которым можно работать!