Передача данных о погоде в Universal Analytics и Google Analytics 4

14 марта, 2021

Ваш бизнес зависит от погодных условий? Доставка еды, службы такси, пункты проката, фермерские продукты, продажа сезонной одежды, занятия на открытом воздухе, парк развлечений и т.д.? Передавайте данные о погоде в Google Analytics и измеряйте влияние температуры и погодных условий на конверсию и доход вашего сайта.

Учитывая мою страсть к различного рода интересным и нетрививальным задачам, которые можно решить с помощью Google Analytics и Google Tag Manager, рано или поздно я должен был написать об этом для вас в блоге. Сразу хочу сказать, что я не являюсь автором этого способа и не желаю получать незаслуженные лавры за простую адаптацию для русскоязычного сообщества и некоторые дополнения для Google Analytics 4. Когда Симо Ахава (Simo Ahava) впервые написал о передаче данных о погоде в Google Analytics в марте 2015 года, я еще не работал в интернет-маркетинге и вообще не знал, что такое диспетчер тегов от Google.

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

19 марта 2015 г. - Send weather data to Google Analytics in GTM v2 (simoahava.com)
21 декабря 2015 г. - Weather data and temperature as a secondary dimension in GA & GTM (onlineoptimizers.eu)
20 января 2017 г. - Weather Data and Temperature Tracking using Google Tag Manager & Google Analytics (Weboq)
12 февраля 2018 г. - Как бесплатно передавать данные о погоде в Google Analytics (iosiuk.blogspot.com)
22 марта 2018 г. - Boost your performance using local weather data! (analyticsboosters.com)
16 сентября 2019 г. - Getting Weather Data into Google Analytics with Open Weather Map (medium.com)

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

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

Передача данных о погоде в Google Analytics

Пример отчета в Universal Analytics с данными о погоде

Данные о погодных условиях полезны не только в отчетах Google Analytics ради ВАУ-эффекта или настройки из любопытства (а так можно было?), но еще и при оптимизации рекламных кампаний, когда в зависимости от информации в регионе в конкретное время вы можете корректировать ставки и бюджет. В официальной документации Google описан способ управления кампаниями Google Ads на основе погоды.

Давайте перейдем к непосредственной настройке. Первым делом необходимо зарегистрироваться на сайте openweathermap.org.

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

Введите свои данные (username, email и password), согласитесь с политикой сервиса и нажмите Create Account (Создать аккаунт):

Регистрация на сайте openweathermap.org

На следующем шаге укажите название компании и вид деятельности, к которому вы относитесь. Нажмите Save (Сохранить):

Как будете использовать API?

После регистрации не забудьте перейти в свой почтовый ящик и подтвердить e-mail. Далее вы можете зайти на страницу с тарифами и ознакомиться с ограничениями и ценами сервиса.

Тарифы OpenWeatherMap

На бесплатном тарифе OpenWeatherMap позволяет делать 60 запросов в минуту. Этого достаточно для небольших проектов и сайтов со средней посещаемостью. Можно грубо прикинуть, что 1 запрос - это 1 пользовательская сессия. Если необходимо больше - всегда можно перейти на тариф с расширенными лимитами.

Далее перейдите на страницу с вашими API-ключами и скопируйте (сохраните) ключ, который вам предоставили. Он пригодится при настройке тега в Google Tag Manager.

Копирование ключа API

Зайдите в GTM и создайте пользовательскую переменную типа Основной файл cookie с названием session:

Основной файл cookie - session

Назовите переменную (например Session alive) и сохраните ее. Затем создайте тег типа Пользовательский HTML и вставьте туда следующий код:

<script>
  (function() {

    function getLocation() {
            navigator.geolocation.getCurrentPosition(sendPosition, sendIp);
    }
    
    function sendPosition(position) {
      	fetchWeatherData(position.coords.longitude, position.coords.latitude);
    }
    
    function sendIp() {
                var x = new XMLHttpRequest();
                x.open("GET", "https://freegeoip.net/json/", true);
                x.onload = function (){
                  var data = JSON.parse(x.responseText);
                  fetchWeatherData(data.longitude, data.latitude);
                }
                x.send(null);          
    }
    
    var fetchWeatherData = function(longitude, latitude) {
      // You need to sign up to OpenWeatherMap for an account (https://openweathermap.org/appid). 
      // Once you do, you will find your APPID (key) in your account (https://home.openweathermap.org/api_keys)
      
    	var APPID = 'Вставьте сюда свой API-ключ'; // There must be created GTM variable
    
		var x = new XMLHttpRequest();
        x.open("GET", 'https://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&APPID=' + APPID, true);
        x.onload = function (){
          var data = JSON.parse(x.responseText);
          window.dataLayer.push({
            event: 'weatherDone',
            weather: data.weather[0].main,
            temperature: (data.main.temp-273.15).toFixed(2)
          });
        }
        x.send(null);    	
    };     

    if (typeof {{Session alive}} === 'undefined') {
      getLocation();
    }
   
    // Reset "session" cookie with a 30-minute expiration
    var d = new Date();
    d.setTime(d.getTime()+1800000);
    var expires = "expires="+d.toGMTString();
    document.cookie = "session=1; "+expires+"; path=/";
  })();
</script>

(function() {

function getLocation() {

navigator.geolocation.getCurrentPosition(sendPosition, sendIp);

}

function sendPosition(position) {

fetchWeatherData(position.coords.longitude, position.coords.latitude);

}

function sendIp() {

var x = new XMLHttpRequest();

x.open("GET", "https://freegeoip.net/json/", true);

x.onload = function (){

var data = JSON.parse(x.responseText);

fetchWeatherData(data.longitude, data.latitude);

}

x.send(null);

}

var fetchWeatherData = function(longitude, latitude) {

// You need to sign up to OpenWeatherMap for an account (https://openweathermap.org/appid).

// Once you do, you will find your APPID (key) in your account (https://home.openweathermap.org/api_keys)

var APPID = 'Вставьте сюда свой API-ключ'; // There must be created GTM variable

var x = new XMLHttpRequest();

x.open("GET", 'https://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&APPID=' + APPID, true);

x.onload = function (){

var data = JSON.parse(x.responseText);

window.dataLayer.push({

event: 'weatherDone',

weather: data.weather[0].main,

temperature: (data.main.temp-273.15).toFixed(2)

});

}

x.send(null);

};

if (typeof {{Session alive}} === 'undefined') {

getLocation();

}

// Reset "session" cookie with a 30-minute expiration

var d = new Date();

d.setTime(d.getTime()+1800000);

var expires = "expires="+d.toGMTString();

document.cookie = "session=1; "+expires+"; path=/";

})();

</script>

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

Пользовательский HTML со специальным кодом

Важно:

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

Вставьте между одинарными кавычками свой API-ключ

в месте, где идет код if (typeof {{Session alive}} === 'undefined') { используйте название своей переменной Основной файл cookie, которую создали ранее. В моем примере это {{Session alive}}, поэтому и в коде я задаю такое название. Если вы назвали ее по-другому, то измените эту часть кода.

Используйте свое название переменной Основной файл cookie

Триггер активации - All Pages (Все страницы). Сохраните тег.

Дмитрий Осиюк взял за основу код Симо Ахавы, но переделал его под себя без зависимости jQuery и с использованием открытых, бесплатных API. Помимо API сервиса OpenWeatherMap в этом коде используется freegeoip.net (теперь ipstack.com). Сейчас по бесплатному тарифу доступно 10 000 запросов в месяц, что не является очень большим (хотя в 2018 году говорилось про 15 000 запросов в час). Есть сервисы, которые имеют больший лимит на количество запросов. Например:

abstractapi.com - 20 000 запросов / месяц;
ipapi.co - 30 000 запросов / месяц;
ipgeolocation.io - 30 000 запросов / месяц;
ipregistry.co - первые 100 000 запросов / бесплатно.

Что делает скрипт? Когда пользователь заходит на сайт - у него запрашивается доступ к данным о геолокации.

Запрос на разрешение доступа к данным о местоположении

Если человек предоставляет этот доступ — скрипт считывает GPS-координаты посетителя и для этих координат возвращает данные о погоде. Если пользователь запрещает доступ к данным о геолокации — координаты определяются по IP-адресу посетителя сайта. Если пользователи используют VPN - данные о погоде будут неточными.

Примечание: при современном развитии интернет-технологий и различных защит отслеживаний в браузерах могут возникнуть ситуации, при которых сам браузер блокирует на своей стороне выполнения скрипта, в результате чего вы не сможете узнать местоположение пользователя, скрипт не сработает и не передаст эту информацию в Google Analytics.

В скрипте используются файлы cookie. Он запрашивает данные о погоде один раз на 30 минут (1 раз на 1 сеанс каждого посетителя сайта).

Затем создайте триггер типа Пользовательское событие с названием weatherDone:

Пользовательское событие - weatherDone

Назовите триггер (например weatherDone) и сохраните его. После создайте две переменных типа Переменные уровня данных с именами weather и temperature:

Переменные уровня данных

Сохраните переменные.

OpenWeatherMap - международный сервис и данные о погоде он отдает на английском языке. Например, так в специальном отчете Universal Analytics:

Погода и температура в отчете Universal Analytics (англ. язык)

Но мы можем самостоятельно руссифицировать эти состояния и отправлять в Google Analytics данные на привычном нам языке. Для этого необходимо создать переменную типа Таблица поиска, в которой опишем все погодные условия, которые заложены в OpenWeatherMap. Это (sorry за мой английский перевод):

Thunderstorm - Гроза
Snow - Снег
Drizzle - Морось
Rain - Дождь
Mist - Туман
Clouds - Облачно
Tornado - Торнадо
Fog - Туман
Sand - Песок
Ash - Пепел
Squall - Шквал
Dust - Пыль
Haze - Дымка
Smoke - Дым
Clear - Ясное небо

Перевод погоды на русский язык

Сохраните переменную. Последним шагом в Google Tag Manager является создание тегов для Universal Analytics и Google Analytics 4.

Настройки для Universal Analytics

Перед созданием тега в GTM вернитесь в Google Analytics и добавьте 2 специальных параметра (Администратор - Ресурс - Пользовательские определения - Специальные параметры). Оба с областью действия - Сеансы. Один можно назвать Погода, а второй Температура. Они необходимы нам для того, чтобы данные о погоде относились ко всем действиям на сайте в рамках сеанса пользователя.

Специальные параметры в Universal Analytics

Запишите индексы этих параметров. Они будут необходимы при создании тега в Google Tag Manager.

Индексы специальных параметров

Вернитесь в диспетчер тегов Google и создайте тег типа Google Аналитика: Universal Analytics с типом отслеживания Событие и следующими настройками:

Категория - переменную с таблицей поиска, где мы руссифицировали данные о погодных условиях;
Действие - переменная уровня данных с температурой;
Не взаимодействие - True;
Специальные параметры с индексами с предыдущего шага, а значения параметров равны переменным таблицы поиска и температуры;
Триггер активации - пользовательское событие weatherDone.

Настройки тега Universal Analytics

Сохраните тег. Проверьте корректность передачи данных с помощью режима отладки Google Tag Manager. Как только вы зайдете на сайт, отобразится всплывающее окно с запросом на разрешение доступа к данным о местоположении и на шкале событий отобразится weatherDone. Если вы настроили все корректно, то тег Universal Analytics будет активным в Tags Fired.

Событие weatherDone и сработанный тег Universal Analytics

Раскрыв его, вы можете посмотреть какие данные передаются в Universal Analytics:

Данные тега UA

Я живу в Москве. На момент написания этой статьи OpenWeatherMap определил мою погоду как снег и температуру -2 ℃. Градусы Цельсия подтверждаются погодой в Google (по данным weather.com):

Подтверждение температура

В отчетах В режиме реального времени отобразилось данное событие:

Проверка события в режиме реального времени

Через некоторое время статистика отобразится как в отчетах по событиям (Поведение - События - Лучшие события):

Пример отчета по событиям о погоде в Universal Analytics

Так и в любых стандартных и специальных отчетах, в которые вы добавите специальные параметры Погода и Температура. Например, так:

Пример специального отчета по погоде в Universal Analytics

Настройки для Google Analytics 4

Теперь произведем настройку для Google Analytics 4. У нас уже выполнено 80% работы. Все, что остается сделать - это создать 1 тег для передачи данных по событиям в GA4 и 2 специальных параметра.

В Google Tag Manager создайте тег типа Google Аналитика: событие GA 4 с такой конфигурацией:

Название события - weatherGA4 (можете задать произвольное);
Название параметра - pogoda и temperatura (можете задать произвольные);
Значения параметров - наши переменные с таблицей поиска и температурой соответственно;
Триггер активации - пользовательское событие weatherDone.

Настройки тега Google Analytics 4

Сохраните тег. В интерфейсе Google Analytics 4 перейдите в раздел Настроить - Специальные определения и создайте 2 новых специальных параметра.

Создание специальных параметров

Задайте им названия, которые будут отображаться в отчетах. Можно написать Погода и Температура. В качестве области действия выберите Событие, а для каждого параметра задайте свой собственнцый параметр события, точно такой же, как вы написали в теге GTM. У меня - это pogoda и temperatura.

Специальные параметры в GA4

Сохраните специальные параметры. Проверьте корректность передачи данных с помощью режима предварительного просмотра GTM и инструмента DebugView. Как и прежде, как только вы зайдете на сайт, отобразится всплывающее окно с запросом на разрешение доступа к данным о местоположении и на шкале событий отобразится weatherDone. Если вы настроили все корректно, то тег Google Analytics 4 будет активным в Tags Fired.

Событие weatherDone и сработанный тег Google Analytics 4

Раскрыв его, вы можете посмотреть какие данные передаются в GA4:

Данные тега GA4

Они соответствуют тем данным, что были отображены в теге Universal Analytics. Как видите, настройка и проверка действия отличаются незначительно.

После этого вы можете перейти в DebugView и посмотреть как передаются данные с погодными условиями по вашему событию.

Инструмент DebugView с событиями по погоде

Или в отчете в реальном времени:

Отчет в реальном времени по событию weatherGA4

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

<script>
(function() {

var fetchWeatherData = function(longitude, latitude) {
// Open Weather Map
var owmAppKey = '<Вставьте сюда свой API-ключ>';
jQuery.getJSON('https://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&units=metric&APPID=' + owmAppKey)
.done(function(data) {
window.dataLayer.push({
event: 'weatherDone',
weather: data.weather[0].main,
temperature: data.main.temp.toFixed(0) + ' °C'
});
}).fail(function(jq, status, msg) {
console.log('Weather request failed: ' + status + ' - ' + msg);
});
};

var geoLocateUser = function() {
$.getJSON('//extreme-ip-lookup.com/json/')
.done(function(data) {
fetchWeatherData(data.lon, data.lat);
}).fail(function(status, msg) {
console.log('IP request failed: ' + status + ' - ' + msg);
});
};

if (typeof {{Session alive}} === 'undefined') {
geoLocateUser();
}

// Reset "session" cookie with a 30-minute expiration
var d = new Date();
d.setTime(d.getTime()+1800000);
var expires = "expires="+d.toGMTString();
document.cookie = "session=1; "+expires+"; path=/";

})();

</script>

(function() {

var fetchWeatherData = function(longitude, latitude) {

// Open Weather Map

var owmAppKey = '<Вставьте сюда свой API-ключ>';

jQuery.getJSON('https://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&units=metric&APPID=' + owmAppKey)

.done(function(data) {

window.dataLayer.push({

event: 'weatherDone',

weather: data.weather[0].main,

temperature: data.main.temp.toFixed(0) + ' °C'

});

}).fail(function(jq, status, msg) {

console.log('Weather request failed: ' + status + ' - ' + msg);

});

};

var geoLocateUser = function() {

$.getJSON('//extreme-ip-lookup.com/json/')

.done(function(data) {

fetchWeatherData(data.lon, data.lat);

}).fail(function(status, msg) {

console.log('IP request failed: ' + status + ' - ' + msg);

});

};

if (typeof {{Session alive}} === 'undefined') {

geoLocateUser();

}

// Reset "session" cookie with a 30-minute expiration

var d = new Date();

d.setTime(d.getTime()+1800000);

var expires = "expires="+d.toGMTString();

document.cookie = "session=1; "+expires+"; path=/";

})();

</script>

Важно:

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

Вставьте между одинарными кавычками свой API-ключ

в месте, где идет код if (typeof {{Session alive}} === 'undefined') { используйте название своей переменной Основной файл cookie, которую создали ранее. Речь о все той же {{Session alive}}. Если вы назвали ее по-другому, то измените эту часть кода.

Используйте свое название переменной Основной файл cookie

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

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

Остальные настройки (триггер и переменные) аналогичны. Этот скрипт использует другой сервис определения местоположения - extreme-ip-lookup.com. После нескольких проведенных тестов я заметил, что он куда менее точно определяет мое местоположение, а как следствие, погоду и температуру данного региона. Но данных по пользователям фиксирует больше.

Поэтому окончательное решение о том, какие API для определения местоположения пользователя и отображения данных о погоде принимаете вы. Для последнего достаточно OpenWeatherMap, а для определения местоположения посетителя вашего сайта, скорее всего, в силу ограниченности бесплатных тарифов за количеству запросов, вам придется переходить на платный. Но если ваш бизнес сильно зависит от погодных условий, то с помощью этой информации вы можете существенно апгрейдить вашу аналитику, а дополнительные 30-50$/мес. из бюджета компании не будут являться камнем преткновения.

Метки: Google Analytics, Google Tag Manager, OpenWeatherMap

Передача данных о погоде в Universal Analytics и Google Analytics 4

Получайте бесплатные уроки и фишки

Еще статьи