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 // 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 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 // 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 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 // 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 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 // 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 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 // 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 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 {{monetatesupportcontact}} 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 // 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" }] ]); 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