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: and*Object or Array*/ data)

The function is used to collect analytics information for products that can't be guaranteed to appear. In the previous examples, the 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 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 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  

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


This example is part of the app.js file in the SiteGenesis cartridge.{ id : $(this).text(), type : });


For each product specified in a call to the 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 function.

Constant value Description A product shown in detail, as for a product detail page A product shown as a recommendation to the customer A product shown as a hit in search results 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.*Object*/ configs)

Use the 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 function to associate a new category.

Each time the function is called, it affects all subsequent calls to until the next call to 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 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 before calling the 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{ 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.