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

Маруся

Администратор
Команда форума
Регистрация
21 Окт 2020
Сообщения
199
Ваш бизнес зависит от погодных условий? Доставка еды, службы такси, пункты проката, фермерские продукты, продажа сезонной одежды, занятия на открытом воздухе, парк развлечений и т.д.? Передавайте данные о погоде в Google Analytics и измеряйте влияние температуры и погодных условий на конверсию и доход вашего сайта.

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

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

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

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

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

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

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

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

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

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

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

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

1615891636783.png
Тарифы OpenWeatherMap

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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 это будет выглядеть так:
1615891700706.png
Пользовательский HTML со специальным кодом

Важно:
  • в переменную APPID необходимо вставить API ключ от OpenWeatherMap, который вы получили несколько шагов назад.
1615891721765.png
Вставьте между одинарными кавычками свой API-ключ
  • в месте, где идет код if (typeof {{Session alive}} === 'undefined') { используйте название своей переменной Основной файл cookie, которую создали ранее. В моем примере это {{Session alive}}, поэтому и в коде я задаю такое название. Если вы назвали ее по-другому, то измените эту часть кода.
1615891733333.png
Используйте свое название переменной Основной файл cookie

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

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

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

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

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

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

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

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

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

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

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

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

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

Но мы можем самостоятельно русифицировать эти состояния и отправлять в Google Analytics данные на привычном нам языке. Для этого необходимо создать переменную типа Таблица поиска, в которой опишем все погодные условия, которые заложены в OpenWeatherMap. Это (sorry за мой английский перевод):
  • Thunderstorm - Гроза
  • Snow - Снег
  • Drizzle - Морось
  • Rain - Дождь
  • Mist - Туман
  • Clouds - Облачно
  • Tornado - Торнадо
  • Fog - Туман
  • Sand - Песок
  • Ash - Пепел
  • Squall - Шквал
  • Dust - Пыль
  • Haze - Дымка
  • Smoke - Дым
  • Clear - Ясное небо
1615891823798.png
Перевод погоды на русский язык

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

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

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

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

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

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

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

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

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

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

1615891958576.png
Данные тега UA

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

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

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

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

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

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

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

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

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

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

В Google Tag Manager создайте тег типа Google Аналитика: событие GA 4 с такой конфигурацией:
  • Название события - weatherGA4 (можете задать произвольное);
  • Название параметра - pogoda и temperatura (можете задать произвольные);
  • Значения параметров - наши переменные с таблицей поиска и температурой соответственно;
  • Триггер активации - пользовательское событие weatherDone.
1615892057914.png
Настройки тега Google Analytics 4

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

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

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

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

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

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

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

1615892167645.png
Данные тега GA4

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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, который вы получили несколько шагов назад.
1615892236404.png

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

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

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

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

Источник
 
Сверху