Retailigence - Sizmek Ad Feature

Transcription

Si
z
mekAdFeat
ur
e
Ret
ai
l
i
genc
e
HTML
5Bui
l
dGui
de
Table of Contents
Overview ................................................................................................................................................................2 Supported Platforms ....................................................................................................................................................... 3 Demos/Downloads .......................................................................................................................................................... 4 Important Information Regarding Location Services ................................................................................................. 4 Included Files ........................................................................................................................................................5 Implementing the Ad Feature ............................................................................................................................7 Configuring The HTML5 Retailigence Ad Feature ....................................................................................................... 7 Sizmek
Overview
The Retailigence Ad Feature allows advertisers to tap into Retailigence’s powerful API containing rich product
and store inventory data. Utilizing this valuable, real-time information in combination with a compelling rich
media ad, you can help drive the end user in-store with clear intent to purchase. Many more shoppers are
starting their shopping trips online, but 90% of mobile shoppers end up buying locally. Mobile research is
shaping the brick and mortar environment, with smartphones already playing a greater role in planning &
executing store-related shopping trips versus laptops & desktop.
The Retailigence Ad Feature loads retailer information, including nearest store location of the product you’re
advertising (address, map results and images for in-stock products), into your creative by leveraging the
Retailigence API. By including brand locations to your creative you can add local relevance and targeting,
resulting in up to two times the click through rates.
Note: this is a Premium Ad Feature which utilizes the Retailigence API. You must set up an account with
Retailigence and obtain a unique API Key. This Ad Feature will not work until the Config class has been updated
with a valid API Key.
Note: Retailigence is available in the United States only, and for select Canadian retailers with US-based
operations. Reach out to your Sizmek rep for full availability.
Copyright © 2015 Sizmek. All rights reserved.
2
Sizmek
Supported Platforms
Platform
Supported Version
Windows
Internet Explorer 9+, Firefox, Chrome, Safari
Mac
Firefox, Chrome, Safari
Supported Version
3
Sizmek
Platform
iPhone
iOS 5.0 and later
iPad
iOS 5.0 and later
Android
Android 2.3 and later( including tablets)
Demos/Downloads
To download the Ad Feature, view a demo, or get the latest copy of the build guide, please visit the Ad Features
page of the Sizmek Showcase. For more information, contact your Creative Development Specialist.
Important Information Regarding Location Services
Depending on the setup you choose, this Feature may take advantage of the GEOLocation and MapQuest
Feature classes. Both of these Features are Premium and may incur additional costs. For more information,
please review the Build Guides for the additional Feature.
4
Sizmek
Included Files
Multiple Products Template
Filename
Description
css/feature_styles.css
Sizmek Feature Stylesheet
images/DefaultImage500x250.gif
Sizmek Feature Default Image
Images/product_1.jpg
Demo Product Image
index.html
Sizmek Feature HTML5 file.
js/retailigence.js
Sizmek Feature Javascript file.
Multiple Products with MapQuest Template
Filename
Description
Images/poi.png
Point of Interest Image for MapQuest
Demo Product Image
index.html
js/retailigence.js
Single Product Template
Filename
Description
Demo Product Image
index.html
js/retailigence.js
5
Sizmek
Single Product with MapQuest Template
Filename
Description
Images/poi.png
Point of Interest Image for MapQuest
Demo Product Image
index.html
js/retailigence.js
6
Sizmek
Implementing the Ad Feature
Before you begin, make sure you have the following resources available:
•
HTML5 Retailigence Ad Feature Files The HTML5 Retailigence Ad Feature is accompanied by four (4) templates:
1. The Multiple Product Template – This template allows you to place multiple Retailigence Find buttons anywhere in your creative. When clicked, a div will launch that includes Retailer name, address, phone number, distance and logo, and a large image of the product. 2. The Multiple Products with MapQuest Template – This template allows you to place multiple Retailigence Find buttons anywhere in your creative. When clicked, a div will launch that includes Retailer name, address, phone number, distance and logo, and a MapQuest map with POI for the retailer location.
3. The Single Product Template – This template allows you to place a Retailigence Find button in your creative. When clicked, a div will launch that includes Retailer name, address, phone number, distance and logo.
4. The Single Product with MapQuest Template – This template allows you to place a Retailigence Find button in your creative. When clicked, a div will launch that includes Retailer name, address, phone number and logo, and a MapQuest map with POI for the retailer location.
Configuring the HTML5 Retailigence Ad Feature
The HTML5 Retailigence Ad Feature allows the developer to add a content to your creative that will load local
and relevant retailer info for a particular brand. The Feature settings can be configured by editing the
parameter values in the feature_Config object, which is located in the index.html file. Depending on which
template you’re editing, this object has up to two additional objects, one for Retailigence options and one for
MapQuest options.
Retailigence Parameters:
Parameter
Description
key
String – Retailigence API Key - use Production
key for live campaigns, not dev key.
location
String - Enter a Zip Code if specific location is
needed. Otherwise GEOLocation will be used. If
not entering a zip code, you must request a
7
Sizmek
unique GEOLocation url from Custom Dev.
location_url
String - If ‘location’ above is left empty, enter your
unique GEOLocation Url from Custom Dev below.
type
String – Type of Retailigence Query being made.
Brand – Band name of product
Keyword – Keyword Search of product
Id – Product Id
data
String – Query Data sent to Retailigence. For
instance, if type if “brand”, data might be “nike”.
Or if type is Keyword, data might be “sports
drink”.
retailer_id
String – Retailer Id used to search one specific
retailer.
btn
String – Element Id of the Retailigence Find
Button
MapQuest Parameters:
Parameter
Description
key
String – Retailigence API Key - use Production
key for live campaigns, not dev key.
div_h
Number – Height of MapQuest Map.
div_w
Number – Width of MapQuest Map.
Map_Zoom
Number – Initial Zoom Level of MapQuest Map.
The following code example shows how to add a Retailigence div to your creative. This example includes code
for MapQuest functionality, however, adding MapQuest to your creative is optional. Please note that all the
information provided in the example is for demo purposes only. Any API keys are urls used in this example are
not intended for live campaigns.
8
Sizmek
1. Add JS include to your index.html file <script type="text/javascript" src="js/retailigence.js"></script>
2. Add a button to your page with an id that you will use in step 3f. <div class="btn_retail" id="btn_retail">Find</div>
3. Add Config Object and update necessary Retailigence object parameters. a. Update ‘key’ with unique Retailigence API key b. Update ‘location’ with a Zip Code or comma separated Latitude and Longitude if specific location is desired -‐ optional c. Update ‘location_url’ with GEOLocation URL provided by Custom Dev. -‐optional i. GEOLocation is a Premium service that requires a Custom Dev Request. ii. This field overrides ‘location’. If both are valid, GEOLocation will be used. d. Update ‘type’ with ‘brand’, ‘keyword’, or ‘id’. e. Update ‘data’ with your desired query. f. Update ‘retailer_id’ with desired Retailer Id. Use this parameter if you want to search for one specific retailer. g. Update ‘btn’ with the element id of the button from Step 2. <script type="text/javascript">
var feature_Config = {
retailigence: {
key: 'EE_-12345678901425365869607097_Brr',
location: '10011',
location_url: 'http://preview-mmgl.cd.serving-sys.com/mmgetlocation.ashx',
type: 'keyword',
data: 'Burt\'s Bees',
retailer_id: ‘b5f693d1-d01d-44fb-8b68-0c46f4024969’,
btn: 'btn_retail1'
}
}
</script>
9
Sizmek
4. If you wish to add MapQuest to your creative, add the MapQuest options object and update object parameters. a. Update ‘key’ with a valid MapQuest API key. b. Update ‘div_h’ with the desired height of your MapQuest Map. c. Update ‘div_w’ with the desired width of your MapQuest Map. d. Update ‘Map_Zoom’ with the desired initial Zoom Level of your MapQuest Map. <script type="text/javascript">
var feature_Config = {
retailigence: {
key: 'EE_-12345678901425365869607097_Brr',
location: '10011',
type: 'keyword',
btn: 'btn_retail1'
},
mapquest: {
key: "Fmjtd%7Cluub2l0zn1%2Cb2%3Do5-96yglf",
div_h: 150,
div_w: 260,
Map_Zoom:16
}
}
</script>
5. Instantiate your Javascript Class and pass the name of the class var and the Config Object. a. First Parameter is the name of the Class var . In the example below, we name this instance of the class ‘new_Retailigence’ so we pass that string through to the method. This name must be unique. var new_Retailigence = new retailigence ('new_Retailigence', feature_Config);
For campaigns with more than one Retailigence Query, simply repeat steps 2-5 and use unique id names for
the button, the Config Objects and Class Name. Below is a code example showing two Retailigence buttons,
requiring two sets of Config objects and two unique instances of the Javascript Class.
<script type="text/javascript" src="js/retailigence.js"></script>
10
Sizmek
<div class="btn_retail" id="btn_retail1">Find</div>
<div class="btn_retail" id="btn_retail2">Find</div>
<script type="text/javascript">
var feature_Config1 = {
retailigence: {
key: 'EE_-12345678901425365869607097_Brr',
location: '10011',
type: 'keyword',
btn: 'btn_retail1'
},
mapquest: {
div_h: 150,
div_w: 260,
Map_Zoom:16
}
}
var feature_Config2 = {
retailigence: {
key: 'EE_-12345678901425365869607097_Brr',
location: '10011',
type: 'brand',
data: 'Nike',
btn: 'btn_retail1'
},
mapquest: {
div_h: 150,
div_w: 260,
Map_Zoom:16
}
}
var new_Retailigence1 = new retailigence ('new_Retailigence1', feature_Config1);
var new_Retailigence2 = new retailigence ('new_Retailigence2', feature_Config2);
</script>
11

Retailigence - Sizmek Ad Feature

Transcription

Similar documents

How to Print Map from MapQuest: • Go to mapquest.com • Click Get

print.adp?

the BTN Media Kit

Interacting with web pages

ni.com - SDL.com

Section Styling - Gerry Kruyer`s courses

EDUCATIONAL LCD OSCILLOSCOPE eDu08

Introduction to Web Programming

Cuddy, Wilson William, Lt 7112 - Museum Strathroy

Social Clienteling

Membership Benefits for 2015 Thank you again to our 2014 Gold

Lottery Group Play Form

Chapter 4 Page Layout - Web Programming Step by Step

BudgetAir, CheapTickets, Vayama, Vliegwinkel, Flugladen

developing effect of html5 technology in web game

Page Templating - OU Campus Support Site

Jan.2012.web - The Warrior

Feb.2009.web - The Warrior

Perspective and Leonardo`s “Perspectograph” Perspective and

jQuery for Designers Beginner`s Guide

Scraping the Web for Arts and Humanities

Calling FoxPro COM objects from ASP.NET Revisited