For dynamic recommendations: Adding e-Marketing Spots to support IBM Product Recommendations
Procedure
- Go to the following directory:
- WC_installdir/components/store-enhancements/samples/IntelligentOffer
- WCDE_installdir/components/store-enhancements/samples/IntelligentOffer
Directory Description javascript Contains the JavaScript files that are required for recommendations from IBM Product Recommendations. Snippets Contains the e-Marketing Spot snippet files that are required for recommendations from IBM Product Recommendations. - Copy everything inside the javascript directory
to the following directory:
- WC_eardir/Stores.war/Madisons/javascript
- WCDE_installdir/workspace/Stores/WebContent/Madisons/javascript
File Description IntelligentOffer.js
This file provides methods to manage the refresh area that is used to display IBM Product Recommendations dynamic recommendations. This file also contains the zone population function
io_rec_zp
. This function is called by IBM Product Recommendations when it has a list of part numbers to display in an e-Marketing Spot. The refresh area is then called with the list of part numbers. The JSP associated with the refresh area loads the necessary information to display each catalog entry. If you have configured IBM Product Recommendations to return all the required information to display a catalog entry, then modify this function to remove the call to the refresh area, and create and display the appropriate HTML based on the information that IBM Product Recommendations provides. The zone population function is also set up to display the Zone Header Text defined in the IBM Product Recommendations Recommendation Plan. This text is displayed at the top of the e-Marketing Spot, for example, "Other Customers Also Bought." Alternatively, you can specify text using the espotTitle parameter when including the IBM Product Recommendations e-Marketing Spot snippet. - Copy everything inside the Snippets directory
to the following directory:
- WC_eardir/Stores.war/Madisons/Snippets/Marketing/ESpot
- WCDE_installdir/workspace/Stores/WebContent/Madisons/Snippets/Marketing/ESpot
File Description IntelligentOfferESpot.jsp
An e-Marketing Spot snippet that has an added function to include a refresh area that can display dynamic recommendations from IBM Product Recommendations. You can also use this snippet to display WebSphere Commerce recommendations for catalog entries, categories, and content because the snippet is based on the ContentAreaESpot.jsp e-Marketing Spot JSP snippet that is used for other starter store e-Marketing Spots.
IntelligentOfferDisplayPartnumbers.jsp
This JSP file is associated with the e-Marketing Spot refresh area. The JSP file sets up a scrollable widget to display dynamic recommendations for catalog entries.
IntelligentOfferDisplayPartnumber.jsp
This JSP file finds the catalog entry ID associated with a part number and uses CatalogEntryThumbnailDisplay.jsp to display the catalog entry. JSP caching can be used for this JSP file to improve runtime performance.
- Edit the IntelligentOfferESpot.jsp file
to specify that communication should be with the IBM Product Recommendations production
or test server:
- Look for the following line:
var sendToProduction = false;
- Set the value to
true
if you want to communicate with the IBM Product Recommendations production system.
- Look for the following line:
- Update applicable store pages to include a IBM Product Recommendations e-Marketing
Spot. Examples are provided for the following scenarios:
- On the product display page, display dynamic recommendations for the currently viewed product
- On the category display page, display top seller dynamic recommendations for the currently viewed category
- On the home page, display top seller dynamic recommendations for the site
- On the shopping cart page, display dynamic recommendations for the most recently viewed product
- On the order summary page, display dynamic recommendations for the most recently purchased product
- On the product display page, display
dynamic recommendations for the currently viewed product:
- Open the CachedProductOnlyDisplay.jsp file:
- WC_eardir/Stores.war/Madisons/Snippets/Catalog/CatalogEntryDisplay/CachedProductOnlyDisplay.jsp
- WCDE_installdir/workspace/Stores/WebContent/Madisons/Snippets/Catalog/CatalogEntryDisplay/CachedProductOnlyDisplay.jsp
- Add the following code to the file to create an e-Marketing Spot
named
ProductPageIntelligentOffer
:<%-- Begin - Added for Coremetrics Intelligent Offer --%> <% com.ibm.commerce.command.CommandContext commandContext = (com.ibm.commerce.command.CommandContext) request.getAttribute(com.ibm.commerce.server.ECConstants.EC_COMMANDCONTEXT); Long productId = commandContext.getRequestProperties().getLong("productId"); String masterCategoryId = com.ibm.commerce.bi.taglib.TagUtils.getMasterCategoryId(commandContext, productId).toString(); %> <%out.flush();%> <c:import url="${jspStoreDir}Snippets/Marketing/ESpot/IntelligentOfferESpot.jsp"> <c:param name="emsName" value="ProductPageIntelligentOffer" /> <c:param name="catalogId" value="${WCParam.catalogId}" /> <c:param name="partNumber" value="${product.partNumber}" /> <c:param name="parentCategoryId" value="<%=masterCategoryId%>" /> </c:import> <%out.flush();%> <%-- End - Added for Coremetrics Intelligent Offer --%>
- Open the CachedProductOnlyDisplay.jsp file:
- On the category display page, display top
seller dynamic recommendations for the currently viewed category:
- Open the CategoryOnlyDisplay.jsp file:
- WC_eardir/Stores.war/Madisons/Snippets/Catalog/CatalogDisplay/CategoryOnlyDisplay.jsp
- WCDE_installdir/workspace/Stores/WebContent/Madisons/Snippets/Catalog/CategoryOnlyDisplay.jsp
- Add the following code to the file to create an e-Marketing Spot
named
CategoryPageIntelligentOffer
:<%-- Begin - Added for Coremetrics Intelligent Offer --%> <%out.flush();%> <c:import url="${jspStoreDir}Snippets/Marketing/ESpot/IntelligentOfferESpot.jsp"> <c:param name="emsName" value="CategoryPageIntelligentOffer" /> <c:param name="catalogId" value="${WCParam.catalogId}" /> <c:param name="parentCategoryId" value="${WCParam.categoryId}" /> </c:import> <%out.flush();%> <%-- End - Added for Coremetrics Intelligent Offer --%>
- Open the CategoryOnlyDisplay.jsp file:
- On the home page, display top seller dynamic
recommendations for the site:
- Open the CachedTopCategoriesContentExt.jspf file:
- WC_eardir/Stores.war/Madisons/Snippets/Catalog/CategoryDisplay/CachedTopCategoriesContentExt.jspf
- WCDE_installdir/workspace/Stores/WebContent/Madisons/Snippets/Catalog/CategoryDisplay/CachedTopCategoriesContentExt.jspf
- Add the following code to the file to create an e-Marketing Spot
named
HomePageIntelligentOffer
:<%-- Begin - Added for Coremetrics Intelligent Offer --%> <%out.flush();%> <c:import url="${jspStoreDir}Snippets/Marketing/ESpot/IntelligentOfferESpot.jsp"> <c:param name="emsName" value="HomePageIntelligentOffer" /> <c:param name="catalogId" value="${WCParam.catalogId}" /> <c:param name="parentCategoryId" value="_TS_" /> </c:import> <%out.flush();%> <%-- End - Added for Coremetrics Intelligent Offer --%>
- Open the CachedTopCategoriesContentExt.jspf file:
- On the shopping cart page, display dynamic
recommendations for the most recently viewed product:
- Open the ShopCartDisplay.jsp file:
- WC_eardir/Stores.war/Madisons/ShoppingArea/ShopcartSection/ShopCartDisplay.jsp
- WCDE_installdir/workspace/Stores/WebContent/Madisons/ShoppingArea/ShopcartSection/ShopCartDisplay.jsp
- Add the following code to the file to create an e-Marketing Spot
named
ShoppingCartIntelligentOffer
:<%-- Begin - Added for Coremetrics Intelligent Offer --%> <%out.flush();%> <c:import url="${jspStoreDir}Snippets/Marketing/ESpot/IntelligentOfferESpot.jsp"> <c:param name="emsName" value="ShoppingCartIntelligentOffer" /> <c:param name="catalogId" value="${WCParam.catalogId}" /> </c:import> <%out.flush();%> <%-- End - Added for Coremetrics Intelligent Offer --%>
Note: If most recently viewed product IBM Product Recommendations are used on any e-Marketing Spot in the store, then on the product display page (CachedProductOnlyDisplay.jsp) you either need to include an IBM Product Recommendations e-Marketing Spot, or you need to includeeluminate.js
and call the methodscmSetupNormalization
andcmSetClientID
. For either option, the files need to be included before the<cm:product>
tag.
- Open the ShopCartDisplay.jsp file:
- On the order summary page, display dynamic
recommendations for the most recently purchased product:
- Open the OrderShippingBillingConfirmationPage.jsp file:
- WC_eardir/Stores.war/Madisons/ShoppingArea/CheckoutSection/OrderShippingBillingConfirmationPage.jsp
- WCDE_installdir/workspace/Stores/WebContent/Madisons/ShoppingArea/CheckoutSection/OrderShippingBillingConfirmationPage.jsp
- Add the following code to the file to create an e-Marketing Spot
named
OrderSummaryIntelligentOffer
:<%-- Begin - Added for Coremetrics Intelligent Offer --%> <%out.flush();%> <c:import url="${jspStoreDir}Snippets/Marketing/ESpot/IntelligentOfferESpot.jsp"> <c:param name="emsName" value="OrderSummaryIntelligentOffer" /> <c:param name="catalogId" value="${WCParam.catalogId}" /> </c:import> <%out.flush();%> <%-- End - Added for Coremetrics Intelligent Offer --%>
Note: If most recently purchased product IBM Product Recommendations recommendations are used on any e-Marketing Spot in the store, then on the order summary page (OrderShippingBillingConfirmationPage.jsp) you either need to include an IBM Product Recommendations e-Marketing Spot, or you need to includeeluminate.js
and call the methodscmSetupNormalization
andcmSetClientID
. For either option, the files need to be included before the<cm:order>
tag.
- Open the OrderShippingBillingConfirmationPage.jsp file:
- (Optional) For dynamic recommendations, consider caching
the JSP snippets that display an individual catalog entry recommendation
in the e-Marketing Spot. The following example illustrates how to
cache the corresponding JSP snippets:
<cache-entry> <class>servlet</class> <name>/Madisons/Snippets/Marketing/ESpot/IntelligentOfferDisplayPartnumber.jsp</name> <property name = "do-not-consume">true</property> <property name = "save-attributes">false</property> <cache-id> <component id = "emsName" type = "parameter"> <required>true</required> </component> <component id = "catalogId" type = "parameter"> <required>true</required> </component> <component id = "DC_storeId" type = "attribute"> <required>true</required> </component> <component id = "DC_lang" type = "attribute"> <required>true</required> </component> <component id = "DC_curr" type = "attribute"> <required>true</required> </component> <component id = "DC_cont" type = "attribute"> <required>true</required> </component> <component id = "DC_mg" type = "attribute"> <required>true</required> </component> <component id = "intv_id" type = "parameter"> <required>true</required> </component> <component id = "experimentId" type = "parameter"> <required>false</required> </component> <component id = "testElementId" type = "parameter"> <required>false</required> </component> <component id = "partNumber" type = "parameter"> <required>true</required> </component> </cache-id> </cache-entry> <!--**************************************************************************************************** --> <!--* Each individual catalog entry display snippet should be cached for the related eMarketing spots. * --> <!--* All eMarketing spot jsps wrap around this snippet, hence each piece of its content is cached * --> <!--* even though the eMarketing spot itself is not cached. * --> <!--**************************************************************************************************** --> <cache-entry> <class>servlet</class> <name>/Madisons/Snippets/Catalog/CatalogEntryDisplay/CatalogEntryThumbnailDisplay.jsp</name> <property name = "do-not-consume">true</property> <property name = "save-attributes">false</property> <cache-id> <component id = "emsName" type = "parameter"> <required>true</required> </component> <component id = "catalogId" type = "parameter"> <required>true</required> </component> <component id = "DC_storeId" type = "attribute"> <required>true</required> </component> <component id = "DC_lang" type = "attribute"> <required>true</required> </component> <component id = "DC_curr" type = "attribute"> <required>true</required> </component> <component id = "DC_cont" type = "attribute"> <required>true</required> </component> <component id = "DC_mg" type = "attribute"> <required>true</required> </component> <component id = "intv_id" type = "parameter"> <required>true</required> </component> <component id = "experimentId" type = "parameter"> <required>false</required> </component> <component id = "testElementId" type = "parameter"> <required>false</required> </component> <component id = "catEntryIdentifier" type = "parameter"> <required>true</required> </component> </cache-id> <dependency-id> storeId:productId <component id = "storeId" type = "parameter"> <required>true</required> </component> <component id = "catEntryIdentifier" type = "parameter"> <required>true</required> </component> </dependency-id> <dependency-id> productId <component id = "catEntryIdentifier" type = "parameter"> <required>true</required> </component> </dependency-id> <dependency-id> activityId <component id = "intv_id" type = "parameter"> <required>true</required> </component> </dependency-id> <dependency-id>RankingEMarketingSpot</dependency-id> </cache-entry>
What to do next
To test your dynamic recommendations:
- For each of the new IBM Product Recommendations e-Marketing Spots you added to store pages in this task, create the e-Marketing Spot in Management Center so that you can use it in web activities. See Creating an e-Marketing Spot.
- Create a web activity to display the recommendations in the IBM Product Recommendations e-Marketing
Spot by using the Display IBM Product Recommendations action:
- For an overview and examples, see Action: Display IBM Product Recommendations.
- For general instructions on creating web activities, see Creating a web activity.