Add JavaScript Calls for DHTML Widgets

Some sites have pages that contain dynamic content that only appears to storefront customers in certain circumstances. For example, SiteGenesis features carousel widgets that cycle through several products when arrows are clicked, or rotating banners that cycle through several 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. The products are included 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 is called in two cases. The function is called when the customer clicks an arrow to move the carousel and when the banner automatically rotates to show the next product.

Each time the function is called, analytics data is collected. 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, only call the capture function 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 (see 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 A product shown as a constituent of a product set

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

These examples show how to use the function to track product view, search result view, and recommendations view in dhtml.

  •{ id: pid, type: });
  •{ id: pid, type: });
  •{ id: pid, type: });
Note: Gathering these analytics requires that tracking is enabled during the shopper's session.*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 could 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. 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. This category stays in effect when the banner cycles to products 2 and 3. Because product 4 is in a different category, 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.

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