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.
﻿
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
// Home Page Example
window.monetateQ = window.monetateQ || [];
window.monetateQ.push(["setPageType", "main"]);
window.monetateQ.push(["trackData"]);
// 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. If the page type has been implemented successfully, you see main listed 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
// 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"
  ])
]);
// 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. If the page has been implemented successfully, then index appears 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.
﻿
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
// Product Page Example  
window.monetateQ = window.monetateQ || [];
window.monetateQ.push([
  "addProductDetails", [{
    productId: "pidString",
    sku: "optionalSkuString"
  }]
]);
window.monetateQ.push([
  "trackData"
]);
// 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. If the page has been implemented successfully, you see product in the Page Type 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.
﻿
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
// 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"]);
// 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﻿ 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.
﻿
Checkout Page
The checkout page allows a customer to see a summary of 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
// Checkout Page Example
window.monetateQ = window.monetateQ || [];
window.monetateQ.push(["setPageType", "checkout"]);
window.monetateQ.push(["trackData"]);
// 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. If the page has been implemented successfully, you see checkout listed 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.
﻿
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
// 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"]);
// 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
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
// 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"
  }]
]);
// 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. If the page type has been implemented successfully, you see purchase in the Page Type row.
﻿





﻿
Updated 25 Sep 2024
Method Calls and Monetate Features Unlocked
trackData