Components Retailigence
- Retailigence Display Formats
- Using the component (End-User)
- Designing with the component
- Retailigence API
- Helper Methods
This Animate CC component leverages the Retailigence API Service to display search results for Retailers or Products, which includes Retailer location, hours, logo, and clickable link to the Retailer’s web site and a clickable link with the map of the store location. Tremor Video has subscribed to Retailigence since June 2014. Retailigence Inc was acquired by ShopAdvisor Inc in April 2016.
The component can be configured to base the search on a Retailer ID or a Product ID, Product Name, Product Brand, or Product Keywords.
The first call to the Retailigence API uses the default zip code for the ad. The user can enter a new zip code in a Search input box to display results for a different location.
Retailigence Display Formats
- Compact Bug
- Standard Bug
- Expanded List
The same data returned by the Retailigence API can be displayed in different formats, so the results integrate better with the overall ad design. There are 2 versions, the Compact Bug and the Standard Bug, that display the first search result on a small graphical element (rectangular area), that can be animated into the pre-roll video as a "bug". Clicking on the “More” link then slides up a scrollable table with all the search results. The other format is the Retailigence List, which is a larger graphical element containing a scrollable table of all the search results.
Using the component (End-User)
The first call to the Retailigence API is from the Movie Clip in which the component is placed. The bug versions are typically placed in the CreativeMain Movie Clip of a PRP (Pre-Roll-Plus), and the Expanded list is typically placed in the Slate Movie Clip of an SPR (Super-Pre-Roll).
In the bug versions, only the first search result is displayed. The user must click the “More” link to see the full table of results. In all versions, the scrollable table of the full search results contains a form with an input field with the text "Enter a zip code". The user may enter a valid zip code and either hit the Return/Enter key, or click the Magnifying glass icon next to the input field. Either action will initiate a new Retailigence API call. If the zip code is not valid or does not contain any search results near that zip code, the display table will be replaced with the text "Sorry, there are no locations in your area". When the search results return multiple retailer locations, the search results are sorted based on distance from the specified zip code.
The bug versions have a “Close” link in the table, so the user can use to slide the table down and resume the ad. The List version does not close, and instead the Close icon on the Slate should be used to resume the ad.
The Retailigence API Service on occasion is unavailable (non-functioning). Contact the Account Manager if necessary, who may need to contact ShopAdvisor.
Designing with the component
Placement
First, ensure the Components panel is showing in Animate CC (Winow > Components). Expand the
Blink Components folder and drag the desired Retailigence component onto the canvas. Multiple
can be placed on the same canvas. The components can be repositioned by clicking and dragging. Sometimes
the ad designer may wish to initially place the Bug version outside the viewable canvas, and use a
Tween in the Movie Clip Action panel to animate the bug into the viewable area, similiar to
using keyframes in Creatives made with Mobile Creative Studio.
Instance Name
To adjust the properties of the component, ensure the desired Retailigence component is selected and
open the Properties panel (Window > Properties). Each component can be designated a unique instance
name if preferred. Otherwise, the instance name will be the component name + the number of components
already placed (e.g. retailigence-compact-0, retailigence-compact-1).
Position
The position can be manipulated on the canvas or through the properties pane. The Movie Clip Actions panel can be used to add code to animate the Bug version. Note that for the Bug versions, the user click of the “More” link will slide up the scrollable table of full results at a fixed elapsed time of 2 seconds, and will occupy 90% of the ad area. These values are in the Design Specifications for this component and are not adjustable. Clicking the “More” link will also pause the pre-roll video, and add a gray transparent overlay on the video.
Size
The Bug versions have been designed to be best readable at the default size, although some adjustment can be made if necessary. In this case, make sure the “link” icon to the left of the Width (W) field is selected, so that the aspect ratio is locked.
The List version is has a font size that is well-suited for the default size. If you change the size of the Movie Clip, you may also need to change the parameter “Font Magnification” as described below.
Parameters
Under the Component Parameters heading are a list of configurable parameters. Only one of the 5 Retailigence data fields should be specified. If multiple fields are specified, the last one in this order is used.
- Retailer ID
- Product ID
- Brand
- Keywords
- Product Name
Retailer ID
The Retailer ID is an alpha-numeric string specified by ShopAdvisor (Retailigence). The Account Manager is responsible for providing a list of Retailer IDs for a given advertising campaign. The Animate CC Retailigence components allow multiple Retailer IDs, which must be separated by commas. Note that a few Retailer search results do not contain a link to the store logo, in which case, the component will display "Logo Not Available".
Product ID
The Product ID is an alpha-numeric string specified by ShopAdvisor (Retailigence). The Account Manager is responsible for providing the Product ID for a given advertising campaign.
Brand
Examples are Microsoft or Colgate.
Keywords
Examples are Automobiles or Computers.
Product Name
Examples are Xbox or iPhone.
auto-close (sec)
For the bug versions, after the user clicks on “More” to display the table of full results, this table will automatically slide down and close after 30 seconds. The table will slide down out of view in 2 seconds, and the gray overlay on the video will fade out and the pre-roll video will resume playing. This auto-close time can be changed from 30 seonds in Animate CC by entering a different number in this field.
Font Magnification
This feature is available only in the List version, since only this version allows the designer to change the size of the table of full results. If the table is made larger than the default size, it may enhance the display appearance to increase this value.
Retailigence API
The full Retailigence API is on the Tremor Video internal wiki page:
The Retailigence API Documentation can be downloaded here: Click to Download
Helper Methods
The component utilizes helper methods from a utility file. The _handleComponentUpdate method invoked during updates helps keep the component scaled appropriately.