For dynamic recommendations: Adding e-Marketing Spots to support

For the Madisons starter store, sample JSP and JavaScript files are provided to demonstrate how to display recommendations from . These files can be included in store pages to display dynamic recommendations to customers. Note that flat file recommendations are supported by the existing e-Marketing Spot snippets that are used in Madisons (ContentAreaESpot.jsp, ESpotNavDisplay.jsp, ScrollingProductESpot.jsp). Therefore, you do not need to perform this task to use flat file recommendations.

Procedure

Go to the following directory:

WCDE_installdir/components/samples/IntelligentOffer

The directory contains the following subdirectories:


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
workspace_dir/Stores/WebContent/Madisons/javascript

The directory contains the following file:


File	Description
IntelligentOffer.js	This file provides methods to manage the refresh area that is used to display dynamic recommendations. This file also contains the zone population function `io_rec_zp`. This function is called by 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 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 provides. The zone population function is also set up to display the Zone Header Text defined in the 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 e-Marketing Spot snippet.

Copy everything inside the Snippets directory to the following directory:

WC_eardir/Stores.war/Madisons/Snippets/Marketing/ESpot
workspace_dir/Stores/WebContent/Madisons/Snippets/Marketing/ESpot

The directory contains the following files:


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 . You can also use this snippet to display 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:
1. Look for the following line:
  
  var sendToProduction = false;
2. Set the value to true if you want to communicate with the production system.
Update applicable store pages to include a e-Marketing Spot. Examples are provided for the following scenarios:
1. On the product display page, display dynamic recommendations for the currently viewed product:
  1. Open the CachedProductOnlyDisplay.jsp file:
    - workspace_dir/Stores/WebContent/Madisons/Snippets/Catalog/CatalogEntryDisplay/CachedProductOnlyDisplay.jsp
  2. 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 --%>	
```
2. On the category display page, display top seller dynamic recommendations for the currently viewed category:
  1. Open the CategoryOnlyDisplay.jsp file:
    - WC_eardir/Stores.war/Madisons/Snippets/Catalog/CatalogDisplay/CategoryOnlyDisplay.jsp
    - workspace_dir/Stores/WebContent/Madisons/Snippets/Catalog/CategoryOnlyDisplay.jsp
  2. 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 --%>	
```
3. On the home page, display top seller dynamic recommendations for the site:
  1. Open the CachedTopCategoriesContentExt.jspf file:
    - WC_eardir/Stores.war/Madisons/Snippets/Catalog/CategoryDisplay/CachedTopCategoriesContentExt.jspf
    - workspace_dir/Stores/WebContent/Madisons/Snippets/Catalog/CategoryDisplay/CachedTopCategoriesContentExt.jspf
  2. 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 --%>
```
4. On the shopping cart page, display dynamic recommendations for the most recently viewed product:
  1. Open the ShopCartDisplay.jsp file:
    - WC_eardir/Stores.war/Madisons/ShoppingArea/ShopcartSection/ShopCartDisplay.jsp
    - workspace_dir/Stores/WebContent/Madisons/ShoppingArea/ShopcartSection/ShopCartDisplay.jsp
  2. 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 are used on any e-Marketing Spot in the store, then on the product display page (CachedProductOnlyDisplay.jsp) you either need to include an e-Marketing Spot, or you need to include eluminate.js and call the methods cmSetupNormalization and cmSetClientID. For either option, the files need to be included before the <cm:product> tag.
5. On the order summary page, display dynamic recommendations for the most recently purchased product:
  1. Open the OrderShippingBillingConfirmationPage.jsp file:
    - WC_eardir/Stores.war/Madisons/ShoppingArea/CheckoutSection/OrderShippingBillingConfirmationPage.jsp
    - workspace_dir/Stores/WebContent/Madisons/ShoppingArea/CheckoutSection/OrderShippingBillingConfirmationPage.jsp
  2. 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 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 include eluminate.js and call the methods cmSetupNormalization and cmSetClientID. For either option, the files need to be included before the <cm:order> tag.

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 e-Marketing Spot by using the Display action:
- For an overview and examples, see Action: Display.
- For general instructions on creating web activities, see Creating a web activity.