Lenovo Recommends Logo Integration Guide - Amazon...

14
Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive Inc. All rights reserved Lenovo Recommends Logo Integration Guide This integration guide provides a brief overview as well as detailed and technical information about: How the Logo Service works. How to implement the Logo Service into the product pages on your website. Logo Service Overview CNET Content Solutions now offers a dynamic logo service ("the Logo Service") which is designed to automatically display logos, including expandable logos that offer relevant products, based on product compatibility with manufacturer programs. The Logo Service takes the guess work out of having to determine whether a product is compatible with other manufacturer products. If the product is compatible with supported manufacturer programs, the Logo Service will serve all the compatible logos dynamically in a product overview or landing page and link the logos to additional content such as product promotions, offerings, product tours or videos. How It Works 1. CNET Content Solutions collect lists of products from manufacturers that are compatible or certified for active Manufacturer programs. 2. CNET Content Solutions provides automated product mapping for catalog coverage. 3. You embed a JavaScript Code Snippet in your product page on your website.

Transcript of Lenovo Recommends Logo Integration Guide - Amazon...

Page 1: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

Lenovo Recommends Logo Integration Guide This integration guide provides a brief overview as well as detailed and technical information about:

• How the Logo Service works. • How to implement the Logo Service into the product pages on your website.

Logo Service Overview

CNET Content Solutions now offers a dynamic logo service ("the Logo Service") which is designed to automatically display logos, including expandable logos that offer relevant products, based on product compatibility with manufacturer programs. The Logo Service takes the guess work out of having to determine whether a product is compatible with other manufacturer products. If the product is compatible with supported manufacturer programs, the Logo Service will serve all the compatible logos dynamically in a product overview or landing page and link the logos to additional content such as product promotions, offerings, product tours or videos.

How It Works

1. CNET Content Solutions collect lists of products from manufacturers that are compatible or certified for active Manufacturer programs.

2. CNET Content Solutions provides automated product mapping for catalog coverage.

3. You embed a JavaScript Code Snippet in your product page on your website.

Page 2: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

4. When your customer such as an online shopper views a product page on your website, the JavaScript sends a real-time request for available logos and additional hover content by sending either the product's manufacturer name and manufacturer part number or CNET DataSource Product ID.

5. The Logo Service performs a look up of enabled logo programs for your account that are compatible with the product.

6. The Logo Service then returns a localized stream of logos and hidden associated hover content on your product page. If no logos are compatible with the product, the logo service will not return any content.

7. Upon hover of the logo, the hidden content is displayed. 8. Upon clicking of the product offering, the Logo Service takes the user either to

your product offer page or adds the offer to the cart.

Features

• Low Maintenance implementation allows you to receive upgrades, additional features and increased product coverage without code changes on your website.

• Allows you to choose your logo size and style dynamically. • Multi-lingual and localization support. • Performance Tracking • Manufacturer Mapping - Supports variations of Manufacturer names such as HP

vs Hewlett Packard. • Part Number Cleaning - Supports variations of the Manufacturer Part Number

such as "KDL60NX801" vs "KDL-60NX801".

Lenovo Recommends Logo Program Visual Design

Lenovo Recommends Logo

Example of Expandable Hover Content

When shoppers hover their mouse over the above Lenovo Recommends logo they will be shown the expandable hover content below:

Page 3: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

Available Logo Sizes

The Lenovo Recommends program is available in the following logo sizes:

• 74 x 85 Pixels - Standard Size • 50 x 57 Pixels – Small

Available Languages

The Lenovo Recommends Logo Service currently supports English (EN) and French (FR) for the US, Canada and France markets.

Integration Requirements

You will need the following in order to begin using the Lenovo Recommends Logo Service:

• A registered portal account or Customer ID enabled for ContentCast.

Page 4: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

• Your product catalog. • Your logo preferences (as described later in this guide). • Your hover content preferences. • Access and permissions to make changes to your website product

pages.

To subscribe to ContentCast Service you will need to have a registered portal account at http://portal.cnetcontent.com

For additional programs, please contact your CNET Sales Representative or contact Support. When contacting your Sales Rep or Customer Support, please include which ContentCast Programs you would like.

Once registered, you will be able to pick up your code from the client portal.

Account Registration

To use ContentCast™ you will need to register for the service at https://portal.cnetcontent.com. After registering, you will receive an email to confirm your email account and complete registration. You will then be able to complete your account and company profile.

Page 5: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

Configure Product Page

In order to implement the ContentCast Product Page script on your website:

1. From the Client Portal, click My Services and choose Configure Product Page 2. Name your Product Page script such as "Acme.com - Product Page"

Page 6: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

3. From the Product Page Settings, you will see a number of available product page components.

4. Enable Inline Content and Logo Services 5. Click Get Code to get the script.

Example

• The script example above is for demo purposes and will not work. Use the code from the Get Code page.

• Replace all variable values in CAPS with actual values. • We recommend placing the <script> tag near the bottom of your

product page as best practice. You will need to keep the div tags in the location where you want the content appear.

Query Parameters

The script can accept a list of parameters to identify the product, customize the output, and define preferences. See below for the standard list:

Page 7: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

Requesting by Manufacturer Name and Manufacturer Part Number

Best practice for requesting product logo is by passing the product's Manufacturer Name and Manufacturer Part Number. The following code will request the logos using this method:

1. Replace "Acer" with the manufacturer name of the product. The Logo Service supports Manufacturer mapping which allows Manufacturer name variations. As an example, the following values are valid:

a HP b Hewlett-Packard c Hewlett Packard

2. Replace "NX.MHFAA.003" with the manufacturer part number of the product.

Page 8: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

Specifying Language and Market

The "lang" parameter accepts the 2 letter ISO 639.1 language code or two letter language code. A few examples are listed below:

For a complete list of language codes, please visit the Library of Congress Representation of Codes.

The "market" parameter is a two-letter ISO 3166-1 country code that controls the country localization and content designed for specific countries. For example, in some cases the product content or text differs for English US than English GB (Great Britain).

Specifying Logo Layout

The Logo Service supports customization of the logo layout and orientation and this functionality is available within the portal while configuring the product page settings.

Page 9: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

Layout = COLS X ROWS

The COLS signifies the number of columns and ROWS signifies the number of rows to create when displaying the logos.

Specifying Logo Style

The Logo Service allows you to specify the logo style to be displayed on your product page. This again can be specified within the portal while configuring the product page settings.

Page 10: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

Display Dynamic Content in Hover

The Lenovo Recommends Logo program supports dynamic content within the hover experience. The hover supports passing of this data in real-time.

This will allow you to:

• Display Customer Price and Product Availability • Link the 'Add to Cart' button to your website • Link the Product Description to your Product Page

There are two methods of populating information:

1. Passing name/value pairs in the JavaScript request parameters 2. Include it in the catalog you provide CNET

JavaScript Request Parameters

In order to pass variables to the hover, this will require: 1. Ability to pass the values in the JavaScript URL 2. Hover content HTML to contain template variables 3. HTML template variable names must match the variable names in

the JavaScript URL

Page 11: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

Adding Products to the Cart

The Logo Service can support adding products from within the hover to your shopping cart using two methods:

1. Calling an Add to Cart URL 1. This redirects the user from the hover to your Add to Cart

URL on your site. As an example: http://test.com/addtocart.php?prod_id=C123456&qty=1

2. Calling an existing JavaScript function within your site's JavaScript library

1. This is ideal if you do not have a page dedicated to the Add to Cart function and if your site uses AJAX or only supports adding to the cart by calling an existing JavaScript function. Example:

2. This requires custom configuration of the hover to call your pre-existing JavaScript function name and required parameters and will require that the hover be served as a local <div> container instead of an iFrame to avoid Cross Site Scripting limitations. In order to use the local <div> templates, please contact our Customer Service team or request this functionality via your assigned CCS Technical contact.

Configuring Cross-Sell Product Price

The Lenovo Recommends Logo hover can show your customers a specific price for each of the two game cards. You can choose to use a single price for all customers or send a dynamic pricing variable within your hook request in order to support unique pricing by user.

• A price can be loaded into your CNET catalog to display a single price point across all users.

• You can send a real-time price variable when the script is executed in order to offer per-user pricing.

Page 12: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

Automated Catalog Import

The Logo Service allows you to import your product catalog data which can be queried and passed to the hover dynamically. There are advantages of using this method over the JavaScript Request Parameter implementation.

Advantages:

1. Reduces the amount of JavaScript code needed within the Product Page for:

o Faster page loading o Avoiding Internet Explorer URL length limitation

2. Eliminates the need to maintain mappings and look-ups for hover data on the website before rendering the JavaScript.

3. Product Catalog Data can be used across multiple logo programs for scalability.

Disadvantages:

1. Some passing of real-time data via JavaScript may still be required (such as User Session ID)

2. Latency of data updates up to 24 hours.

Process Overview

1. Export your catalog using the CCS Format described later in this guide

2. Post the file on your own FTP server or the CCS FTP Server on a daily basis

3. CCS will process the catalog and pricing files daily to auto populate the hovers.

Catalog Import

Please reach out to our customer support team in order to get your catalog scheduled for import into CNET's service. Be prepared to provide the following information:

• FTP URL • FTP Username and Password • Filename

Catalog Upload Requirements

Page 13: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

CNET’s preferred method of catalog delivery is to provide you with a custom FTP login/password to upload catalog files in the following format:

• Inventory file is a TAB-delimited text file with the 14 fields listed below • Optional fields may be left empty, but the fields sequence in the file must be kept

as outlined below • All fields (tabs) must remain in the file. For example, if only using the first 4

mandatory fields in the file, there should be another 7 fields (tabs) after the Product Description to hold the places of the optional fields.

• The catalog should not contains headers • The catalog will need to be set up to be delivered daily to the FTP location in

order for CNET to display accurate products in the e-commerce logo hovers

• Once we have received the catalog for the first time, we will be able to configure the e-commerce logo hover

The product catalog file is used to:

• Determine if you carry the required SKUs to display in the hover for Logo programs.

• Pass your internal product id to your system when required for Add to Cart

• Redirect your customers to the correct Product URLs when they want to view more information on the products.

Field Priority Format* Example 1 Manufacturer

Name Mandatory Text(50) Acer

2 Manufacturer Part Number

Mandatory Text(50) NX.M9UAA.004

3 Internal Customer’s Part Number

Mandatory Text(50) MYSITE1234-NX.M9UAA.004

4 Product Description

Mandatory Text(255) Acer Aspire R7-571-6411 - Flip-hinge…

5 CNET Product ID

Optional Text(50) S12173538

6 Product Page URL

Optional Text(2000) http://www.cnetcontentsolutions.com/productid=NX.M9UAA.004

7 Price Optional Text(50) $ 1463.00 8 Availability Optional Text(50) in stock 9 Category Optional Text(50) 10 MSRP Optional Text(50) 11 Add to Cart

URL Optional Text(2000) http://www.cnetcontentsolutions.com/cart=NX.M9UA

A.004 12 Promo Text Optional Text(255) 13 Featured

Product Optional Text(250)

14 UPC/EAN Optional Text(250) 0887899155093

Page 14: Lenovo Recommends Logo Integration Guide - Amazon S3s3.amazonaws.com/.../4/docs/lenovo-recommends-logo-integration-g… · Lenovo Recommends Logo Integration Guide © 2016 CBS Interactive

Lenovo Recommends Logo Integration Guide

© 2016 CBS Interactive Inc. All rights reserved

• Support Add to Cart functionality within the hover.

Contacting Support

If you experience any issues or have additional questions about the Logo Service, please contact our Customer Service group:

ContentCast Products Email: [email protected]

Americas/Asia Pacific Phone: +1.877.276.5560 - select option 2, then press 2 Email: [email protected]

Europe Phone: +41.21.943.03.77 Email: [email protected]

Online: https://portal.cnetcontent.com/en-us/Client/Support