quick start implementation guide

Upload: melissa-lau

Post on 10-Jan-2016

240 views

Category:

Documents


0 download

DESCRIPTION

Quick Start Implementation Guide

TRANSCRIPT

  • Bazaarvoicequick startimplementationguide

  • Disclaimer

    Copyright 2012 Bazaarvoice. All rights reserved.

    The information in this document:

    Is confidential and intended for Bazaarvoice clients. No part of this document may be sharedwith anyone outsideyour company or your company-partners without prior approval from Bazaarvoice.

    Isprovidedas iswithoutwarrantyof anykindeitherexpressedor implied, including,butnot limited to the impliedwarranties of merchantability, fitness for a particular purpose, or non-infringement.

    Is periodically updated to be in sync with the improvements and/or changes in our product offers.

    May be changedwithout notice. Some examples depicted herein are provided for illustration only and are notguarantees of a specific result. You bear the risk of using this document.

    Bazaarvoice is not liable for any technical or typographical errors that might be inadvertently present in this document.

    Bazaarvoicemight have patents and/or pending patent applications covering subject matter in this document. Thefurnishingof thisdocumentdoesnotgiveyouany license to thesepatents,or legal rights toanyother intellectualpropertyin any Bazaarvoice service or product.

    All Bazaarvoice brand and product names are trademarks or registered trademarks of Bazaarvoice in the United Statesandmaybeprotectedas trademarksor registered trademarks in other countries. All other product, service, or companynamesmentioned here are claimed as trademarks and trade names by their respective companies.

    Contact us:

    3900North Capital of Texas Highway

    Suite 300, Austin, Texas 78746

    Toll-Free: (866) 522-9227 | Phone: (512) 551-6000 | Fax: (512) 551-6001

    www.bazaarvoice.com

  • ContentsIntroduction..............................................................................................................................................6

    Ratings and reviews......................................................................................................................................6

    Question and answer....................................................................................................................................8

    Campaigns..................................................................................................................................................9

    Profiles.......................................................................................................................................................11

    Prerequisites............................................................................................................................................13

    Creating a subdomain for user-facing URLs.....................................................................................................13

    Granting access to a development website....................................................................................................13

    Providing a data feed..................................................................................................................................14

    Integrating display features.......................................................................................................................15

    Loading ratings and reviews content.............................................................................................................15

    Loading question and answer content...........................................................................................................16

    Integrating question and answer with product pages...........................................................................17

    Integrating question and answer with category pages..........................................................................18

    Loading campaigns content.........................................................................................................................18

    Integrating campaigns with product pages.........................................................................................19

    Integrating campaigns with category pages........................................................................................19

    Loading profiles content..............................................................................................................................20

    Adding the ROI beacon to transaction and conversion pages..........................................................................22

    ROI beacon parameters...............................................................................................................................24

    Rendering the submission container page...................................................................................................27

    Implementing the submission container page..............................................................................................28

    Implementing the login-redirection logic.......................................................................................................28

    Rendering the submission container page.....................................................................................................30

    Generating the user authentication string......................................................................................................30

    Implementing Bazaarvoice SEO.................................................................................................................32

    Create an automated process for daily tasks...................................................................................................32

    Download and unpack SEO files........................................................................................................32

    Inject SEO content on product pages.................................................................................................33

    Ratings and reviews..............................................................................................................34

    Question and answer............................................................................................................34

    Campaigns..........................................................................................................................35

    Perform a string replacement within the SEO files................................................................................36

    Handle the SEO URL parameter.........................................................................................................36

    Special case: When UGC is behind a tab........................................................................................................37

    Verify your SEO implementation...................................................................................................................39

    Implementation checklists.........................................................................................................................40

    General checklist........................................................................................................................................40

    Using advanced integration options............................................................................................................41

    Loading the API asynchronously...................................................................................................................41

    Implementing inline ratings.........................................................................................................................42

    Method comparison........................................................................................................................43

    Using the Bazaarvoice platform API for inline ratings (recommended approach)......................................43

    Using ratings XML feed for inline ratings.............................................................................................44

    Implementing login redirection with JavaScript..............................................................................................45

    Integrating with AJAX-type login methods.....................................................................................................45

    3Bazaarvoice Confidential

    TOC

  • Displaying content that resides behind a tab..................................................................................................46

    Targeted link to Bazaarvoice content............................................................................................................47

    Example formats: Targeted URLs.......................................................................................................47

    Overriding redirect URLs..................................................................................................................48

    Sharing content through Facebook...............................................................................................................49

    Updating Facebook tags..................................................................................................................49

    Creating an application for Facebook.................................................................................................50

    Creating a new Facebook application.....................................................................................50

    Using an existing Facebook application...................................................................................51

    Same-page submission................................................................................................................................51

    Implementing same-page submission with AJAX-type login methods.....................................................52

    Implementing same-page submission with a separate login page..........................................................53

    Implementing same-page submission................................................................................................55

    Implementing ratings and reviews on your mobile site....................................................................................56

    Using the event callback..............................................................................................................................56

    Example: Event callback...................................................................................................................57

    Event variables for ratings and reviews...............................................................................................57

    Event variables for question and answer.............................................................................................58

    Event variables for campaigns...........................................................................................................58

    Event variables for all Bazaarvoice products........................................................................................59

    Additional event variables................................................................................................................59

    Appendix................................................................................................................................................64

    JavaScript API details..................................................................................................................................64

    Configuration calls..........................................................................................................................64

    UI calls...........................................................................................................................................65

    Ratings and reviews methods................................................................................................65

    show_summary........................................................................................................65

    show_reviews..........................................................................................................66

    submit_review..........................................................................................................66

    submit_comment......................................................................................................66

    Question and answer methods..............................................................................................66

    show_summary........................................................................................................67

    show_questions.......................................................................................................67

    show_search............................................................................................................67

    submit_question.......................................................................................................68

    submit_answer.........................................................................................................68

    Campaigns methods............................................................................................................68

    show_summary........................................................................................................68

    show_stories............................................................................................................69

    show_grid...............................................................................................................69

    show_home.............................................................................................................69

    submit_story............................................................................................................69

    submit_comment......................................................................................................70

    Profiles methods..................................................................................................................70

    show_profile............................................................................................................70

    submit_profile..........................................................................................................71

    submission_container...........................................................................................................71

    Additional configuration options.......................................................................................................71

    Common display options.......................................................................................................71

    Submission options..............................................................................................................73

    Bazaarvoice Confidential4

    TOC

  • User authentication string options..........................................................................................74

    Example: Integration code..........................................................................................................................75

    Submission links.........................................................................................................................................76

    Submission links for ratings and reviews.............................................................................................76

    Submission links for question and answer...........................................................................................76

    Submission links for campaigns.........................................................................................................78

    Submission links for profiles..............................................................................................................79

    Options for submission link parameters..............................................................................................79

    5Bazaarvoice Confidential

    TOC

  • IntroductionThis document describes the tasks that are associatedwith implementing one or more Bazaarvoice products orsolutions.The intendedaudienceconsistsofdeveloperswhoneedto implementsuchaproductor solutionquicklyand easily for Example Client.

    The steps in this document utilize the Bazaarvoice QuickStart method to complete a successful implementation.With theQuickStartmethod, Bazaarvoice handles themajority of the developmentworkwhile our tools integrateseamlesslywith your existing teams andworkflows. A typical QuickStart implementation consists of the followingtasks:

    1. Integrating the display features, which consists of the following subtasks:

    a. Adding the Bazaarvoice JavaScript API.

    b. Loading the appropriate Bazaarvoice content.

    2. Rendering the submission container page.

    3. Implementing the submission container page, which consists of the following subtasks:

    a. Implementing the appropriate login-redirection logic.

    b. Rendering the submission container page.

    c. Generating the user authentication string (UAS).

    You can rely upon the Bazaarvoice implementation team to provide detailed guidance and support for each stepin the implementation process. If you have questions about the Bazaarvoice side of your implementation, contactyour Bazaarvoice Implementation Project Manager (IPM) or Implementation Engineer (IE).

    Ratings and reviews

    Bazaarvoice ratings and reviews lets your customers share their honest feedbackdirectlywithin thepurchasepathof yourwebsite.Such feedback fuels customerdecision-makingtodrivesales,decreaseproduct returns,andbuildtrust in your brand.

    Bazaarvoice Confidential6

    Bazaarvoice quick start implementation guide

  • This document provides the information that you need to install and configure ratings and reviews.When you arefinished, the following components are added to your storefront:

    Ratings summary Displays the overall ratingof a product aswell as information like the number of customerswhowould recommendtheproduct toa friend.The ratingssummaryalsoprovides links for readingadditionalreviews,writinga review,andsharing the relevantproduct throughsocial networkingsites like FacebookandTwitter.

    The following image shows an example ratings summary.

    Primary display area Displays review-related content, as shown by the following image.

    7Bazaarvoice Confidential

    Introduction

  • Question and answer

    Bazaarvoice question and answer helps your customersmake informedpurchasingdecisions by asking questionsandprovidinganswersabout relevantproducts. Insights that yougain fromquestionandanswerhelpyou improveyour product copy based on the content that the community submits.

    This document provides the information that you need to install and configure question and answer.When youare finished, the following components are added to your storefront:

    Q&AsummaryDisplays informationabout thequestionsandanswers that are available for theproduct, suchas thenumberof submittedquestionsandanswers.TheQ&ASummaryalsoprovides links for readingapprovedcontent and asking a new question.

    The following image shows an example Q&A Summary.

    If no questions or answers are currently available, a Be the first to ask a question link is displayed.

    Bazaarvoice Confidential8

    Bazaarvoice quick start implementation guide

  • Primary display area Displays question- and answer-related content, as shown by the following image.

    Campaigns

    Bazaarvoicecampaignsmakes it easy foryou tocollectanddisplay real contentsuchas stories, ideas, testimonials,or recipesfrom real customers, highlighting the degree to which your brand fits into their lives and helping youstand out among competing brands.With campaigns, authentic customer content lives on your site and can beshared across social networks like Facebook and Twitter.

    9Bazaarvoice Confidential

    Introduction

  • This document provides the information that you need to install and configure campaigns.When you are finished,the following components are added to your storefront:

    Campaign summary Displays information about customer content, such as the number of approved itemsthat have been submitted for a product or service. The summary also provides links for reading submissionsand sharing new content.

    The following image shows an example campaign summary.

    Primary display area Displays question- and answer-related content, as shown by the following image.

    Bazaarvoice Confidential10

    Bazaarvoice quick start implementation guide

  • Profiles

    Bazaarvoice is committed tobuildingonlinecommunities thatdrivemeasurablegoals.WithBazaarvoice'sprofilesfeature, the opinions, knowledge, and experience of your most active customers come together to build trust inyour brand and to influence purchasing decisions. Profiles makes it easy to identify your most active contributorsby collecting uniform demographic information for each user and by displaying an aggregate of activity for eachuser across all of your Bazaarvoice products.

    In addition to featuring standard content like user nicknames, badges, and statistics, active profiles extends thecustomer relationship by providing brand ambassadors with a platform for creating andmaintaining an identityon your site. Users are encouraged to include in their profiles personally descriptive information that they arewilling to share with the online community, as shown by the following examples:

    Profile headline

    Photos

    Product recommendations

    The ability to let customers include such information in their profiles is a feature that strengthens the community,builds brand loyalty among your top customers, and increases the purchase likelihood for prospective buyers.

    11Bazaarvoice Confidential

    Introduction

  • This document provides the information that you need to install and configure the profiles feature.When you arefinished, your storefront will feature profiles like the one in the following image.

    Bazaarvoice Confidential12

    Bazaarvoice quick start implementation guide

  • PrerequisitesEnsure that the following prerequisites are satisfied before starting a Bazaarvoice integration:

    Create a subdomain that points to Bazaarvoice servers for all user-facing URLs.

    Grant Bazaarvoice access to a development website.

    Provide Bazaarvoice with a production-ready data feed of your products.

    The following sections describe these prerequisites in more detail.

    Creating a subdomain for user-facing URLs

    A subdomain that is used for all user-facing URLs including submission URLs, targeted links, and links to landingpages must point to Bazaarvoice servers. All implementations require the creation of the following canonicalname (CNAME) entry for general user-generated content (UGC):

    ugc.example.com -> example.ugc.bazaarvoice.com

    On a Linux server, this entry resembles the following code:

    ugc IN CNAME example.ugc.bazaarvoice.com ; BV cache network

    Additionally, youmust create the following, product-specific CNAME entries where appropriate:

    For ratings and reviews, create the following CNAME entry:

    reviews.example.com -> example.ugc.bazaarvoice.com

    For question and answer, create the following CNAME entry:

    answers.example.com -> example.ugc.bazaarvoice.com

    For campaigns, create the following CNAME entry:

    stories.example.com -> example.ugc.bazaarvoice.com

    Granting access to a development website

    Your technical teammust grant Bazaarvoice access to a development website without the need for a VPN clientor other type of remote-desktop access, as per the details of your contract. The Bazaarvoice implementation teamrequires browser access to your staging environment to complete the following tasks:

    Style the product

    Resolve cascading style sheets (CSS) conflicts

    13Bazaarvoice Confidential

    Prerequisites

  • Assist with the resolution of code-integration issues

    Perform functional testing

    Test the graphical user interface (GUI)

    No changes or updates are made to your code.

    If your staging environment resides behind a firewall, openport 80 or a non-standardport of your choosing to thefollowing IP addresses and ranges:

    LocationIP Address

    Austin, USA24.155.144.5

    Austin, USA24.155.144.36

    Austin, USA216.166.20.0/26

    London, UK80.169.157.170

    Sydney, Australia123.51.122.10

    Bazaarvoice requires this level of access to your staging environment even after the implementation is finished.New features, bug fixes, and updatesmust be verified against the staging environment before they can be rolledinto our production environment.

    Providing a data feed

    Your technical teammust provide Bazaarvoice with an XML-based, production-ready data feed of the productsthat youwant to feature Bazaarvoice-hostedUGC. This feed is used to populate the Bazaarvoice database so thatthe UGC and dimensions can bemapped to the appropriate products and categories, respectively. For moreinformation, refer to the Bazaarvoice Product Feed document.

    Bazaarvoice Confidential14

    Bazaarvoice quick start implementation guide

  • Integrating display featuresThe following topics contain instructions for how to inject BazaarvoiceUGCon your site basedon the features youplan to implement.

    The integrationcode in this sectioncontains thepath/bvstaging in its exampleURLs. This token routes requeststo theBazaarvoicestagingenvironment. It is recommendedthatyoudesignyour implementationof theBazaarvoiceintegrationcode inamanner thatallowsyou to toggleeasilybetween includingorexcluding thepath/bvstaginginor fromtheappropriateURLs.Ensure that/bvstaging is removedfromtheURLs inyourproductionenvironment.

    Loading ratings and reviews content

    1. Place the following codewithin the element.

    $BV.configure("global", { submissionContainerUrl: "http://www.example.com/submissionPage.html" });

    Where:

    submissionContainerUrl is the URL for the submission container page.

    /bvstaging is removed from the URL before launching in your production environment.

    $BV.configure calls are executed prior to any $BV.ui calls that they affect.

    bvapi.js is not loaded asynchronously. If you need to load the API asynchronously, see the "LoadingtheAPIAsynchronously"sectionforadditional information.Asynchronouscontent loadingisnotcommon.

    Note

    For security reasons, Bazaarvoice configures a whitelist of allowable domains for your integration. If thedomainof the submissionContainerUrl is not included in the list, awarningpagemight appearwhencertain

    links are clicked. This warning page is normal for development and staging purposes and is common if youare developing against localhost, an IP, or another hostname of which Bazaarvoice is unaware.

    Afteryouconfirmthat theURLpresentedon thewarningpage is theURL thatyouwant touse fordevelopment,it is safe to pass through it. In production, Bazaarvoicemust bemade aware of all of the domains that youplan to deploy. Additionally, the configured URLs must match the domains that you plan to deploy.

    2. Place the following element on every product page where you want to display the ratings summary:

    15Bazaarvoice Confidential

    Integrating display features

  • 3. Place the following element on every product page where you want to display the actual reviews:

    4. Make the following$BV.ui()call to loadcontent into theelements that you insertedduring thepreviousstep:

    $BV.ui("rr", "show_reviews", { productId: "XXXXX" });

    where XXXXX represents the IDof theproduct that is displayedon thepage. This valuemustmatch the ID that

    is associatedwith theproduct in thedata feed.Werecommendthatyouplace this code in theelement.

    Related Links

    Implementing the submission container page on page 28

    Loading the API asynchronously on page 41

    JavaScript API details on page 64

    Loading question and answer content

    1. Place the following codewithin the element.

    $BV.configure("global", { submissionContainerUrl: "http://www.example.com/submissionPage.html" });

    Where:

    submissionContainerUrl is the URL for the submission container page.

    /bvstaging is removed from the URL before launching in your production environment.

    $BV.configure calls are executed prior to any $BV.ui calls that they affect.

    bvapi.js is not loaded asynchronously. If you need to load the API asynchronously, see the "LoadingtheAPIAsynchronously"sectionforadditional information.Asynchronouscontent loadingisnotcommon.

    Bazaarvoice Confidential16

    Bazaarvoice quick start implementation guide

  • Note

    For security reasons, Bazaarvoice configures a whitelist of allowable domains for your integration. If thedomainof the submissionContainerUrl is not included in the list, awarningpagemight appearwhencertain

    links are clicked. This warning page is normal for development and staging purposes and is common if youare developing against localhost, an IP, or another hostname of which Bazaarvoice is unaware.

    Afteryouconfirmthat theURLpresentedon thewarningpage is theURL thatyouwant touse fordevelopment,it is safe to pass through it. In production, Bazaarvoicemust bemade aware of all of the domains that youplan to deploy. Additionally, the configured URLs must match the domains that you plan to deploy.

    2. Place the followingelementoneveryproductandcategorypage that youwant todisplay thequestions

    and answers summary:

    3. Place the following element on every product and category page that you want to display the actual

    questions and answers:

    After you add the elements to the appropriateproduct and categorypages, proceed to the following topicsto integrate question and answer:

    Integrating question and answer with product pages

    Integrating question and answer with category pages

    Related Links

    Implementing the submission container page on page 28

    Loading the API asynchronously on page 41

    Integrating question and answer with product pages

    1. Verify that the elements described in "Loading question and answer content" have been inserted.

    2. Make the following $BV.ui() call to load content into the elements that you inserted:

    $BV.ui("qa", "show_questions", { productId: "XXXXX", subjectType: "product" });

    where XXXXX represents the IDof theproduct that is displayedon thepage. This valuemustmatch the ID that

    is associatedwith the product in the data feed. It is recommended that this code is placed in the .

    17Bazaarvoice Confidential

    Integrating display features

  • Integrating question and answer with category pages

    1. Verify that the elements described in "Loading question and answer content" have been inserted.

    2. Make the following $BV.ui() call to load question- and answer-related content into the appropriate elements:

    $BV.ui("qa", "show_questions", { categoryId: "XXXXX", subjectType: "category" });

    where XXXXX represents the IDof the current pages category. This valuemustmatch the ID that is associated

    with the category in the data feed. It is recommended that this code is placed in the .

    Loading campaigns content

    1. Place the following codewithin the element.

    $BV.configure("global", { submissionContainerUrl: "http://www.example.com/submissionPage.html" });

    Where:

    submissionContainerUrl is the URL for the submission container page.

    /bvstaging is removed from the URL before launching in your production environment.

    $BV.configure calls are executed prior to any $BV.ui calls that they affect.

    bvapi.js is not loaded asynchronously. If you need to load the API asynchronously, see the "LoadingtheAPIAsynchronously"sectionforadditional information.Asynchronouscontent loadingisnotcommon.

    Note

    For security reasons, Bazaarvoice configures a whitelist of allowable domains for your integration. If thedomainof the submissionContainerUrl is not included in the list, awarningpagemight appearwhencertain

    links are clicked. This warning page is normal for development and staging purposes and is common if youare developing against localhost, an IP, or another hostname of which Bazaarvoice is unaware.

    Afteryouconfirmthat theURLpresentedon thewarningpage is theURL thatyouwant touse fordevelopment,it is safe to pass through it. In production, Bazaarvoicemust bemade aware of all of the domains that youplan to deploy. Additionally, the configured URLs must match the domains that you plan to deploy.

    Bazaarvoice Confidential18

    Bazaarvoice quick start implementation guide

  • 2. Place the followingelementoneveryproductandcategorypage that youwant todisplay thecampaign

    summary:

    3. Place the following elementoneveryproduct andcategorypage that youwant todisplay the content:

    After you add the elements to the appropriateproduct and categorypages, proceed to the following topicsto integrate campaigns:

    Integrating campaigns with product pages

    Integrating campaigns with category pages

    Related Links

    Implementing the submission container page on page 28

    Loading the API asynchronously on page 41

    Integrating campaigns with product pages

    1. Verify that the elements described in "Loading campaigns content" have been inserted.

    2. Make the following $BV.ui() call to load content into the elements that you inserted:

    $BV.ui("sy", "show_stories", { productId: "XXXXX", subjectType: "product" });

    where XXXXX represents the IDof theproduct that is displayedon thepage. This valuemustmatch the ID that

    is associatedwith the product in the data feed. It is recommended that this code is placed in the .

    Related Links

    JavaScript API details on page 64

    Integrating campaigns with category pages

    1. Verify that the elements described in "Loading campaigns content" have been inserted.

    19Bazaarvoice Confidential

    Integrating display features

  • 2. Make the following $BV.ui() call to load campaign-related content into the appropriate elements:

    $BV.ui("sy", "show_stories", { categoryId: "XXXXX", subjectType: "category" });

    where XXXXX represents the IDof the current pages category. This valuemustmatch the ID that is associated

    with the category in the data feed. It is recommended that this code is placed in the .

    Related Links

    JavaScript API details on page 64

    Loading profiles content

    Bazaarvoice links to profile pages from the content that they generate. Because you are responsible for hostingthe profile container, youmust inform your Bazaarvoice IE of the appropriate URL pattern for your profile pages,using a wildcard for the user ID.

    The following URLs provide examples of typical URL patterns:

    http://www.example.com/profile.html?user=USERID

    http://www.example.com/profile/USERID

    1. Place the following codewithin the element.

    $BV.configure("global", { submissionContainerUrl: "http://www.example.com/submissionPage.html" });

    Where:

    submissionContainerUrl is the URL for the submission container page.

    /bvstaging is removed from the URL before launching in your production environment.

    $BV.configure calls are executed prior to any $BV.ui calls that they affect.

    bvapi.js is not loaded asynchronously. If you need to load the API asynchronously, see the "LoadingtheAPIAsynchronously"sectionforadditional information.Asynchronouscontent loadingisnotcommon.

    Bazaarvoice Confidential20

    Bazaarvoice quick start implementation guide

  • Note

    For security reasons, Bazaarvoice configures a whitelist of allowable domains for your integration. If thedomainof the submissionContainerUrl is not included in the list, awarningpagemight appearwhencertain

    links are clicked. This warning page is normal for development and staging purposes and is common if youare developing against localhost, an IP, or another hostname of which Bazaarvoice is unaware.

    Afteryouconfirmthat theURLpresentedon thewarningpage is theURL thatyouwant touse fordevelopment,it is safe to pass through it. In production, Bazaarvoicemust bemade aware of all of the domains that youplan to deploy. Additionally, the configured URLs must match the domains that you plan to deploy.

    2. Place the following elements within a single block on your profile pages:

    3. Make the following $BV.ui() call to load profile-related content into the elements that you insertedduring the previous step:

    $BV.ui("cp", "show_profile", { profileId: "XXXXX" });

    where XXXXX represents the user ID that is associatedwith the profile page. Obtain this value from the URL

    that you defined earlier in this topic. Do not encode the user ID like it is encoded on the submission page. Itis recommended that this code is placed in the .

    For information about additional API calls and customization options, see JavaScript API details on page 64.

    Related Links

    Implementing the submission container page on page 28

    Loading the API asynchronously on page 41

    21Bazaarvoice Confidential

    Integrating display features

  • Adding the ROI beacon totransaction and conversion pages

    Add the following JavaScript code to your transaction and conversion pages to enable the ROI beacon.

    An example of a transaction pagemight be a purchase confirmation page. A conversion page is any page on yoursite where youmeasure conversion activity. Some examples of conversion pages include a store locator resultspage, a warranty registration completion page, or a site registration completion page.

    1. Place the following codewithin the element.

    $BV.SI.trackTransactionPageView({ /* add transaction or conversion JSON here */});

    Where:

    {{client_code}} is your client code.

    /bvstaging is removed from the URL before launching in your production environment.

    {{display_code}} is your display code.

    Bazaarvoice Confidential22

    Bazaarvoice quick start implementation guide

  • 2. For transaction pages, supply the following data using the sample format.

    $BV.SI.trackTransactionPageView({ "orderId" : "55555", // REQUIRED "tax" : "1.44", "shipping" : "10.00", "total" : "40.84", // REQUIRED "city" : "Austin", "state" : "TX", "country" : "USA", "currency" : "USD", // ISO 4217 alphabetic currency code "locale" : "en_US", // Used to send locale-specific post-interaction email (PIE) "items" : [ { "sku" : "2245", // REQUIRED - Must match SKU on product display page! "name" : "product name", "category" : "category name", "price" : "13.42", // Used to sort products in PIE "imageURL" : "http://product/image/URL/1", "quantity" : "1" // REQUIRED }, { "sku" : "2245", // REQUIRED - Must match SKU on product display page! "name" : "product name", "category" : "category name", "price" : "13.42", "imageURL" : "http://product/image/URL/2", "quantity" : "1" // REQUIRED } ], "userId" : "7448dc2", // REQUIRED "email" : "[email protected]", // REQUIRED "nickname" : "john1981", // REQUIRED "gender" : "M" });

    Important!The SKU (product ID) that you include in your transaction data must match the SKU that you provide toBazaarvoice on your product display page. If the SKUs don't match, our analytics engine cannot correlateconsumer behavior to conversion.

    3. For conversion pages, supply the following data as JSON using the sample format.

    $BV.SI.trackConversion({ "type": "StoreLocator", "label": "ProductPage", "value": 78701});

    For our non-transactional /non-commerce clients,we still recommend tracking against yourmost importantgoal. Non-transactional conversion goal examples include:

    Download complete

    Store locator results

    Warranty registration

    Site registration

    23Bazaarvoice Confidential

    Adding the ROI beacon to transaction and conversion pages

  • ROI beacon parametersThese tables list parameters that you can include in your analytics JSON for transactions, transaction items,conversions, and personally identifiable information.

    Transaction parameters

    ExampleDescriptionRequiredParameter

    "55555"The unique ID of the order.yesorderId

    "1.44"The amount of tax applied to the order.notax

    "10.00"The cost of shipping the order.noshipping

    "40.84"The total amount of the order.yestotal

    "Austin"The customer's city.nocity

    "TX"The customer's state.nostate

    "USA"The customer's country.nocountry

    "USD"The ISO 4217 alphabetic currency code of theorder.

    nocurrency

    See the "Itemsparameters" table.

    The parameters associatedwith each item inthe order.

    yesitems

    Personally Identifiable Information (PII) parameters

    The following transactionparametersareconsidered tobePIIdata.PII enablesyou to senda followupemail askingthecustomer to return toyour siteandcontributecontent.Thismessage,calledapost-interactionemail (PIE),helpsto increase content volume at your site.

    ExampleDescriptionRequiredParameter

    "7448dc2"The unique ID of the user.YesuserId

    "de_DE" or "de"Transaction locale. Use a two or four letter code.Format is[language_code]_[COUNTRY_CODE].Usedto send local-specific PIE.

    nolocale

    "[email protected]"The user's email address.Yesemail

    Bazaarvoice Confidential24

    Bazaarvoice quick start implementation guide

  • ExampleDescriptionRequiredParameter

    "john1981"The nickname of the user. The nickname is usedto address the user in the PIE.

    Yesnickname

    "M" or "F"The gender of the user.nogender

    Important!PII information:

    is NEVER associatedwith the Bazaarvoice persistent cookie.

    is ALWAYS transmitted over HTTPS.

    is encrypted before writing to disk.

    is NEVER processed by Bazaarvoice analytics.

    Item parameters

    ExampleDescriptionRequiredParameter

    "2245"TheBazaarvoiceExternalIDof the item.Sometimes this is aSKUcodeor ProductID, but itMUSTmatchwhat you send to Bazaarvoice inyour product data feed for the . If theExternalIDyou set for the skuparameter isNOT in yourproductdatafeed, the product will NOT be included in the generated PIE thatgoes to the consumer.

    yessku

    "Black t-shirt"Product name.

    Important!Shouldmatch the value you provide to Bazaarvoice in the productdata feed.

    noname

    "Shirts"Product category.

    Important!Shouldmatch the value you provide to Bazaarvoice in the productdata feed.

    nocategory

    "13.42"Product price.

    Important!Must have only two fraction numbers after the decimal.

    noprice

    "4"Quantity purchased.yesquantity

    25Bazaarvoice Confidential

    Adding the ROI beacon to transaction and conversion pages

  • ExampleDescriptionRequiredParameter

    Link to the product image, which is used to display the product inthe PIE.

    Important!Shouldmatch the value you provide to Bazaarvoice in the productdata feed. If you omit this value but provide a valid ExternalID, wepull the imageUrl from our database.

    yesimageUrl

    Conversion parameters

    ExampleDescriptionRequiredParameter

    "StoreLocator" or "Download"The type of conversion. You define thevalue of this parameter.

    yestype

    "ProductPage" or "ProductSpecifications - 1234.pdf"

    A descriptive label for the conversion.nolabel

    "78701" or "1"A value to attribute to the conversion.yesvalue

    Bazaarvoice Confidential26

    Bazaarvoice quick start implementation guide

  • Rendering the submission containerpage

    A submission container page is used for all Bazaarvoice content submissions.

    1. After the login-redirection logic is implemented,place the followingexamplecodewithin theelement

    of the submission container page that you created:

    $BV.ui("submission_container", { userToken: "XXXXX" });

    where XXXXX represents the Bazaarvoice-encodedUAS. If you do not have a value to place in this location,

    leave it blank.

    2. Place the following codewhere you want the submission form to appear:

    The Bazaarvoice submission form is loadedwithin the BVSubmissionContainer element.

    Related Links

    Generating the user authentication string on page 30

    27Bazaarvoice Confidential

    Rendering the submission container page

  • Implementing the submissioncontainer page

    A submission containerpage is used for all Bazaarvoice content submissions. Integrating the submission containerpage consists of the following tasks.

    Whenever users trigger the submission flow by clicking a submission link, Bazaarvoice redirects them to thesubmission container page while passing URL parameters that are required for submission.

    1. Implementing the login-redirection logic on page 28

    2. Rendering the submission container page on page 27

    3. Generating the user authentication string on page 30

    Implementing the login-redirection logic

    Before you build the submission container page, ensure that the server-side authentication code follows thelogin-redirection logic that the following pseudocode represents:

    if ( bvauthenticateuser == true && user is not logged in ) { redirect to the login page after the user logs in, redirect back to this submission page with all query string parameters intact} else { continue rendering page}

    Bazaarvoice Confidential28

    Bazaarvoice quick start implementation guide

  • This logic is based on the value of bvauthenticateuser, which is one of themany query string parameters that arepassed to the submission container page, and is illustrated by the following image.

    The sections that are labeledClient controlled actions identify the behaviors that you are responsible forimplementing.

    29Bazaarvoice Confidential

    Implementing the submission container page

  • Rendering the submission container page

    A submission container page is used for all Bazaarvoice content submissions.

    1. After the login-redirection logic is implemented,place the followingexamplecodewithin theelement

    of the submission container page that you created:

    $BV.ui("submission_container", { userToken: "XXXXX" });

    where XXXXX represents the Bazaarvoice-encodedUAS. If you do not have a value to place in this location,

    leave it blank.

    2. Place the following codewhere you want the submission form to appear:

    The Bazaarvoice submission form is loadedwithin the BVSubmissionContainer element.

    Related Links

    Generating the user authentication string on page 30

    Generating the user authentication string

    If you are authenticating users, generate a UAS so that Bazaarvoice can determine whether a string comes from atrusted source.

    Consisting of key-value pairs, a UAS is signed and encoded through the use of a shared key. This string allowsBazaarvoice to verify that it comes from a safe source, thereby preventing third parties from fabricating orimpersonating users.

    The following table identifies the ampersand-delimited keys and values that can be used in the string.

    RequiredDescriptionKey

    YesToday's date in the format YYYYMMDD or YYYY-MM-DD.date

    NoNumber of days before the UAS expires. The default number of days is 1. Increasing this valueis useful in pre-authenticated URLs, such as the URLs that are used in email campaigns.

    maxage

    YesUser's ID. Do not use email addresses.userid

    Bazaarvoice Confidential30

    Bazaarvoice quick start implementation guide

  • To enable verified purchaser badging via on-the fly simple submissionmethod, youmust add additional data toyour user authentication string. The subjectids and verifiedpurchaser strings are necessary for the badge toshow up.

    A pre-encoded stringmust be UTF-encoded, and its values must be URL-escaped. For example, the string Example$tringmust be rendered as Example%24tring. The following code provides an example pre-encoded string.

    date=2007-05-27&userid=ID12345

    Perform the following steps to encode a string:

    1. Generate the hexMD5 hash of the shared key, concatenatedwith the UAS.

    Use the following value for the shared key:

    12345678901234567890123456789012345678901234567890123456789012345

    The resulting string is 32 characters in length.

    2. Hex encode the UAS.

    3. Concatenate the result of step 1 with the result of step 2.

    The following psuedocode demonstrates the logic of the previous steps.

    userStr = "date=YYYYMMDD&userid=123456"sharedKey = "12345678901234567890123456789012345678901234567890123456789012345"encUser = md5(sharedKey + userStr) + hex(userStr)

    The following pseudocode demonstrates the same logic for PHP.

    The final value of encUser represents the value of userToken that is used to integrate the body of the submissionpage.

    To obtain code examples that pertain to the generation of the encoded UAS for login integration, see "Example:Integration Code."

    Related Links

    User authentication string options on page 74

    Rendering the submission container page on page 27

    Example: Integration code on page 75

    31Bazaarvoice Confidential

    Implementing the submission container page

  • Implementing Bazaarvoice SEOImplementing SEO involves the following tasks.

    Prerequisites

    The following prerequisites must be satisfied before implementing SEO integration:

    Youmust be using the Bazaarvoice JavaScript integrationmethod.

    Youmust provide an XML product feed to Bazaarvoice. See the Bazaarvoice data feeds guide for moreinformation.

    Important!If your UGC is displayed behind a tab, take note of the section that address this special case.

    1. Create an automated process for daily tasks on page 32

    2. Special case:When UGC is behind a tab on page 37

    3. Verify your SEO implementation on page 39

    Create an automated process for daily tasks

    Create an automated process to perform the following tasks daily.

    1. Download and unpack SEO files on page 32

    2. Inject SEO content on product pages on page 33

    3. Perform a string replacement within the SEO files on page 36

    4. Handle the SEOURL parameter on page 36

    Download and unpack SEO files

    Every day the following files are made available on your production and staging FTP or SFTP accounts:

    feeds/_smartseo.zip

    feeds/_smartseo.zip.ready

    Verify that the .ready file exists, then download the .zip file and extract its contents.

    NoteThe .ready file is created to notify you that the .zip is completely uploaded.

    Bazaarvoice Confidential32

    Bazaarvoice quick start implementation guide

  • The following table identifies the pages that are present if any content exists.

    Directory*FolderType of UGC

    {DisplayCode}/reviews/product/1/001122.htmreviewsR&R

    {DisplayCode}/questions/product/1/112233.htm

    OR

    {DisplayCode}/questions/category/1/112233.htm

    questionsQ&A

    {DisplayCode}/stories/category/1/stories/112233.htmstoriesCampaigns

    * In each directory, DisplayCode represents your unique display code, such as 1234-en_us.

    Files in these directories are named SUBJECTID.htm, where SUBJECTID represents theURL-encoded ID of a productor category. For example, a product that features reviews and has an ID of 00+1122, generates the following filename:

    {DisplayCode}/reviews/product/1/00%2B1122.htm

    where DisplayCode represents your unique display code.

    Note

    Products and categories without UGC do not possess corresponding HTM files.

    Because the SEO snapshot is refreshed daily while JavaScript-rendered content is updated throughout theday, the twoversionsarenotalwayssynchronizedperfectly.Thisdifferencebetweentheversions isacceptable.However,youmust run theupdateeveryday tokeeptheversions reasonablysynchronized. It is recommendedthat you schedule your feed pickup after 11:00 a.m. CST, which is the time at which the feeds are typicallycompleted.

    Inject SEO content on product pages

    After you obtain and unzip the SEO files, insert them into your product and category pages.

    For each page, embed the contents of the appropriate SEO file within themain content element. For bestresults, keep the contents of each SEO file intact and unchanged as they are injected.

    Important!The contents of each SEO file are UTF-8 encoded. If you use a different character set on your site, convert the fileto the appropriate encoding before inserting it into your page. Otherwise, special characters might not rendercorrectly.

    33Bazaarvoice Confidential

    Implementing Bazaarvoice SEO

  • Ratings and reviewsDepending on the nature of your implementation, one of the following elements is likely to represent thedefault main content for ratings and reviews:

    For implementations that were completed before November, 2010:

    For implementations that were completed after November, 2010:

    The following example represents the content that must be added to this element on a product display page fora product with an ID of 001122:

    where DisplayCode represents your unique display code, such as 1234-en_us.

    The IDof the element canbe customized. If youused the JavaScriptAPI to change the ID, use the customized element.

    Question and answerThe following element represents the default main content for Q&A:

    The following code represents the content that must be added to this element for a product with an ID of 001122:

    where DisplayCode represents your unique display code, such as 1234-en_us.

    The IDof the element canbe customized. If youused the JavaScriptAPI to change the ID, use the customized element.

    For a category pagewith an ID of 112233, a similar change is made by using the following path:

    {DisplayCode}/questions/category/1/112233.htm

    where DisplayCode represents your unique display code.

    Bazaarvoice Confidential34

    Bazaarvoice quick start implementation guide

  • CampaignsThe following element represents the default main content for campaigns:

    The following code represents the content that must be added to this element for a product with an ID of 001122:

    where DisplayCode represents your unique display code, such as 1234-en_us.

    The IDof the element canbe customized. If youused the JavaScriptAPI to change the ID, use the customized element.

    For a category pagewith an ID of 112233, a similar change is made by using the following path:

    {DisplayCode}/stories/category/1/stories/112233.htm

    where DisplayCode represents your unique display code.

    Because campaign content supports different page types than reviews or questions, the path to campaign SEOcontent contains a level that is absent from the paths for R&R andQ&A. If you choose to use a campaigns pagetype other than show_stories by default, use the following table to identify the SEO file that you need to includeby default to match the JavaScript content.

    SEO File Name*API Options$BV.UI Stories API Call

    {DisplayCode}/stories/category/1/stories/112233.htm

    subjectType: "category"show_stories

    {DisplayCode}/stories/product/1/stories/112233.htm

    subjectType: "product"show_stories

    {DisplayCode}/stories/category/1/storiesgrid/112233.htm

    subjectType: "category"show_grid

    {DisplayCode}/stories/product/1/storiesgrid/112233.htm

    subjectType : "product"show_grid

    {DisplayCode}/stories/category/1/storiessubgrid/112233.htm

    subjectType: "category"show_home

    {DisplayCode}/stories/category/1/allstoriessubgrid/allstoriessubgrid.htm

    subjectType: "all"show_home

    * In each SEO file name, {DisplayCode} represents your unique display code. In each file name, 112233 representsa sample category or product ID.

    35Bazaarvoice Confidential

    Implementing Bazaarvoice SEO

  • Perform a string replacement within the SEO files

    When you enable the indexing of multiple pages, Bazaarvoice generates links to all additional pages of content.However, the URLs contain a token that youmust replace before they can function appropriately.

    In the SEO files, the string INSERT_PAGE_URI represents this token, which is locatedwherever the current page'sURL must be inserted with either a questionmark (?) or ampersand (&) at its end.

    In R&R, the SEO file contains a value like the following example.

    2

    where DisplayCode represents your unique display code, such as 1234-en_us.

    If theURLof the currentpage is http://www.example.com/6789.htm, the link resembles the followingexampleafterthe string replacement:

    2

    where DisplayCode represents your unique display code. In this example, the ? immediately precedes the bvrrpparameter.

    If thecurrentpage'sURLalready includesURLparameters, suchashttp://www.example.com/product.htm?id=6789,the link resembles the following example after the string replacement:

    2

    where DisplayCode represents your unique display code. In this example, the & immediately precedes the bvrrpparameter.

    Conduct this string-replacement operation whenever you include any SEO files on your page.

    Handle the SEO URL parameter

    Update your product and category pages to search for a newURLparameter that Bazaarvoicepasses to them. Thevalue of this parameter indicates the path to the file that must be included in the SEO feed.

    Complete this taskseparately foreachBazaarvoicecontent type. If youhave implementedR&Raswell ascampaigns,for example, youmust use two additional URL parameters.

    The following table identifies the default URL parameter that is associatedwith each Bazaarvoice product andprovides an example URL for a product with an ID of 6789.

    Example Value*Default ParameterType of UGC

    {DisplayCode}/reviews/product/2/6789.htmbvrrpReviews

    {DisplayCode}/questions/product/2/6789.htmbvqapQuestions and answers

    {DisplayCode}/reviews/stories/2/stories/6789.htm

    bvsypCampaigns

    Bazaarvoice Confidential36

    Bazaarvoice quick start implementation guide

  • * In each example value, DisplayCode represents your unique display code, such as 1234-en_us.

    These parameters exist in a URL onlywhen it links to a page other than the first one. As a result, it is recommendedthat you treat them as optional.

    Contact the Support team at Bazaarvoice to change the name of a default parameter.

    The logic that is associatedwith product and category pages does not always include the first page of content. Asa result, youmust update this logic as follows to check for the value of the SEOURL parameter:

    If the URL parameter exists and if the file to which its value refers exists in the SEO feed, include the contentsof that file instead of the default first page.

    If the URL parameter does not exist or if the file to which it refers does not exist, use the default first page.

    If a default first page does not exist, do not include any content.

    The following pseudocode outlines this logic for ratings and reviews.

    // returns the file that should be included on the product/category// page or null if nothing should be includedfunction getRRSmartSEOFile() { var SEOParam = getURLParameter('bvrrp'); var SEOFile = '/path/to/smartseo/' + SEOParam; var defaultSEOFile = '/path/to/smartseo/{DisplayCode}/reviews/product/1/' +productID + '.htm'; if ( hasValue(SEOParam) && fileExists(SEOFile) ) { return SEOFile; } else if ( fileExists(defaultSEOFile) ){ return defaultSEOFile; } else { return null; }}

    where DisplayCode represents your unique display code.

    Leverage this logic when the appropriate Bazaarvoice content area is rendered, as the following example shows.

    { if getRRSmartSEOFile() != null then insert stringReplaceURLs(getRRSmartSEOFile()) }

    Special case:When UGC is behind a tab

    If yourUGCresidesbehinda tabonyour site,place theSEOcontentwithinaelementonyourproductpages.Because tabbed navigation has become so common in recent years, search engines are capable of effectivelyindexing content that resides behind a tab, provided the following two conditions are met:

    1. The SEO content is present in the initial HTML format of the page and is not loaded through scripts on yourside.

    2. TheSEOcontent is visibleon thepageevenafter you turnoff JavaScript in yourbrowserand refresh thepage.

    NoteIf thedefault state of the container that holds the SEOcontent is set to visibility: hiddenor display: none, then:

    Use JavaScript to set this property. Do not declare this property in a stylesheet or inline to the element.

    Apply to all tabs so that all content is visible when the page is displayedwith JavaScript off.

    37Bazaarvoice Confidential

    Implementing Bazaarvoice SEO

  • Example code:

    Here is an example of the JavaScript code that can be used to hide tab content:

    document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none';

    Example product page:

    Here is a link and image of our client's product page with UGC behind a tab: http://www.swansonvitamins.com/NRN002/ItemDetail

    Bazaarvoice Confidential38

    Bazaarvoice quick start implementation guide

  • Verify your SEO implementation

    Use the following checklist to verify that your SEO integration is implemented correctly.

    Visually test the site to ensure that reviews or question- and answer-specific content does not appeartwice.

    Ensure that the review dates within the JavaScript match the review dates within the SEO block. If areview is approved on the same day onwhich the test is conducted, an acceptable difference of onedaymight exist between the dates.

    Open the page source for a page with SEO enabled, copy a portion of a review from the hosteddisplay, and attempt to locate that portion of the review in the page source. If the portion is visiblewithin the page source, SEO content is loaded into the page code andmade available to searchengine crawlers.

    Test that the SEO content is updating appropriately by rerunning the preceding tests at a later dateon a product or category that has received new content since the last tests were run. Ensure that thenew content is visible within the SEO block.

    We highly recommend automating the download and server-side include of the SEO files. Test thatthis will continue functioning as expected in the future and setup triggers if the download or includefails.

    View the pagewith JavaScript disabled and verify that the UGC is visible on the page.

    39Bazaarvoice Confidential

    Implementing Bazaarvoice SEO

  • Implementation checklistsThis section contains checklists to help you verify that you have completed the steps necessary to implement aBazaarvoice product successfully.

    General checklist

    Use the following checklist to verify that your Bazaarvoice product or products are implemented correctly.

    Make sure that the submissionpageURLhasbeen sent to yourBazaarvoice IE. Includeproductionand stagingversionsof the URL.

    If content is hidden behind a tab or other conditionally visible UI element on your product and category pages, makesure that the steps in Displaying content that resides behind a tab on page 46 have been followed.

    While not logged in to the system, test the submission link URLs first by specifying and then by not specifying a user. Ifthe login function is working properly, the submission link does not force a login attemptwhen you specify a user. Formore information, see Submission links on page 76.

    Make sure that your product data feedwith production data is being sent to Bazaarvoice's production FTP or SFTPserver. For more information, refer to the Bazaarvoice Product Feed document.

    When launching to production, ensure that/bvstaging is removed from all Bazaarvoice URLs.

    Bazaarvoice Confidential40

    Bazaarvoice quick start implementation guide

  • Using advanced integration optionsThe topics in this section describe how to implement and use the following optional features:

    Login redirection with JavaScript

    Displaying content that resides behind a tab

    Targeted links

    Sharing content through Facebook

    Same-page submission

    Event callbacks

    Loading the API asynchronously

    All Bazaarvoice content except theAPI loader file bvapi.js is loaded asynchronously. If youmust load this contentasynchronously as well, do not include the bvapi.js script tag directly on your HTML pages. Instead, include oneof the following script blocks, depending on whether you use jQuery:

    If you use jQuery, include the following block:

    var bvapiUrl = window.location.protocol + "//example.ugc.bazaarvoice.com/ bvstaging/static/1234/bvapi.js";

    window.loadBazaarvoiceApi = function(callback) { if (window.$BV) { callback(); } else { $.ajax({ url: bvapiUrl, cache: true, dataType: "script", success: function() { $($BV.docReady); callback(); } }); } };

    41Bazaarvoice Confidential

    Using advanced integration options

  • If you do not use jQuery, include the following JavaScript:

    (function() { var bvapiUrl = window.location.protocol + "//example.ugc.bazaarvoice.com/ bvstaging/static/1234/bvapi.js";

    function getScript(url, callback) { var head = document.getElementsByTagName("head")[0] || document.documentElement, script = document.createElement("script"); script.src = url; script.type = "text/javascript"; script.charset = "utf-8"; script.setAttribute("async", "async"); script.onload = script.onreadystatechange = function () { if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") { script.onload = script.onreadystatechange = null; callback(); } }; head.insertBefore(script, head.firstChild); }

    // work around Firefox 3.0, 3.5 lack of document.readyState // property. // Note: Because of this workaround, the fragment must // be included within the or element so that it // executes before the window load event is fired.

    var docReady, onDocReady = function(){docReady = true;}; if (document.readyState === undefined && document.addEventListener) { document.addEventListener("DOMContentLoaded", onDocReady, false); window.addEventListener("load", onDocReady, false); }

    window.loadBazaarvoiceApi = function(callback) { if (window.$BV) { callback(); } else { getScript(bvapiUrl, function() { if (docReady) { $BV.docReady(); } callback(); }); } }; })();

    All subsequent calls to Bazaarvoice API functions, such as $BV.ui(), are wrapped in loadBazaarvoiceApi calls, asthe following example shows:

    loadBazaarvoiceApi(function() { $BV.ui("rr", "show_reviews", { productId: "test1" });});

    Implementing inline ratings

    Bazaarvoice recommends adding the following elements to pages that display multiple products in a list or grid,such as category and search-results pages:

    The product's overall rating

    Bazaarvoice Confidential42

    Bazaarvoice quick start implementation guide

  • A star image that represents the overall rating

    The number of reviews

    Bazaarvoice provides twomethods by which inline ratings can be implemented:

    Ratings XML feed

    Platform API (recommended approach)

    Method comparison

    Ratings XMLData FeedPlatformAPI

    HigherLowerLevel of development effort

    Updated only daily (potentiallyout-of-sync with stats on product page)

    Real-time updatesStatistics freshness

    YesNoLocal repository of statistics for use inother advanced areas (e.g., facetednavigation, use in search resultsalgorithms, etc.)

    XML onlyXML or JSONFormat

    Using the Bazaarvoice platform API for inline ratings(recommended approach)

    TheBazaarvoiceplatformAPIprovidesahighlyoptimizedAPImethod for retrievingreviewstatistics suchasaveragerating. This method has been specifically built to handle high intensity applications such as search results pagesand product category listing pages.

    For example, theplatformAPI canbecalled for eachdesiredproduct IDas a search resultspage isbeing rendered.There is no requirement to cache these statistics locally prior to rendering thepage. Additionally, Bazaarvoice canhost the star images for use in theapplication. There is noneed to storea local copyof the star images. Thismethodgives you the flexibility to display the rating and images as you desire.

    NoteStatistics returned by statistics.json/xml are global statistics calculated on the entire reviews set for a productacross all locales. If locale-specific statistics are required, contact your Implementation Engineer.

    1. Request production and stagingplatformAPI keys for inline ratings use fromyour ImplementationEngineer.

    2. Use the appropriate product ID to call the platform API to request review statistics

    43Bazaarvoice Confidential

    Using advanced integration options

  • Production:

    http://example.ugc.bazaarvoice.com/data/statistics.json?apiversion=5.1&passkey=[api key]&filter=productid:[product id]&stats=reviews

    Staging:

    http://example.ugc.bazaarvoice.com/bvstaging/data/statistics.json?apiversion=5.1&passkey=[api key]&filter=productid:[product id]&stats=reviews

    The followingURLshowsa liveexample:http://reviews.apitestcustomer.bazaarvoice.com/bvstaging/data/statistics.json?apiversion=5.1&passkey=kuy3zj9pr3n7i0wxajrzj04xo&filter=productid:test1&stats=reviews

    3. Map the overall ratings value (rounded to one decimal place) returned in the API response to link to theappropriate BV-hosted star image URL.

    Image URL pattern:

    http://example.ugc.bazaarvoice.com/1234-en_us/[overall rating value]/[max rating:5]/rating.gif

    The following example retrieves the star image for 3.1 out of 5 stars:

    http://example.ugc.bazaarvoice.com/1234-en_us/3_1/5/rating.gif

    4. Utilize the API response and star image to display the inline rating image and overall rating value as neededon your category or search listing page.

    Using ratings XML feed for inline ratings

    Bazaarvoice provides a ZIP file that contains a series of star image files. These images represent ratings values thatrange from 0.0 through 5.0 and are incremented by tenths.

    1. Store the images from the Bazaarvoice ZIP file on your webserver.

    2. Download the Bazaarvoice ratings-only export feed and perform one of the following steps:

    Store the feed on the webserver for direct referencing of the rating and review count.

    Insert the overall rating and review count into your webstore database.

    3. Use the appropriate product ID to look up the following values in the static file or local database:

    Overall rating

    Number of reviews

    4. Map the overall rating value in the database to the appropriate star image file.For example, if the overall rating value is 3.7, map it to the star image file named rating-3_7.gif.

    For more information about ratings-only export feed, refer to Bazaarvoice Data Feeds.

    Bazaarvoice Confidential44

    Bazaarvoice quick start implementation guide

  • Implementing login redirection with JavaScript

    A client-side JavaScript option for login redirection can be implemented if the process of building the redirectionlogicon theserver side is toocostlyornot technically feasible.However,aclient-sidesolutionmightbrieflypresentuserswith a blank pagebefore redirecting them to the Loginpage. As a result, this solutionmight not provide themost optimal user experience.

    1. Place the following example code in the section on every page that youwant to display Bazaarvoice

    content:

    $BV.configure("global", { userToken: "XXXXX", doLogin: function(successCallback, successUrl) { window.location = "http://www.example.com/login.html?return=" + encodeURIComponent(successUrl); } });

    where XXXXX represents the Bazaarvoice-encodedUAS. For more information, see "Generating the User

    Authentication String."

    If an appropriate value is unavailable, leave this value blank.

    2. Replace the value of doLoginwith the function that is calledwhen Bazaarvoice requires user authentication.

    After a successful login attempt on a separate page, the user is redirected back to the value of successUrl. Thecode in step 1 provides an example of redirecting to a login page that features a defined return URL.

    Related Links

    Generating the user authentication string on page 30

    User authentication string options on page 74

    Integratingwith AJAX-type login methods

    successCallback can be executed if an AJAX-type login method is used and the user is still on the submissioncontainer page.

    45Bazaarvoice Confidential

    Using advanced integration options

  • 1. Place the following example code in the section on every page that youwant to display Bazaarvoice

    content:

    $BV.configure("global", { userToken: "XXXXX", doLogin: function(successCallback, successUrl) { myExampleAjaxLogin(function myExampleAfterLogin(encoded_user_string) { successCallback(encoded_user_string); }); }, });

    where the XXXXX represents the Bazaarvoice-encodedUAS.

    If an appropriate value is unavailable, leave this value blank.

    2. Replace the value of doLoginwith the function that is calledwhen Bazaarvoice requires user authentication.

    3. After theuser successfully logs in to thesystem,callsuccessCallbackandpass theUASas the firstparameter.

    Related Links

    Generating the user authentication string on page 30

    User authentication string options on page 74

    Displaying content that resides behind a tab

    If Bazaarvoice content is hidden behind a tab or other conditionally visible UI element, implement a callback sothat the content can be displayed under the appropriate conditions, such as targeted links to a specific review,question, answer, or campaign content.

    To implement such a callback, define the doShowContentoption in the appropriate show_* $BV.ui() call, as shownby the following example code.

    $BV.ui("rr", "show_reviews", { productId: "XXXXX", doShowContent: function() { myExampleShowTab("#ReviewsTab"); } });

    Although the preceding example codepertains to a ratings and reviews integration, themanner inwhich doShowContent specifies a function applies to all feature integrations.

    When the primary content container needs to be visible, Bazaarvoice calls the function that is specified bydoShowContent. In the previous example, this function calls myExampleShowTab.

    doShowContent supports asynchronous operations. A common need for such operations involves the inclusion offunctions from popular JavaScript libraries, such as jQuery. Additionally, the function can be configuredwith

    Bazaarvoice Confidential46

    Bazaarvoice quick start implementation guide

  • callbacks to prevent the occurrence of actions that are based on content focusing. For example, returning a valueof false from doShowContent prevents it from scrolling to content, as the following code shows.

    function doShowContent(application, displayCode, subject, deepLinkId, callback, source ) { if ( I want to scroll ) { myExampleAsyncShowTab('#exampleReviewsTab', { onFinish: callback }); return false; } else { return false; }}

    The following table identifies possible values for the source object.

    Content focusing is called by...If the value is...

    A Read XXXX linkreadLink

    A targeted URLdeepLink

    Returning from the submission flowsubmission

    Use these values to prevent specific content-focusing actions, depending on the events that trigger them.

    Targeted link to Bazaarvoice content

    Use targeted URLs to link directly to a specific review, question, answer, campaign, or other piece of content.TheseURLs redirect to theapplicableproductor categorypagewhile settingacookie that instructs theBazaarvoiceintegration on that page to display the appropriate content at the top of themain Bazaarvoice display area.

    Ensure that the following prerequisites are satisfied before implementing this feature:

    If the primary Bazaarvoice content resides behind a tab or depends on JavaScript running before it can bemade visible, define a JavaScript function for the doShowContent option. Otherwise, Bazaarvoice cannot

    automatically open the tab that contains the targeted content.

    Theproduct feedmustcontainavalidproductorcategorypageURL for thecorrespondingproductorcategoryID in the targeted link. This URL allows Bazaarvoice to redirect users to the appropriate product or categorypage. If a valid URL is not defined, you can specify a value explicitly as a parameter in the targeted link.

    Example formats: Targeted URLs

    The sections in this topic provide examples of targeted URLs. Regardless of the URL format that you use, ensurethat /bvstaging is removed from the URLs in your production environment.

    Reviews

    The following URL shows the format of a URL that deep links to a review.

    http://reviews.example.com/bvstaging/1234-en_us/XXXXX/review/YYYYY/redirect.htm

    In this example, XXXXX represents the product ID, and YYYYY represents the review ID.

    47Bazaarvoice Confidential

    Using advanced integration options

  • Review comments

    The following URL shows the format of a URL that deep links to a review comment.

    http://reviews.example.com/bvstaging/1234-en_us/XXXXX/review/YYYYY/comment/ZZZZZ/redirect.htm

    In this example, XXXXX represents the product ID, YYYYY represents the review ID, and ZZZZZ represents the reviewcomment ID.

    Questions

    The following URLs show the format of a URL that deep links to a question:

    http://answers.example.com/bvstaging/answers/1234-en_us/product/XXXXX/question/YYYYY/redirect.htm

    http://answers.example.com/bvstaging/answers/1234-en_us/category/XXXXX/question/YYYYY/redirect.htm

    In these examples, XXXXX represents the product or category ID, and YYYYY represents the question ID.

    Answers

    The following URLs show the format of a URL that deep links to an answer:

    http://answers.example.com/bvstaging/answers/1234-en_us/product/XXXXX/answer/YYYYY/redirect.htm

    http://answers.example.com/bvstaging/answers/1234-en_us/category/XXXXX/answer/YYYYY/redirect.htm

    In these examples, XXXXX represents the product or category ID, and YYYYY represents the answer ID.

    Campaigns

    The following URLs show the format of a URL that deep links to campaign content:

    http://stories.example.com/bvstaging/stories/1234-en_us/product/XXXXX/story/YYYYY/redirect.htm

    http://stories.example.com/bvstaging/stories/1234-en_us/category/XXXXX/story/YYYYY/redirect.htm

    In these examples, XXXXX represents the product or category ID, and YYYYY represents the campaign content ID.

    Campaign comments

    The following URLs show the format of a URL that deep links to a comment on a piece of campaign content:

    http://stories.example.com/bvstaging/stories/1234-en_us/product/XXXXX/story/YYYYY/com

    ment/ZZZZZ/redirect.htm

    http://stories.example.com/bvstaging/stories/1234-en_us/category/XXXXX/story/YYYYY/com

    ment/ZZZZZ/redirect.htm

    In these examples, XXXXX represents the product or category ID, YYYYY represents the campaign content ID, andZZZZZ represents the comment ID.

    Overriding redirect URLs

    If the URL that corresponds to the product or category page is not sent to Bazaarvoice or if an alternate URL isdesired, you can add the redirecturlparameter to explicitly define theURL towhichBazaarvoice redirects. If you

    Bazaarvoice Confidential48

    Bazaarvoice quick start implementation guide

  • add the redirecturlparameter, the base domain of the redirect URLmustmatch the base domain of the targetedURL for security reasons.

    The following URL provides an example override:

    http://reviews.example.com/bvstaging/1234-en_us/pid123/review/4567/redirect.htm?redirecturl=http%3A%2F%2Fwww.example.com%2Fpid123.html

    Ensure that /bvstaging is removed from the URL before launching in your production environment.

    Sharing content through Facebook

    ImplementFacebooksharing toallowyourcustomers tobookmarkcontent that theywant to sharewith their socialnetworks.

    Updating Facebook tags

    Update your Facebook tags if you are implementing either the Facebook Like.

    Facebook Like

    Define the Facebook namespace if you have enabled either of the following options:

    The Facebook Like button integration

    Publishing to Facebook from the submission page

    If one of these options is enabled but the Facebook namespace is not defined, Internet Explorer might behave inan unreliable manner. Declare the fb namespace within the opening element, as the following exampleshows.

    If other namespaces or attributes are already definedwithin the opening element, leave them intact.

    Social Buttons

    Social buttons allows your customers to bookmark content that they want to share with their social networks.Bookmarks appear in the Bazaarvoice-supported locations of your choice, as the following image shows.

    49Bazaarvoice Confidential

    Using advanced integration options

  • When you share content with Facebook, the social-networking sites bots crawl your pages and search for titles,descriptions, thumbnail images, and other information. Although the botsmight estimate some of the values thatFacebook uses, you can use the followingmetadata tags to specify exact values:

    where XXXXX represents the title of the page.

    where YYYYY represents the description of the page.

    where ZZZZZ represents the URL that points to the image you want Facebook to use as the thumbnail.

    For additional information, visit http://developers.facebook.com/docs/share.

    Creating an application for Facebook

    Bazaarvoice lets your customers publish submissions directly to their Facebookwalls. To take advantage of thisfeature, youmust either create a new Facebook application (app) for Bazaarvoice to utilize or provide us withaccess to an appropriate app that you already use.

    Bazaarvoice requires the following information for the Facebook app that you plan to use:

    App ID

    API key

    App secret, which is stored as an encrypted value

    Additionally, the Facebook appmust be configured tomatch the domain on which the submissions occur. Notethat if your stagingenvironment (or anyother non-productionenvironment youwish to test against) has adifferentdomain than your production environment, you'll need to configure separate a Facebook app for each domain.

    The following topics describe the process of creating a new Facebook app and help you identify the informationthat Bazaarvoice requires for you to use an existing app.

    Creating a new Facebook application

    1. Use a standardWebbrowser and the administrator-level credentials that are associatedwith your Facebookaccount to access http://www.facebook.com/developers.TheDeveloper page opens.

    2. Click Set UpNewApp in the upper-right corner.The Essential Information page opens.

    3. Perform the following steps:

    a) In theAppName text box, specify an app name that is relevant to your brand andmeaningful to yourcustomers.

    b) ClickAgree to indicate that you agree to the Facebook terms and conditions.

    Bazaarvoice Confidential50

    Bazaarvoice quick start implementation guide

  • c) ClickCreate App.

    d) Optional: If you are asked to complete a CAPTCHA, specify the appropriate information and clickSubmit.

    TheAbout page opens.

    4. Upload a logo for Facebook to use.

    5. In the navigation panel, clickWeb Site.TheWeb Site page opens.

    6. Perform the following steps on theWeb Site page:

    a) In theSiteURL textbox, specify theappropriateURL,which is typically yourhomepage, in the followingformat:

    http://www.example.com

    b) In the Site Domain text box, specify the appropriate domain in the following format:

    example.com

    c) Click Save Changes.

    The Summary page opens, displaying the application settings and any relevant usage statistics.

    7. Send the values that correspond to the app ID, API key, and app secret to your Bazaarvoice engineer.

    Using an existing Facebook application

    1. 1.UseastandardWebbrowserand theadministrator-levelcredentials thatareassociatedwithyourFacebookaccount to access http://www.facebook.com/developers.Your existing Facebook apps are displayed on theDeveloper page.

    2. Click the name of the appropriate app.The app ID, API key, and app secret are displayed.

    3. Send the values that correspond to the app ID, API key, and app secret to your Bazaarvoice engineer.

    4. Confirmthat thesiteURLcorrespondstoyourhomepageandthat thesitedomaincorrespondsto thedomainon which Bazaarvoice submissions will occur.

    If these values are set to other domains or URLs, youmight want to create a new application for Bazaarvoiceto use.

    5. Optional: To change these values, click Edit Settings and then clickWeb Site in the navigation panel.

    Same-page submission

    Same-page submission allows you to use a single page for both the display and submission of UGC.

    The following topics describe the JavaScript functions that handle login duties, populate the submission element, andmanage the page display:

    AJAX-type login method

    51Bazaarvoice Confidential

    Using advanced integration options

  • Separate login page

    Same-page submission allows you to use a single page for both the display and submission of UGC. The followingtopic describes the JavaScript functions that populate the submission element andmanage the pagedisplay.

    Example code is provided.

    Implementing same-page submission with AJAX-type loginmethods

    Although Bazaarvoice supports same-page submission, additional configuration options must be defined toaccount for all user interactions, includin