Getting Started with the JavaScript API

the monetate javascript api allows you to pass page level data to the monetate platform it follows common ecommerce patterns and is straightforward for experienced front end developers each method call is categorized by the type of page for which it is intended or most often used components of the baseline implementation the monetate javascript api implementation consists of four components monetate tag the monetate tag is a block of javascript code that you place within your site's global \<head> element the tag gives monetate the ability to access a page's dom to drive site changes and the ability to track and target visitors based on contextual in session data points (for example, ip address, device type, marketing referral channel) monetate javascript api the monetate javascript api consists of javascript method calls that are easy to implement and maintain the api methods allow you to use monetate to track and target visitors based on onsite behavior (for example, products browsed, products purchased, amount in cart), to capture conversions, and to better understand the structure of your site third party analytics when you implement third party analytics, monetate can pass all event based activity to your web analytics provider so that your analytics team can understand which visitors have seen which experiences in the monetate platform product catalog you must upload a product catalog to use monetate's merchandising capabilities and to target products in the who settings of a web experience by any hierarchies, product type, or product attributes specified within the catalog although uploading a product catalog isn't required for day 1 unless you're using monetate's recommendations and badging features, nevertheless you should upload one as soon as is feasible timing expectations the time it takes to add the monetate tag and the required method calls that are important to your business can vary the number of method calls you must add, your intended use of monetate, and the skill set of the person completing these tasks can all impact how long it takes to complete the process for more information about who should complete the various steps of this process and what to expect, refer to getting started with the javascript api docid\ val7agkzfl5p5vgpak4qv passing site data to monetate there are two steps to pass site data to monetate the first is to add the monetate tag to your site, and the second is to add method calls to your site to pass visitor data to monetate adding the monetate tag to your site allows you to develop actions with action builder , create and track events with event builder , and launch experiences method calls allow monetate to build a page map to better understand your site visitors it also allows you to use monetate's behavior based targeting and to unlock additional metrics in experience results beyond what's available out of the box for example, if you want to build an experience that considers what products specific customer segments buy or if you want to track kpis such as conversion rate and abandoned cart rate, you must use the method calls in the monetate javascript api these calls also allow you to track conversions from your site's shopping cart, track product details, or set page types to take full advantage of monetate monetate also supports various ecommerce connectors implementing monetate javascript api method calls the monetate javascript api allows you to send customer interactions with your site to monetate (for example, adding items to the cart, making a purchase, and more) this enables you to instruct monetate about your site structure and relevant interactions of any visitor, including the following assign page types based on page information and the anatomy of the page, and then use this information to tie actions to page types, which are groups of specific pages (for example, add an action condition in monetate so that an action only appears on product search pages) track visitor behaviors, including pages visited, categories searched, and products selected so that you can, for example, create an experience to segment any visitors who previously viewed men's shirts in the last 30 days track how a visitor moves through the funnel and measure different conversions (for example, view reporting dashboards in monetate that may state, "for this experience, split a shows a 10% uplift in conversion vs the control") adding api method calls you can add most monetate javascript api method calls directly to your site or via a tag management system (tms) anywhere within a page template you cannot, however, initialize the baseline api call matrix and trackdata methods using either of the aforementioned approaches implement monetateq at the top of the page template just below the monetate tag in the \<head> element of your site to ensure the object is initialized when calling other api methods implement trackdata at the bottom of the page template after all the content has been loaded callout of the monetateq and trackdata methods in a website's code the sample code in this screenshot shows monetateq inserted just below the code for the baseline implementation and trackdata inserted at the very bottom of the \<body> element what to implement to use monetate's features monetate has an array of features that are available to you as you pass more data from your site this table provides some context for what information the platform needs to accomplish certain things on your site i want to what do i need to implement? display banners on all pages or by url monetate tag display lightboxes on all pages or by url monetate tag execute html added or modified on all pages or by url monetate tag execute css on all pages or by url monetate tag display an experience on certain pages with a selector monetate tag display an experience on certain pages with information in a cookie monetate tag display an experience on certain pages with information in a javascript variable monetate tag display an experience on certain pages that contain text or a number on a page monetate tag display an action specific to the customer's page of entry monetate tag display an image action including dynamic geographic text or dynamic weather text monetate tag target pages with a certain html element, certain text, or numbers within a specified html element monetate tag target pages with a specific javascript variable or pages with specified text or number contained within a specific javascript variable monetate tag target pages with a specific cookie or pages with specified text or number contained within a specific cookie monetate tag target technographics monetate tag target us demographics monetate tag target us weather monetate tag target us locations monetate tag target visitor landing page (except custom variable and products out of stock), visitor time on site, visitor page views, last visit, number of sessions in past days, days since last visit, bounce rate, page views, and time on site monetate tag measure interactions, impressions, and url goals monetate tag display an action specific to products shown on page ids of products on a page target products viewed this visit, last visit, and products ever viewed product view events ( addproducts ) display product badges on select items product recommendations and product ids on multi product pages display product badges on select items product recommendations and product detail information on single product pages display a recommendations slider by product type product recommendations and a product catalog display specific products or the newest items added product recommendations and a product catalog display a recommendations slider with similar items, most frequently viewed items, recently viewed items, or items viewed after viewing a certain item product recommendations , a product catalog , and product view events ( addproducts ) display a recommendations slider with items purchased in addition to another item (purchased and also purchased) or items viewed in addition to another item (viewed and also viewed) product recommendations , a product catalog , product view events ( addproducts ), and purchase information ( addpurchaserows ) target categories or brands viewed during the current visit, last visit, or ever product recommendations , a product catalog , and product view events ( addproducts ) target out of stock products product recommendations , a product catalog , and product view events ( addproducts ) display an action specific to a customer's cart value or an image action including total merchandise in cart cart information ( addcartrows ) target products in cart or abandoned cart, amount in cart or abandoned cart, quantity in cart or abandoned cart cart information ( addcartrows ) measure add to cart rate and cart abandonment cart information ( addcartrows ) target categories or brands in the cart or abandoned cart product recommendations , a product catalog , and cart information ( addcartrows ) target average order size, last order size, days since last purchase, product purchased, last product purchased, product purchased in last days, purchased any product, purchase frequency, purchases made since a date, purchases made in a past number of days purchase information ( addpurchaserows ) target average order size, last order size, days since last conversion, product purchased, last product purchased, product purchased in last days, purchased any product, purchase frequency, purchases made since a date, purchases made in a past number of days conversion information ( addconversionrows ) measure lift in average order value, revenue per session, conversions, and new customer acquisitions purchase information ( addpurchaserows ) measure lift in average order value, revenue per session, conversions, and new customer acquisitions conversion information ( addconversionrows ) display a recommendations slider by top selling purchase count or top selling revenue product recommendations , a product catalog , purchase information ( addpurchaserows ), and conversion information ( addconversionrows ) display a recommendations slider by products purchased in addition to another purchased product product recommendations , a product catalog , product view events ( addproducts ), purchase information ( addpurchaserows ), and conversion information ( addconversionrows ) target categories purchased, categories last purchased, brands purchased, or brands last purchased product recommendations , a product catalog , purchase information ( addpurchaserows ), and conversion information ( addconversionrows ) display an action on certain pages page type ( setpagetype ) display an action on certain pages page category ( addcategories ) display an action specific to certain navigation breadcrumbs on the page breadcrumbs ( addbreadcrumbs ) display an image action that includes dynamic text related to nearest store locations store locations display an image action that includes other dynamic text custom variable ( setcustomvariables ) target customers who match a custom variable custom variable ( setcustomvariables ) target page type page type ( setpagetype ) target customers included or excluded from a dataset datasets and an on site id measure more complex custom milestones custom event key ( trackevent ) implementation checklist use this worksheet to keep track of your progress while you implement monetate on your site hold planning meeting with all stakeholders install monetate development tag to your development environment development of monetate javascript api in development environment quality assurance check of monetate javascript api in the development environment install monetate production tag to your production environment deploy monetate javascript api to your production environment quality assurance check of monetate javascript api in the production environment enable stealth mode complete test an implementation implementation user roles it's important to plan your monetate javascript api deployment with all the team members who'll be involved in using monetate in your organization when all the stakeholders get together during the planning stages, you can set clear goals and expectations of what the business user can do within the monetate platform monetate recommends the following internal team members for planning your implementation business owner project manager engineer(s) qa personnel the recommended baseline javascript api deployment includes the method calls that unlock many the platform's capabilities see what do you want to do on your site? for a complete listing of what features the api unlocks in the platform and how you can leverage them for experiences javascript development the first step to tracking your site data is putting the right person in charge of completing it typically, this person should be a software engineer, a back end developer, or someone who has experience with javascript who can tag your site with google tag manager or similar tagging systems ultimately, the person who completes the process must possess these qualifications install and use the monetate inspector browser plug in have the necessary access to modify site templates be able to request page specific data from your server (for example, a list of product ids shown on the current page) have enough familiarity with javascript to make api calls the time required to complete the implementation depends on the technical complexity of your site, the number of different page types/templates, the complexity of the data you want to report, and how easy it is to query your site's back end for that information as a rule of thumb, an engineer familiar with your site should need about 10 to 12 hours of undivided attention to complete the necessary development for the baseline monetate javascript api qa testing the next step in the process involves performing qa testing it should be performed by someone who has experience similar to the person who added the method calls or by a qa professional or a marketer who is very familiar with your site most importantly, qa testing should be completed by someone other than the person who added the method calls to your site the key to successful qa testing of your site is to check that all templates and page types that should pass data to monetate are doing so correctly ultimately, the person who completes qa testing must do the following use the monetate inspector to verify the accuracy of all the reported data complete a conversion on your site, if that's important to your business the time required to complete qa testing depends on the technical complexity of your site, the number of different page types/templates, the complexity of the data you want to report, and how easy it is to query your site's back end for that information as a rule of thumb, a person familiar with your site should need about 4 to 6 hours of undivided attention to complete qa testing api deployment to production after you complete qa testing your site's monetate javascript api in your development environment, you can move the api code to production ultimately, the person who completes the deployment to production must meet these qualifications have the necessary access to modify site templates be able to deploy tags to your site via the tag management system

Baseline Implementation