Информер погоды на сайте — api OpenWeatherMap
В этой статье мы создадим небольшое приложение на PHP, которое будет показывать прогноз погоды, а затем повторим тоже самое на JavaScript. Для этих целей нам понадобиться данные о погоде и получать мы их будем с помощью API. Существует множество вариантов, за которые нужно заплатить. Для наших целей мы будем использовать сервис OpenWeatherMap, который позволяет отправлять до 60 запросов в минуту бесплатно. Если ваш трафик будет больше, то вы сможете либо воспользоваться продвинутым платным API, либо настроить кэширование для информера погоды на сайте.
Интегрировать этот API на свой сайт и создать полноценный информер погоды довольно легко. Мы сделаем это в 3 этапа, а затем попробуем сделать тоже самое на JS:
Быстрая навигация:
1 Получение ключа OpenWeatherMap API
Чтобы получить API ключ, нам нужно зарегистрироваться в сервисе OpenWeatherMap. Если у вас возникли проблемы и страница не загружается, не работает регистрация — попробуйте зарегистрироваться через VPN.
Для создания информера погоды на сайте введите название компании и выберите цель вашего приложения.
После регистрации вы окажетесь в вашем профиле. Перейдите на вкладку API keys и скопируйте ключ, мы будем использовать его для отправки запросов к API погоды.
1 Определение id города
Скачайте архив с json файлом, откройте его в текстовом редакторе/вашей любимой IDE. Через поиск (ctrl + F) найдите нужный вам город. К примеру Moscow. Обратите внимание, что городов с одинаковым названием может быть несколько, по этому ориентируйтесь по полю country. Сохраните id города под рукой, он нам еще понадобится.
PHP код отправки запроса в API погоды OpenWeatherMap
С помощью кода ниже мы отправим запрос для получения прогноза погоды. Для этого мы используем PHP cURL и в ответ получим данные в формате JSON. Для начала подготовим URL:
Далее выполняем cURL запрос:
Мы получили нужные данные и текущее время, давайте создадим разметку и подставим в нее нужные значения.
Подготовка HTML разметки для отображения прогноза погоды на сайте
Выведим в HTML код описание погоды, диапазон температуры, влажность и скорость ветра.
4 API погоды через JavaScript
Попробуйте создать новую разметку в виде виджета погоды. Добавьте в неё элементы с классами weather__city, weather__forecast, weather__desc и weather__icon.
Посмотрите как работает такой код. В этом примере вместо иконки мы используем разные background-image.
Узнать погоду в Москве
OpenWeatherMap является отличным способом попробовать API погоды на своем сайте, но все же работает он не идеально. Если вы приняли решение, что вам нужен подобный функционал, стоит обратить внимание на платные решения.
One Call API
Make just one API call and get all your essential weather data for a specific location with our new OpenWeather One Call API.
Easy migration from the Dark Sky API.
The One Call API provides the following weather data for any geographical coordinates:
Current and forecast weather data
To get access to current weather, minute forecast for 1 hour, hourly forecast for 48 hours, daily forecast for 7 days and government weather alerts, please use this section of the documentation.
If you are interested in historical weather data, please read the «Historical weather data» section.
How to make an API call
| Parameters | ||
|---|---|---|
| lat, lon | required | Geographical coordinates (latitude, longitude) |
| appid | required | Your unique API key (you can always find it on your account page under the «API key» tab) |
| exclude | optional | By using this parameter you can exclude some parts of the weather data from the API response. It should be a comma-delimited list (without spaces). |
Example of API call
Example of API response
Fields in API response
Historical weather data
To learn about how get access to historical weather data for the previous 5 days, please use this section of the documentation.
If you are interested in current weather data, forecasts and weather alerts please read the «Current and forecast weather data» section.
How to make an API call
Example of API call
Example of API response
Fields in API response
List of weather condition codes
List of weather condition codes with icons (range of thunderstorm, drizzle, rain, snow, clouds, atmosphere including extreme conditions like tornado, hurricane etc.)
Other features
Units of measurement
Wind speed is available in miles/hour and meter/sec.
Examples of API calls
Multilingual support
You can use lang parameter to get the output in your language.
The contents of the description field will be translated.
| Parameters | ||
|---|---|---|
| lang | optional | You can use the lang parameter to get the output in your language. |
Example of API call
We support the following languages. To select one, you can use the corresponding language code:
List of national weather alerts sources
Please note that some agencies from the list may cease to provide us the weather alert information.
In case you don’t receive alerts from any agency, please contact us.
We constantly work on our product’s improvement and keep expanding the list of partner agencies.
Call back function for JavaScript code
To use JavaScript code you can transfer callback functionName to JSONP callback.
OpenWeatherMap — получаем прогноз погоды по API
29.11.2018 2 мин. чтения
OpenWeatherMap — онлайн сервис, который предоставляет платный (есть функционально ограниченная бесплатная версия) API для доступа к данным о текущей погоде, прогнозам, для web-сервисов и мобильных приложений. Архивные данные доступны только на коммерческой основе. В качестве источника данных используются официальные метеорологические службы, данные из метеостанций аэропортов, и данные с частных метеостанций.
Сервис OpenWeatherMap получает данные от профессиональных и частных погодных станций. На сегодня таких станций более 40 тысяч. Большая часть из них это профессиональные станции, которые установлены в аэропортах и крупных городах мира. Но также не менее важным для сервиса являются данные от непрофессиональных станций, которые собирают и устанавливают любители везде, где это возможно. Уровень любительских станции сейчас очень высокий, точность и, главное, оперативность передаваемой информации также находятся на очень высоком уровне. И чем больше таких станций будет подключено к OWM, тем выше будет точность как текущей информации о погоде, так и прогнозов.
API OpenWeatherMap
Сервис предоставляет бесплатный API ко всем данным о погоде, к их истории, прогнозам и всему многообразию погодных карт.
API есть двух видов — JSON для получения данных и Tile / WMS для картографии.
Используя JSON можно получать:
— Данные о погоде в более чем 200 тысячах городов. При этом города не нужно выбирать из жестко ограниченного списка, их можно найти на карте и увидеть оценочные прогнозы погоды как в самом городе, так и в ближайших регионах.
— Данные о текущей погоде в выбранной точке по координатам lat/lon
— Прогноз на 5 или 16 дней в компактной или в полной форме
— «Сырые» данные, полученные от метеостанций
— Данные о погоде за прошедшие периоды
Для работы с API необходимо зарегистрироваться на сайте и получить ключ. С регистрацией на территории Российской Федерации возникают проблемы, потому что OpenWeatherMap не ориентирована на нашу страну, в связи с тем, что у нас необходимо лицензирование на данный вид деятельности. Видимо провайдеры ограничивают доступ к некоторым разделам сервиса. Используйте прокси для регистрации.
После того, как вы зарегистрируетесь и получите API ключ, можно приступать к работе с API.
Простой способ получения текущей погоды
Давайте посмотрим как легко получить текущую погоду в Санкт-Петербурге и вывести ее на сайт. Для работы мы воспользуемся языком программирования PHP.
Используя код выше, мы получили информацию о погоде в Санкт-Петербурге с сайта OpenWeatherMap и вывели на сайт текущую дату и время, названия города, текущую температуру и изображение погоды. Изображение погоды мы используем свои, но можно использовать изображения самого сервиса.
Это пример вывода лишь части информации о погоде. Вы можете вывести больше информации и красиво все оформить. Один из вариантов можно посмотреть по ссылке ниже.
Пример работы с API OpenWeatherMap можно посмотреть здесь: Погода в Санкт-Петербурге сейчас
Передача данных о погоде в Universal Analytics и Google Analytics 4
Ваш бизнес зависит от погодных условий? Доставка еды, службы такси, пункты проката, фермерские продукты, продажа сезонной одежды, занятия на открытом воздухе, парк развлечений и т.д.? Передавайте данные о погоде в Google Analytics и измеряйте влияние температуры и погодных условий на конверсию и доход вашего сайта.
Учитывая мою страсть к различного рода интересным и нетрививальным задачам, которые можно решить с помощью Google Analytics и Google Tag Manager, рано или поздно я должен был написать об этом для вас в блоге. Сразу хочу сказать, что я не являюсь автором этого способа и не желаю получать незаслуженные лавры за простую адаптацию для русскоязычного сообщества и некоторые дополнения для Google Analytics 4. Когда Симо Ахава (Simo Ahava) впервые написал о передаче данных о погоде в Google Analytics в марте 2015 года, я еще не работал в интернет-маркетинге и вообще не знал, что такое диспетчер тегов от Google.
Спустя 5 лет многие специалисты по интернет-маркетингу опубликовали свои собственные решения. Какие-то из них работают до сих пор и по ним можно повторять шаги настройки, а какие-то нет (устарели). Ниже я прикладываю список статей и видеоуроков на эту тему от различных авторов, которых я брал за основу при написании этой публикации:
Перечитав и перебровав все, на мой взгляд, наиболее простое, точное (по данным) и понятное решение, которое сейчас работает, у Дмитрия Осиюка. Он даже выложил готовый контейнер для GTM, который вы можете скачать и импортировать к себе. Правда без пояснений будет сложно понять последовательность действий.
Я уважаю труд каждого из них, поэтому буду использовать комбинированный вариант из всех представленных с небольшими комментариями и дополнениями 😉 А вот что у вас должно получиться в результате проделанных действий, описанный в этой статье:
Пример отчета в Universal Analytics с данными о погоде
Данные о погодных условиях полезны не только в отчетах Google Analytics ради ВАУ-эффекта или настройки из любопытства (а так можно было?), но еще и при оптимизации рекламных кампаний, когда в зависимости от информации в регионе в конкретное время вы можете корректировать ставки и бюджет. В официальной документации Google описан способ управления кампаниями Google Ads на основе погоды.
Давайте перейдем к непосредственной настройке. Первым делом необходимо зарегистрироваться на сайте openweathermap.org.
OpenWeatherMap — онлайн-сервис, который предоставляет платный и бесплатный (ограниченный) API для доступа к данным о текущей погоде, прогнозам и историческим данным. В качестве источника данных используются официальные метеорологические службы, данные от метеостанций аэропортов, и данные с частных метеостанций.
Введите свои данные (username, email и password), согласитесь с политикой сервиса и нажмите Create Account (Создать аккаунт):
Регистрация на сайте openweathermap.org
На следующем шаге укажите название компании и вид деятельности, к которому вы относитесь. Нажмите Save (Сохранить):
Как будете использовать API?
После регистрации не забудьте перейти в свой почтовый ящик и подтвердить e-mail. Далее вы можете зайти на страницу с тарифами и ознакомиться с ограничениями и ценами сервиса.
Далее перейдите на страницу с вашими API-ключами и скопируйте (сохраните) ключ, который вам предоставили. Он пригодится при настройке тега в Google Tag Manager.
Копирование ключа API
Зайдите в GTM и создайте пользовательскую переменную типа Основной файл cookie с названием session:
Назовите переменную (например Session alive) и сохраните ее. Затем создайте тег типа Пользовательский HTML и вставьте туда следующий код:
Current weather data
Access current weather data for any location on Earth including over 200,000 cities! We collect and process weather data from different sources such as global and local weather models, satellites, radars and a vast network of weather stations. Data is available in JSON, XML, or HTML format.
Call current weather data for one location
By city name
You can call by city name or city name, state code and country code. Please note that searching by states available only for the USA locations.
| Parameters | ||
|---|---|---|
| q | required | City name, state code and country code divided by comma, Please, refer to ISO 3166 for the state codes or country codes. |
You can specify the parameter not only in English. In this case, the API response should be returned in the same language as the language of requested location name if the location is in our predefined list of more than 200,000 locations.
Examples of API calls:
By city ID
You can make an API call by city ID. List of city ID ‘city.list.json.gz’ can be downloaded here.
We recommend to call API by city ID to get unambiguous result for your city.
Examples of API calls
By geographic coordinates
Examples of API calls
By ZIP code
Please note if country is not specified then the search works for USA as a default.
Examples of API calls
Call current weather data for several cities
If you request weather data for several locations, you will get the response only in JSON format (XML and HTML formats are not available for these cases).
Cities within a rectangle zone
API returns the data from cities within the defined rectangle specified by the geographic coordinates.
Examples of API calls
Cities in circle
Examples of API calls
Call for several city IDs
There is a possibility to get current weather data for several cities by making one API call.
| Parameters | ||
|---|---|---|
| id | required | City ID. List of city ID ‘city.list.json.gz’ can be downloaded here. |
The limit of locations is 20.
Examples of API calls
Bulk downloading
We provide number of bulk files with current weather and forecasts. The service allows you to regularly download current weather and forecast data in JSON format. There is no need to call an API to do this.
More information is on the Bulk page.
Examples of bulk files
Weather fields in API response
Fields in API response
Parameters:
List of weather condition codes
List of weather condition codes with icons (range of thunderstorm, drizzle, rain, snow, clouds, atmosphere including extreme conditions like tornado, hurricane etc.)