Submit a request
PRODUCT
Privacy Policy  |  Terms of Use
Follow
Last Update:
  viewable by end users
  editable by agents

Overview

Introduction and Screenshots

The HTML5 Weather Ad Feature loads current and future forecasts into your creative. Users can track the weather and change the creative based on the temperature or the weather type. The Weather Ad Feature is built using the Aeris Weather API. The Weather Ad Feature utilizes the Aeris auto location method to detect the location of the audience and display the weather that is accurate based on their location.

This Ad Feature comes with four templates:

  • Basic Weather Template: Displays the current location, temperature, feels like and time.
  • Switch Weather Template: Allows you to assess the weather on either the temperature or the weather type (ie rain/snow) and display creative specific to the results. For example, if it is warm, show a cold drink, if it is cold, show a warm drink.
  • User Weather Template: Allows the user to enter a zip code and load the Basic Weather Ad Feature with weather relevant to the zip code entered.
  • Weather Object Template: Shows an output of the API response object and allows developers to see names and values of all the properties associated with the observation object.      

The Aeris Weather API has multiple available endpoints that allow for different responses, for example, Forecasts, Tides, etc. For the purpose of templates and demos provided, we're using the observation endpoint. For more information on other available endpoints, please visit the Aeris Weather website: http://www.aerisweather.com/support/docs/api/.

The Weather Ad Feature utilizes the Aeris auto location method to detect the location of the audience, however, this feature can be bypassed by updating the configuration object under options in the template code. Refer to the Configuring the Weather Ad Feature section.

Note: This ad feature utilizes the Aeris Weather API. You must set up an account with Aeris and obtain a unique Aeris ID and Secret. These will be used to connect to the Aeris API. The HTML5 Weather Ad Feature will not work until you have entered your Aeris ID and Secret into the Config object.

The Weather Ad Feature template and demo use a free Aeris Weather API Account that has a maximum of 750 allowed hits per day.

Important: PLEASE DO NOT USE THIS DEMO ACCOUNT FOR ANY REASON. Using this account may cause delays or error responses causing the demo to break. Please obtain an Aeris Weather account and update the Ad Feature with your own, unique Aeris ID and Secret before development.

  

  

Demos/Downloads

The following table provides links to the template and demo for the Weather Ad feature. The Weather Ad Feature templates and demo use a free Aeris Weather API Account that has a maximum of 750 allowed hits per day.

Template

Sizmek_Weather_3_0_0.zip

Demo

Preview Demo

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 10+, Firefox, Chrome, Safari

Mac

Firefox, Chrome, Safari

iPhone

iOS 8.0 and later

iPad

iOS 8.0 and later

Android

4 and later( including tablets)

Assets

Workspaces Available

The HTML5 Weather Ad Feature includes four Workspace templates. All four templates listed below use the HTML5 Polite Banner format.

Included Workspace Files

Basic Weather Template

Filename

Description

config.js>

Workspace Manifest file

images/DefaultImage500x250.gif

Demo default backup Image

images/weather_icons

 Weather Condition Icons

index.html

 Demo Index HTML file

scripts/weather.js

 Ad Feature Javascript file - handles weather api

scripts/weatherDisplay.js

 Ad Feature Display script - handles displaying weather content

styles/styles.css

 Demo Banner Stylesheet

 

Switch Weather Template

      Filename

Description

config.js

Workspace Manifest file

images/DefaultImage300x250.gif

Demo default backup Image

images/weather_icons

 Weather Condition Icons

index.html

 Demo Index HTML file

scripts/weather.js

 Ad Feature Javascript file - handles weather api

scripts/weatherDisplay.js

 Ad Feature Display script - handles displaying weather content

styles/styles.css

 Demo Banner Stylesheet

 

User Weather Template

Filename

Description

config.js

Workspace Manifest file

images/DefaultImage500x250.gif

Demo default backup Image

images/weather_icons

 Weather Condition Icons

index.html

 Demo Index HTML file

scripts/weather.js

 Ad Feature Javascript file - handles weather api

scripts/weatherDisplay.js

 Ad Feature Display script - handles displaying weather content

styles/styles.css

 Demo Banner Stylesheet

 

Weather Object Template    

Filename

Description

config.js

Workspace Manifest file

images/DefaultImage500x250.gif

Demo default backup Image

images/weather_icons

 Weather Condition Icons

index.html

 Demo Index HTML file

scripts/weather.js

 Ad Feature Javascript file - handles weather api

scripts/weatherDisplay.js

 Ad Feature Display script - handles displaying weather content

styles/styles.css

 Demo Banner Stylesheet

Implementing the Ad Feature

How to Add the Weather Ad Feature Templates to your Workspace Code

Prerequisite

Before you begin, make sure you have the following resources available:

  • HTML5 Weather Ad Feature Files 
  • A unique Aeris Account with Aeris Id and Secret

Configuring the Weather Ad Feature

The following code example shows how to add the Weather Ad Feature to your creative. Please note: some file paths have been shortened for simplification.

  1. Add JS and CSS includes to your index.html file

     
     <link href="styles/styles.css" rel="stylesheet" type="text/css" media="all";/script>
     <script type="text/javascript" src="scripts/weather.js"></script>
  1. Add and edit the following to the body of your index.html file and instantiate your script. Note that not all options listed below are needed for each template. Some options are specific to individual templates. 

     <script type="text/javascript">
          var weatherConfig = {
		container: 'weather',
		wthr_instance: 'weather',
		wthr_id: 'XxXxxxXXXXXxxXxxxxxxx',
                wthr_scrt: 'XXXxXXXXXxXxXXxxXXxXxxxXXXxxxxxxxxXxxXXXxX',
		wthr_clickthrough: 'http://www.sizmek.com',
		options: {
			width: 300,
			height: 250,
			wthr_loc_auto: true,
			wthr_override_city: 'New York',
			wthr_override_state: 'New York',
			wthr_switch: 2,
			wthr_temp_cf: 'F',
			wthr_temp_threshold: 74,
			conditions: [ 'R', 'T', 'S' ]	,
                        userInit: false
		}
	  };

          var weather = new AerisWeather(weatherConfig);
     </script>

Weather Parameters

parameter

Type

Description

container

String

The div id that you will write the Weather Ad Feature to.

wthr_instance

String

The variable name used when instantiating your script (in the example code below wthr_instance = weather)

wthr_id

String

Your Aeris Account Aeris ID. You must update this value before using the HTML5 Weather Ad Feature.

wthr_scrt

String

Your Aeris Account Aeris Secret. You must update this value before using the HTML5 Weather Ad Feature.

wthr_icon_string

String

The server directory of the images you wish to use for the weather icon. Default points to custom hosting directory with default images.

wthr_clickthrough

String

The clickthrough url


Weather Options

Options

Type

Description

height

Integer

The desired width of the container div

width

Integer

The desired height of the container div

wthr_loc_auto

Boolean

 Allows you to overwrite the Aeris API Geo Location service and provide your own location

wthr_override_city

String

 Used to overwrite the Aeris API Geo Location service. Update this value with a city name you wish to query.

wthr_override_state

String

 Used to overwrite the Aeris API Geo Location service. Update this value with a state name you wish to query.

wthr_switch

Integer

Used to determine whether the Ad Feature will switch content on temperature (1) or type (2).

Used with the Switch Template

wthr_temp_cf

String

Used to determine if the temperature will be displayed in Celcius (‘C’) or Fahrenheit (‘F’).

Used with the Switch Template 

wthr_temp_threshold

Integer

The temperature at which it is determined if the weather will trigger a warm or cold weather response.

For instance: if this option is set to 75° and the weather is 75° or higher, the script will trigger a warm weather result. If the weather is 74° or lower the script will trigger a cold weather result.

conditions

Array

An array that tracks weather codes. Add additional codes as needed, ie R = Rainy, S = Snow. Add will load unique asset or frame based on code.

For a full list of weather codes, see the Aeris site:

http://www.aerisweather.com/support/docs/api/reference/weather-codes

Setting up the Weather Ad Feature in the Sizmek Platforms

Sizmek MDX2.0 Platform Setup

  1. Archive the Weather template workspace of your choice into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. Upload the HTML5 Workspace Folder found in the template folder.
  3. Log into the MDX2.0 Platform.
  4. Click on Manage > Creative Assets, and upload your Workspace to the appropriate asset folder.
  5. (Optional) Rename the folder.
  6. From the main menu, select Shortcuts > Create New Ad > Create a New Ad.
  7. In the Ad Name field, enter the unique name of your ad.
  8. Choose a format from the format type drop-down.
  9. Choose the HTML5 Workspace Folder you uploaded to the platform.
  10. Click Save. 

Sizmek Sizmek Advertising Suite Setup

  1. Zip the HTML5 Workspace Folder found in the template folder.
  2. Log in to the Sizmek Advertising Suite.
  3. Click the Creative > Asset Library, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. Click Creative > Ads and click the New Ad button and select Blank Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the Ad Format drop-down.
  8. Under Main Assets select the Workspace folder and default image.
  9. Click Save.  

Aeris Weather API Account Setup 

The Weather ad feature utilizes the Aeris Weather API. You must set up an account with Aeris and obtain a unique Aeris ID and secret. These will be used to connect to the Aeris API.  The Weather Ad Feature will not work until you have entered your Aeris ID and Secret into the Config object. Follow the steps below to set up an account and obtain the necessary credentials.

Procedure

  1. Visit http://www.aerisweather.com and login or set up a new account if necessary.
  2. With a new account, a new app should already be created for you. However, if you need to create a new app, Select New Application and enter a name for your Application Name and '*' for Application Namespace.

         

  1. Click Save App.

         

  1. Save your ID and Secret. These are used in your Ad Feature.
  2. Select Add Subscription in the menu and choose the correct subscription level that best suits your needs. 

Known Issues

Use of the Zip Code to determine the weather location is only available in US and Canadian markets. 

Important Notice

The Weather Ad Feature template and demo use a free Aeris Weather API Account that has a maximum of 750 allowed hits per day. PLEASE DO NOT USE THIS ACCOUNT FOR ANY REASON. Using this account may cause delays or error responses causing the demos to break as well as preventing your own ad campaigns from running correctly. Please obtain an Aeris Weather Account and update the Ad Feature with your own, unique Aeris ID and Secret before development.

Change Log

26 January 2017

  • Migrated to the Sizmek Advertising Suite.
  • Updated Script to unify template functionality.
  • Separated Display code to weatherDisplay.js.

9 March 2016

  • Updated to use Adkit
  • Updated for secure protocol

 

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments