Add JavaScript Calls for DHTML Widgets

Some sites have pages that contain dynamic content that only appear to storefront customers after they initiate an action or after a certain amount of time, without the page being refreshed. For example, SiteGenesis features carousel widgets that cycle through a number of products when arrows are clicked, or rotating banners that cycle through a number of products over time.

Note: If you don't use DHTML widgets in your storefront, you can ignore this topic.

If <isobject> tags are included in the ISML templates for all products in these widgets, then all products are included in the analytics collection even if the customer never clicks in the carousel or waits long enough to cycle through the banners. Salesforce B2C Commerce provides JavaScript functions that enable you to be more precise when collecting data.

The B2C Commerce JavaScript library includes two JavaScript functions: dw.ac.capture and dw.ac.applyContext.

dw.ac.capture(/*Object or Array*/ data)

The dw.ac.capture function is used to collect analytics information for products that can't be guaranteed to appear. In the previous examples, the dw.ac.capture function should be called each time the customer clicks an arrow to move the carousel, or each time the banner automatically rotates to show the next product.

Each time the dw.ac.capture function is called, analytics data is collected. This means that if the carousel is cycled through all of its products so that when the initial product appears again, it can be counted twice. To avoid double counting, the capture function should only be called the first time a product appears.

The dw.ac.capture function collects the data and submits it for processing. The data can either be a single object with the product attributes listed as shown in the following table, or an array of objects that each have these attributes.

Product attribute Purpose Optional
String id The ID (SKU) of the product Yes
String type The type of data to collect, such as dw.ac.EV_PRD_SEARCHHIT  

Only valid objects that have these attributes are collected. If no valid product objects are provided for collection, submission doesn't occur.

Examples

This example is part of the app.js file in the SiteGenesis cartridge.

dw.ac.capture({ id : $(this).text(), type : dw.ac.EV_PRD_RECOMMENDATION });

Arguments

For each product specified in a call to the dw.ac.capture function, you must specify the type of event that causes the information capture. You can use the following constant values in the JavaScript library, in objects passed as arguments to the dw.ac.capture function.

Constant value Description
dw.ac.EV_PRD_DETAIL A product shown in detail, as for a product detail page
dw.ac.EV_PRD_RECOMMENDATION A product shown as a recommendation to the customer
dw.ac.EV_PRD_SEARCHHIT A product shown as a hit in search results
dw.ac.EV_PRD_SETPRODUCT Awq product shown as a constituent of a product set

These constants correspond to the four values of the type attribute for the <isobject> tag.

aw.ac.applyContext(/*Object*/ configs)

Use the dw.ac.applyContext function to change the analytics context from what is initially provided by the <isactivedatacontext> tag. For example, a rotating banner on the home page showcases a product from each top level category of the site. If the <isactivedatacontext> tag isn't on that page, no category is associated with the representation of these products. If you want to associate a category context with each product in the banner, use the <isactivedatacontext> tag. The category provided in the tag might only be appropriate for the first product that appears in the banner. For each subsequent product to appear in the banner, call the dw.ac.applyContext function to associate a new category.

Each time the dw.ac.applyContext function is called, it affects all subsequent calls to dw.ac.capture until the next call to dw.ac.applyContext. For example, a banner cycles through products 1 through 6, where products 1 through 3 are in category A, and products 4 through 6 are in category B. You can use the <isactivedatacontext> tag or call dw.ac.applyContext to set category A before product 1 appears, with this category staying in effect when the banner cycles to products 2 and 3. Because product 4 is in a different category, you must call dw.ac.applyContext before calling the dw.ac.capture function for product 4, to set the context to category B.

The following parameter sets the context for subsequent events that occur on the page. Call this function if automatic DHTML or customer activity changes the context of the page. This function doesn't cause data to be submitted for processing; it only changes values in the current context to be associated with data submitted later.

Configuration parameter Purpose Optional
String category The ID of the category browsed on the page Yes

Example

dw.ac.applyContext({ category: 'SomeCategoryID' });

For example, assume that a home page has a slot that shows the top selling product in each category in a carousel. Each time the carousel shows a new product, the context for that product is a different category. This function is called each time the carousel is scrolled, to set the appropriate category for the product now shown.

X Privacy Update: We use cookies to make interactions with our websites and services easy and meaningful, to better understand how they are used and to tailor advertising. By continuing to use this site you are giving us your consent to do this.