Method Calls

Example Implementations by Page Type

To better understand how to implement key Monetate JavaScript API method calls on your site, consider these examples from a hypothetical online clothing retailer.

Home Page

Your site's home page is its main page and is usually where customers land when they arrive.

Example of an online clothing retailer's home page


The home page is the main page type on your site. When you create a Web experience that targets an action on the home page, select the Page type = action condition option, and then type main to complete the action condition equation. With this action condition in place, the experience shows an action to qualified visitors on the home page. See Action Conditions in the Monetate Knowledge Base for more information.

Code Example

In this example, the main page doesn't track any specific attributes. Therefore, the code contains only the setPageType method, the main value, and the trackData method.

Home Page Example


Monetate Inspector View

To verify that you've correctly implemented your site's main page, launch the Monetate Inspector browser plug-in. If the page type has been implemented successfully, you see main listed in the Page Type row.

The Components tab of Monetate Inspector atop the landing page of a retailer's site, with 'main' in the Page Type row


Product List Page

A product list page is as any page that lists multiple products in a grid or list format for browsing. Search results pages and index pages are examples of product list pages.

Differentiating Index and Search Pages

Search pages also use the code format contained in this documentation since they normally follow the same page template for your site. Ensure that you use a different page type that is not index so that if you need an action to target index pages but not search pages, you then can easily do so with the Page Type= action condition.

If the product list page can load new items after the customer uses a sort or filter option on the page without a full page reload, then you must perform a retrack of the page to alert Monetate that new items are on the page and that it must reevaluate the page contents. See Page Retracks for more information.

Code Example

In this code example, the product list page has the setPageType method with the index value. It also uses the addProducts method, which communicates to Monetate the products a customer views while they browse an index page. The example also contains the trackData method call to send the collected data to the Monetate platform.

addProducts Example


Monetate Inspector View

To verify that you've correctly implemented your site's index page, launch the Monetate Inspector browser plug-in. If the page has been implemented successfully, then index appears in the Page Type row.

The Components tab of Monetate Inspector atop a product list page, with 'index' in the Page Type row


Product Detail Page

A product detail page is any page on your site that contain details for a product, such as available sizes, colors, models, etc.

Example of a product detail page on an online retailer's site


Code Example

Although both product ID (PID) and SKU are required in a product catalog, you're only required to implement method calls for PID. That said, you should implement SKU if you intend to use recommendations or target by SKU.

Product Page Example


Monetate Inspector View

To verify that you have correctly implemented your site's product page, launch the Monetate Inspector browser plug-in. If the page has been implemented successfully, you see product in the Page Type row.

The Components tab of Monetate Inspector, with 'product' in the Page Type row and product IDs and product SKUs in the Products row


In this example, the product detail page has the setPageType method with the value of product. The addProductDetails method is also present. It allows the Monetate platform to capture the specific details of the product that the customer is viewing. A unique identifier denotes details such as a product ID (PID).

The page also contains the trackData method to send the collected data to Monetate.

Cart Page

Your site's cart page is any page on which a customer can view what they currently have in their cart.

Example of an online retailer's cart page


To verify that you've correctly implemented your site's cart page, launch the Monetate Inspector browser plug-in. If the page has been implemented successfully, you see cart listed in the Page Type row.

Code Example

In this code example, the cart page has the setPageType method with cart as its value. The addCartRows is also present. It also contains the trackData method to send the collected data to Monetate.

Cart Page Example


The addCartRows method is like the addProductDetails method with a few notable additions. Instead of containing only the product ID for a given product, this method also contains such purchase information as unit price, quantity, SKU, and currency.

Monetate Inspector View

This screenshot shows the Components tab of Monetate Inspector. The Page Type row indicates that cart is the value passed by the setPageType method. The Cart Products rows show the required product ID, quantity, and unit price values passed by the addCartRows method.

The Components tab of Monetate Inspector tool, with 'cart' in the Page Type row and with product IDs, quantity, and unit price in the Cart Products rows


Checkout Page

The checkout page allows a customer to see a summary of order details.

Example of an online retailer's checkout page that contains a customer's order details


Code Example

In this example, the checkout page doesn't track any specific attributes. Therefore, the code snippet contains only the setPageType method with checkout as its value along with the trackData method.

Checkout Page Example


Monetate Inspector View

To verify that you've correctly implemented your site's checkout page, launch the Monetate Inspector browser plug-in. If the page has been implemented successfully, you see checkout listed in the Page Type row.

The Components tab of Monetate Inspector, with 'checkout'  in the 'Page Type' row


Recent updates to Safari Internet Tracking Intelligent (ITP) block third-party cookies on your site. This update means that Preview Mode and the Monetate Inspector browser plug-in may not work in Safari. Monetate has developed an alternative approach to delivering Preview Mode to the site. Submit a support ticket using the

 to have this option enabled for your account. No workaround is available at this time for Monetate Inspector. Monetate recommends using a different browser such as Chrome to use the Monetate Inspector tool.

Purchase Page

The purchase page of your site is the purchase confirmation page that appears after a customer completes a transaction.

Example of an online retailer's purchase confirmation page


Code Example

The purchase page has the setPageType method with the value of purchase. The addPurchaseRows method is also present and contains the same information as the addCartRows method, except that when the trackData method sends the collected data to Monetate, it indicates that the customer made the purchase rather than just putting one or more products into their cart.

Purchase Page Example


Using Discount Codes

Monetate doesn't support discount codes on your site out of the box. However, you can take a few steps to track and report on this data.

The first option is to use a product ID called DISCOUNT with a quantity of 1 and a negative price to reflect the discount

If the cart value is negative after the discount code, this situation may cause reports to display sales/transactions with negative values and thus possibly skew numbers within your reports.

The second option is to treat the discount or promotion as a line item within the cart and report it as such. If a discount or promotion affects cart items and not the total, ensure the price that you push to Monetate is the discounted price and not the original price. By pushing the discount price, you avoid having to also send a DISCOUNT line.

Purchase Page Example with a Discount


Monetate Inspector View

To verify that you've correctly integrated your site's purchase page, launch the Monetate Inspector browser plug-in. If the page type has been implemented successfully, you see purchase in the Page Type row.

The Components tab of Monetate Inspector, with purchase in the 'Page Type' row and a value in the Purchase ID row