Baseline Implementation

Step 1: Implement the Monetate Tag

The Monetate tag is a small chunk of code that enables Monetate to communicate with your site. There are two tag options: a synchronous tag and an asynchronous tag. Refer to Tag Comparison to better understand the benefits of each tag type, depending on your requirements.

If you need assistance deciding which tag to use, submit a support ticket using the to discuss your business needs and then determine which tag type is right.

The tag code must exist in the element of every page on which Monetate should run. Typically, the code is inserted in only one location: the site's main template file. This process can take a matter of minutes, depending on your business' internal processes and release cycles.

Purpose

The Monetate tag is the foundation for using Monetate to test, personalize, merchandise, and measure anything on your site. Once you install the tag, you gain the ability to do the following:

Synchronous Tag

Your site's code guarantees priority for the synchronous Monetate tag. This allows the tag to display all content at the same time and deliver a consistent experience for your customers.

The synchronous tag loads via a blocking script and has the potential to slightly extend page load time. This tag doesn't display any visual artifact of your native site before Monetate's content renders. Although Monetate cannot guarantee that this call completes within a specified time range, internal testing revealed no material impact on the end user's experience.

For the synchronous tag to be most performant, use content masking for any action that you create using Action Builder. See Content Masking in the Monetate Knowledge Base for more information.

The synchronous tag's content consists of two components: entry.js and custom.js.

entry.js

The entry.js component does the following:

  • Adds any entry masks
    • Hides content affected by Monetate experiences
    • Optionally, applies any full-page experiences
    • Redirects the page if a Full-Page Test (FPT) experience matches the current page and the user is within the experiment group
    • Requests the custom.js file asynchronously
  • Updates when changes occur to Monetate experiences or to the account

The client site waits until this file loads and runs.

custom.js

The custom.js component is an asynchronous script that does the following:

  • Reports track data (for example, URL, user, browser, etc.) and applies experiences
  • Rarely changes

Akamai manages both scripts. Monetate pushes updates to them when changes occur.

The synchronous tag loads in the same amount of data as the asynchronous version, but the browser caches most of this process for much longer, resulting in less time spent downloading scripts.

Here's an example of the synchronous tag code:

Synchronous Monetate Tag Example


Asynchronous Tag

The asynchronous Monetate tag loads independent of your site. It doesn't affect your site's load time or performance. Due to the priority given to your site's content when the browser loads your page and the robust nature of the Monetate platform, use of the asynchronous tag includes the slight possibility that customers may see a visual artifact of your native site experience before the Monetate-optimized experience renders.

Technical Details

  • Single script request that enters the page asynchronously
  • Reports track data (for example, URL, user, browser, etc.) and applies experiences
  • Served from Akamai CDN

The client site continues to load during the request.

Here is an example of the asynchronous tag code:

Asynchronous Monetate Tag Example


Tag Comparison

Monetate supports both tag types, so the choice of which one to use is up to you. Here are a few things to consider when making your decision:

  • There's no extra cost regardless of which tag you choose.
  • You can switch between the synchronous and asynchronous tag to check for differences in performance.
  • Changing tags doesn't disrupt your Monetate service in any way.
  • All Monetate features remain functional regardless of which tag you use.
  • If you're concerned that customers might see a visual artifact from your native site, then you should use the synchronous tag.

This table offers a side-by-side comparison of the two tags.

Synchronous Tag

Asynchronous Tag

Served from Akamai CDN

Served from Akamai CDN

Monetate fully functional

Monetate fully functional, except for Full-Page Test experiences

All Monetate features available

All Monetate features available

Two script requests (entry.js and custom.js)

Single script request

Blocking tag

Nonblocking tag

Guarantees Monetate tag load priority

Loads independent of your site

Prevents visual artifacts from occurring

Visual artifacts are possible on your site

Use content masking for Edit and Hide actions

Cannot use content masking

11 ms response time (average)

13 ms response time (average)

Monetate doesn't collect conversion data for staging, development, testing, or QA tag instances for either version of the Monetate tag. It only collects it for production instances. You can check which tag instance each of your accounts has by looking in the account selector in the top navigation bar of the platform.

Callout of the server environment for each account shown in the account selector in the Monetate platform


If PRODUCTION appears next to an account listed in the selector, then conversion data is collected for it.

Installing the Tag

Follow these steps to obtain and install the code for the Monetate tag.

Although Monetate does not recommend using a tag management system (TMS) to install the Monetate tag, the tag does work as expected with systems such as Tealium iQ. For more information, consult your TMS provider and submit a support ticket using the .

  1. In the Monetate platform, click the settings cog and then select Integration.
    Callout of the Integration option in the settings menu
    
  2. Click the Tag tab.
    The Tag tab of the Integration page of the Monetate platform settings
    
  3. Use the toggle to select the synchronous or asynchronous version of the Monetate tag.
    Animated demonstration of a user switching a toggle to view the synchronous version and then the asynchronous version of the Monetate tag
    
  4. Copy and paste the tag code into the first line of the <head> element on every page of your site.
    Callout of the asynchronous version of the Monetate tag code in the 'head' element of the HTML code for a site
    

You can use the Monetate Inspector to verify that the tag is working.

Tag Management Systems & the Monetate Tag

While you can install the Monetate tag using a tag management system (TMS), the timing of the TMS to the page can hinder performance if the TMS cannot place the tag onto the page prior to the DOMContentLoad window event.

Step 2: Capture Site Structure with Page Types

The setPageType method call sends the page type for a page that a site visitor is on to Monetate. This information also allows you to limit actions to specific page types when you add action conditions to Web experiences.

For example, if you want to display a hero banner only on your site's home page, then you must consider all of the possible URLs:

  • http://example.com
  • http://example.com/
  • https://example.com
  • https://example.com/
  • http://www.example.com
  • http://www.example.com/
  • https://www.example.com
  • https://www.example.com/

By defining a page type, you can reliably target visitors with "pagetype=main" and not need to know every possible URL or write complex regular expressions to define the right URLs. Instead, add an action condition based on the information passed to Monetate from the setPageType API method.

You can pass any string value for page type, but Monetate recommends using a single word with lowercase values because they're easier to remember.

Key pages to set page types for include the home page, index page, search page, product detail page, cart page, checkout page, and purchase confirmation page. You can include anything you like. Other page types may include store locator pages, Contact Us pages, and more.

Step 3: Capture Products on List Pages

The addProducts method sends to Monetate the product IDs and, optionally, the product SKUs that are rendered on an index or search page (for example, fifthlevelfashion.com/men/shirts.html). Because it enables you to target experiences at the product level on index and search pages, you must include this method in the page template for all index and search results pages.

For example, you want to show an action on a product index or search page. To accomplish this goal, you use the On index page action condition. This setup means that when you use this action condition, the action appears only on any index or search page on which those product IDs exist.

Sending both product IDs and product SKUs enhances the capabilities of recommendations and product-badging actions.

Product SKUs or IDs cannot exceed 50 characters.

If you have facet or filter functionality on a page that updates with AJAX or changes state asynchronously to display new data, you must add a retrack to ensure Monetate receives the changing product IDs on the page. Refer to Page Retracks for more information.

The addProducts method doesn't trigger the product behavioral WHO targets. These are sourced via the addProductDetails, addCartRows, and addPurchaseRows methods.

Step 4: Capture Product Details

The addProductDetails method is used to add items when a customer views a more detailed product description on a product detail page. This is usually linked from an index or search page thumbnail. Some product detail pages may have several items described.

For example, if you implemented the addProductDetails method and you want to run an experience based on a product viewed on the product detail page, then you would navigate to the WHO part of the experience and then select the relevant data target (for example, on the product detail page with the product viewed equals "yellow shirt").

Although both product ID (PID) and SKU are required in a product catalog, Monetate only requires you to implement method calls for PID. That said, you should implement SKU if you intend to use the Product Recommendations feature.

addProductDetails Example
Example with SKU
Example with Multiple SKUs


Product SKUs or IDs cannot exceed 50 characters.

Sending SKUs is only required if you're using Product Recommendations.

Step 5: Capture Cart Information

The addCartRows method sends information about the products that visitors have added to their cart to Monetate. You should make a call to this method on every page or at least on any page on which the basket has the potential to change. Implementing the addCartRows method on these pages is important because it allows you to use experiences such as abandoned cart messaging, delivery threshold messaging, and targeted upsell opportunities based on products in a visitor's cart.

For example, if you've implemented addCartRows and want to run an experience to target visitors with products in their carts above or below a certain value, you can configure the relevant data target, such as product in cart under $50, in the WHO settings of the experience.

The addCartRows method only captures the product price and no separate delivery, tax, or promotion costs.

addCartRows Example
Empty Cart Example


The addCartRows method requires the following properties: productId, quantity, and unitPrice. Optional properties include currency and SKU. Non-US sites must include currency.

If your cart updates with AJAX or changes state asynchronously to display new data, you must add a retrack to ensure Monetate is aware of the change. Refer to Page Retracks for more information.

Step 6: Capture Site Conversions

The addPurchaseRows method sends information about the products that a customer has purchased to Monetate and specifies details about that product (for example, quantity, purchase ID, amount, and currency). Implementing this method call is important because it allows you to target experiences based on past purchases and also ensures Monetate can measure the success of experiences that you launch. Include the addPurchaseRows method on purchase confirmation pages.

For example, if you've implemented the addPurchaseRows method and want to run an experience based on a previously purchased product, configure the relevant data target, such as the previously purchased product equals "shoes," as part of the WHO settings of the experience.

The purchaseId property must be the same across all rows within addPurchaseRows. The value it contains must be unique across visitors so that you can validate the implementation by matching purchases collected by Monetate with your own data.

addPurchaseRows Example


The addPurchaseRows method requires the following properties: purchaseId, productId, quantity, and unitPrice. Optional properties include currency and SKU. Non-US sites must include currency.

Integrate Third-Party Analytics

Passing data from Monetate to your own third-party analytics provider enables more granular reporting.

Monetate allows you to pass experience data to any analytics provider that can accept data within the browser so that your analysts can see the visitors who've been exposed to a Monetate experience. The data passed to your analytics provider includes the experience ID, experience name, and which experience variant the visitor saw.

See the Third-Party Analytics category in the Monetate Knowledge Base for how to integrate your Monetate implementation with such analytics platforms as Google Analytics, Contentsquare, and others.

Implement a Product Catalog

You must upload a product catalog to use certain Monetate features, such as Product Recommendations and product-badging actions. Uploading a product catalog has the added benefit of allowing you to target products in the WHO settings of an experience by hierarchy, category, or product attribute that you've specified within the product catalog. Monetate highly recommends that you implement a product catalog because doing so unlocks additional capabilities within the platform.

See the Product Catalog Datasets category of the Monetate Knowledge Base for more information on creating a product catalog dataset schema and options to upload and update product catalog files in the Monetate platform.