--- title: Example Implementations by Page Type slug: js-api/methods-by-pagetype description: Overview of what Monetate JavaScript API method calls should be implemented for a retail site's homepage, product list pages, product detail pages, cart page, checkout page, and purchase page image: https://archbee-image-uploads.s3.amazonaws.com/ceIfEvQHzQk1IVxoRWUh7/K9eTL4jKm7UQINb6zNziJ-20250912-181225.png docTags: createdAt: 2024-05-21T18:14:58.555Z --- To better understand how to implement key Monetate JavaScript API method calls on your site, consider these examples from a hypothetical online clothing retailer. ::::ExpandableHeading ## 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](https://dyzz9obi78pm5.cloudfront.net/app/image/id/64f7726ba9ed1e652175f372/n/retail-site-fifthlevelfashion-homepage.png) 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](https://docs.monetate.com/docs/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](docId\:sMKHQB02vPvMs-RhqI3Iw) method, the `main` value, and the [trackData](docId\:gcm0H169GurCQMv6sBota) method. :::CodeblockTabs Home Page Example ```javascript // Home Page Example window.monetateQ = window.monetateQ || []; window.monetateQ.push(["setPageType", "main"]); window.monetateQ.push(["trackData"]); ``` ::: ### Monetate Inspector View To verify that you've correctly implemented your site's main page, launch the [Monetate Inspector browser plug-in](https://docs.monetate.com/docs/install-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](https://dyzz9obi78pm5.cloudfront.net/app/image/id/64f772e003e14011bd6189b4/n/monetate-inspector-components-tab-fifthlevelfashion-homepage-page-type-main.png) :::: ::::ExpandableHeading ## 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](https://docs.monetate.com/docs/action-conditions#with-data-tracking). :::hint{type="info"} 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](docId\:z7zs1BulqPT_0Z1CoYHww) for more information. ::: ### Code Example In this code example, the product list page has the [setPageType](docId\:sMKHQB02vPvMs-RhqI3Iw) method with the `index` value. It also uses the [addProducts](docId:3PjolBdlNPr_npNubE34U) method, which communicates to Monetate the products a customer views while they browse an index page. The example also contains the [trackData](docId\:gcm0H169GurCQMv6sBota) method call to send the collected data to the Monetate platform. :::CodeblockTabs addProducts Example ```javascript // addProducts Example window.monetateQ = window.monetateQ || []; Window.monetateQ.push(["setPageType", "index"]); window.monetateQ.push([ "addProducts", [ { "productId": "pidString1", "sku": "optionalSkuString1" }, { "productId": "pidString2", "sku": "optionalSkuString2" }, { "productId": "pidString3", "sku": "optionalSkuString3" }] window.monetateQ.push([ "trackData" ]) ]); ``` ::: ### Monetate Inspector View To verify that you've correctly implemented your site's index page, launch the [Monetate Inspector browser plug-in](https://docs.monetate.com/docs/install-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](https://dyzz9obi78pm5.cloudfront.net/app/image/id/64f7764255d0a961a401dc33/n/monetate-inspector-components-tab-fifthlevelfashion-homepage-page-type-index-product-ids-row.png) :::: ::::ExpandableHeading ## 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](https://dyzz9obi78pm5.cloudfront.net/app/image/id/64f7788dfaa07630c05723a4/n/retail-site-fifthlevelfashion-product-detail-page.png) ### Code Example :::hint{type="info"} Although both product ID (PID) and SKU are [required in a product catalog](https://docs.monetate.com/docs/product-catalog-specification#required-attributes), 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. ::: :::CodeblockTabs Product Page Example ```javascript // Product Page Example window.monetateQ = window.monetateQ || []; window.monetateQ.push([ "addProductDetails", [{ productId: "pidString", sku: "optionalSkuString" }] ]); window.monetateQ.push([ "trackData" ]); ``` ::: ### Monetate Inspector View To verify that you have correctly implemented your site's product page, launch the [Monetate Inspector browser plug-in](https://docs.monetate.com/docs/install-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](https://dyzz9obi78pm5.cloudfront.net/app/image/id/64f7771c3f0b6a33c820ddc5/n/monetate-inspector-components-tab-event-viewproduct-viewpage-page-type-product-products-row.png) In this example, the product detail page has the [setPageType](docId\:sMKHQB02vPvMs-RhqI3Iw) method with the value of `product`. The [addProductDetails](docId\:zlbUl8IBXhdEaLdjWTMus) 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](docId\:gcm0H169GurCQMv6sBota) method to send the collected data to Monetate. :::: ::::ExpandableHeading ## 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](https://dyzz9obi78pm5.cloudfront.net/app/image/id/64f77b02554e6e1ac118bf8f/n/retail-site-fifthlevelfashion-cart-page.png) To verify that you've correctly implemented your site's cart page, launch the [Monetate Inspector browser plug-in](https://docs.monetate.com/docs/install-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](docId\:sMKHQB02vPvMs-RhqI3Iw) method with cart as its value. The [addCartRows](docId\:Y-wcMRn_146QuOtE7NjFt) is also present. It also contains the [trackData](docId\:gcm0H169GurCQMv6sBota) method to send the collected data to Monetate. :::CodeblockTabs Cart Page Example ```javascript // Cart Page Example window.monetateQ = window.monetateQ || []; window.monetateQ.push(["setPageType", "cart"]); window.monetateQ.push(["addCartRows", [{ "productId": "750518703299", "quantity": 1, "unitPrice": "299.99", "currency": "USD" }]]); window.monetateQ.push(["trackData"]); ``` ::: The `addCartRows` method is like the [addProductDetails](docId\:zlbUl8IBXhdEaLdjWTMus) 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](https://dyzz9obi78pm5.cloudfront.net/app/image/id/64f7626d6bf53f603f4f6623/n/monetate-inspector-components-tab-event-viewpage-viewcart-page-type-cart-cart-products-product-id-product-sku.png) :::: ::::ExpandableHeading ## 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](https://dyzz9obi78pm5.cloudfront.net/app/image/id/64f77bb1d7bcb76fb061a694/n/retail-site-fifthlevelfashion-checkout-page.png) ### Code Example In this example, the checkout page doesn't track any specific attributes. Therefore, the code snippet contains only the [setPageType](docId\:sMKHQB02vPvMs-RhqI3Iw) method with `checkout` as its value along with the [trackData](docId\:gcm0H169GurCQMv6sBota) method. :::CodeblockTabs Checkout Page Example ```javascript // Checkout Page Example window.monetateQ = window.monetateQ || []; window.monetateQ.push(["setPageType", "checkout"]); window.monetateQ.push(["trackData"]); ``` ::: ### Monetate Inspector View To verify that you've correctly implemented your site's checkout page, launch the [Monetate Inspector browser plug-in](https://docs.monetate.com/docs/install-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](https://dyzz9obi78pm5.cloudfront.net/app/image/id/64f77c2f83744638126c0cf9/n/monetate-inspector-components-tab-page-type-checkout.png) :::hint{type="warning"} 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 Monetate Technical Support portal (support.monetate.com) 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. ::: :::: ::::ExpandableHeading ## 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](https://dyzz9obi78pm5.cloudfront.net/app/image/id/64f77fe447df0a6f974125b2/n/retail-site-fifthlevelfashion-purchase-confirmation-page.png) ### Code Example The purchase page has the [setPageType](docId\:sMKHQB02vPvMs-RhqI3Iw) method with the value of `purchase`. The [addPurchaseRows](docId\:FNV9UUKQMKGlIdpGCa_5Z) method is also present and contains the same information as the [addCartRows](docId\:Y-wcMRn_146QuOtE7NjFt) method, except that when the [trackData](docId\:gcm0H169GurCQMv6sBota) 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. :::CodeblockTabs Purchase Page Example ```javascript // Purchase Page Example window.monetateQ = window.monetateQ || []; window.monetateQ.push(["setPageType", "purchase"]); window.monetateQ.push(["addPurchaseRows", [{ "purchaseId": "00004001", "productId": "750518703299", "quantity": 1, "unitPrice": "299.99", "currency": "USD" }]]); window.monetateQ.push(["trackData"]); ``` ::: ### 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 :::hint{type="warning"} 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. :::CodeblockTabs Purchase Page Example with a Discount ```javascript // Purchase Page Example with a Discount window.monetateQ.push([ "addPurchaseRows", [{ "purchaseId": "73893797", "productId": "a123", "quantity": "1", "unitPrice": "99.99", "currency": "EUR" }, { "purchaseId": "73893797", "productId": "DISCOUNT", "quantity": "1", "unitPrice": "-19.99", "currency": "EUR" }] ]); ``` ::: ### Monetate Inspector View To verify that you've correctly integrated your site's purchase page, launch the [Monetate Inspector browser plug-in](https://docs.monetate.com/docs/install-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](https://dyzz9obi78pm5.cloudfront.net/app/image/id/64f76540b43da86178047136/n/monetate-inspector-components-tab-event-viewpage-viewpurchase-page-type-purchase-cart-products-product-id-product-sku.png) ::::