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.
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: 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 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 dw.ac.capture 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 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 (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 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 | 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 dw.ac.capture function to track product view, search result view, and recommendations view in dhtml.
-
dw.ac.capture({ id: pid, type: dw.ac.EV_PRD_DETAIL }); -
dw.ac.capture({ id: pid, type: dw.ac.EV_PRD_SEARCHHIT }); -
dw.ac.capture({ id: pid, type: dw.ac.EV_PRD_RECOMMENDATION });
dw.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 could 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. 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. This category stays in effect when the banner cycles to products 2 and 3. Because product 4 is in a different category, 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.