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 |
|
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 |
|
Workspace Manifest file |
|
Demo default backup Image |
|
Weather Condition Icons |
|
Demo Index HTML file |
|
Ad Feature Javascript file - handles weather api |
|
Ad Feature Display script - handles displaying weather content |
|
Demo Banner Stylesheet |
Switch Weather Template
Filename |
Description |
|
Workspace Manifest file |
|
Demo default backup Image |
|
Weather Condition Icons |
|
Demo Index HTML file |
|
Ad Feature Javascript file - handles weather api |
|
Ad Feature Display script - handles displaying weather content |
|
Demo Banner Stylesheet |
User Weather Template
Filename |
Description |
|
Workspace Manifest file |
|
Demo default backup Image |
|
Weather Condition Icons |
|
Demo Index HTML file |
|
Ad Feature Javascript file - handles weather api |
|
Ad Feature Display script - handles displaying weather content |
|
Demo Banner Stylesheet |
Weather Object Template
Filename |
Description |
|
Workspace Manifest file |
|
Demo default backup Image |
|
Weather Condition Icons |
|
Demo Index HTML file |
|
Ad Feature Javascript file - handles weather api |
|
Ad Feature Display script - handles displaying weather content |
|
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.
- 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>
- 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 |
|
String |
The div id that you will write the Weather Ad Feature to. |
|
String |
The variable name used when instantiating your script (in the example code below wthr_instance = weather) |
|
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. |
|
String |
The server directory of the images you wish to use for the weather icon. Default points to custom hosting directory with default images. |
|
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 |
|
Boolean |
Allows you to overwrite the Aeris API Geo Location service and provide your own location |
|
String |
Used to overwrite the Aeris API Geo Location service. Update this value with a city name you wish to query. |
|
String |
Used to overwrite the Aeris API Geo Location service. Update this value with a state name you wish to query. |
|
Integer |
Used to determine whether the Ad Feature will switch content on temperature (1) or type (2). Used with the Switch Template |
|
String |
Used to determine if the temperature will be displayed in Celcius (‘C’) or Fahrenheit (‘F’). Used with the Switch Template |
|
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
- 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.
- Upload the HTML5 Workspace Folder found in the template folder.
- Log into the MDX2.0 Platform.
- Click on Manage > Creative Assets, and upload your Workspace to the appropriate asset folder.
- (Optional) Rename the folder.
- From the main menu, select Shortcuts > Create New Ad > Create a New Ad.
- In the Ad Name field, enter the unique name of your ad.
- Choose a format from the format type drop-down.
- Choose the HTML5 Workspace Folder you uploaded to the platform.
- Click Save.
Sizmek Sizmek Advertising Suite Setup
- Zip the HTML5 Workspace Folder found in the template folder.
- Log in to the Sizmek Advertising Suite.
- Click the Creative > Asset Library, and upload your Workspace to the appropriate asset folder.
- (Optional) Rename the folder.
- Click Creative > Ads and click the New Ad button and select Blank Ad.
- In the Ad Name field, enter the unique name of your ad.
- Choose a format from the Ad Format drop-down.
- Under Main Assets select the Workspace folder and default image.
- 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
- Visit http://www.aerisweather.com and login or set up a new account if necessary.
- 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.
- Click Save App.
- Save your ID and Secret. These are used in your Ad Feature.
- 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
Comments