Annotating Pages for the Google Checkout Shopping Cart

The Google Checkout shopping cart uses JavaScript to extract information about your products and shipping options from the HTML on your web page. The JavaScript relies on special CSS annotations to identify information to extract.

This page includes the following information:

• The Including Google Checkout shopping cart JavaScript section explains how to modify your web pages to include the JavaScript files that enable the shopping cart to work.

• The Understanding CSS Annotations section describes the way that the shopping cart extracts information about your products and your shipping costs or shipping options from your web pages. This section also explains how the shopping cart extracts information from different types of HTML elements.

After familiarizing yourself with the basic rules for adding CSS annotations to your page, the following pages will help you to actually annotate your pages:

• The Annotating Pages with Product Data document provides several examples that show how to annotate a web page with different types of product information. This document also lists all of the CSS class names that you can use to provide product information.

• The Annotating Pages with Shipping Information document explains different ways that you can specify either shipping costs or shipping options for your products and orders. This document provides examples that show several ways to identify shipping costs using CSS annotations. This document also explains how you can use the functionality of basic Google Checkout HTML integrations to provide multiple shipping options, to charge different rates for different shipping options, or to instruct Google to calculate shipping costs for FedEx, UPS or USPS shipping methods.

Including Google Checkout shopping cart JavaScript

Add the following code snippet just before the </body> tag on your page. The mid parameter, which is highlighted in the URL in the code sample, identifies the merchant for the shopping cart. Change the parameter value, which is currently MERCHANT_ID to your merchant ID. (See step 2 of the sign-up instructions for information about how to find your merchant ID.)

<script id="googlecart-script" type="text/javascript"
  src="http://checkout.google.com/seller/gsc/v2/cart.js?mid=MERCHANT_ID"
  currency="USD">
</script>

U.K. merchants should also update the value of the currency attribute from USD to GBP.

Enabling Google Analytics with your Shopping Cart

To add Google Analytics tracking to your shopping cart integration, add the aid parameter to the <script> tag shown in the example above. Set the aid parameter value to the Analytics tracking code for your site. A Google Analytics tracking code has the format UA-#######-# and is associated with a particular Google Analytics profile.

Key point: If you use the aid parameter in your shopping cart integration, then you also need to remove any Google Analytics code that appears on the same page as the cart.

The HTML snippet below shows how a Google Analytics tracking code would appear in the HTML code for your web page. Note that you need to change the sample tracking code (UA-8883888-8) to your own tracking code.

<script id="googlecart-script" type="text/javascript"
  src="http://checkout.google.com/seller/gsc/v2/cart.js?mid=MERCHANT_ID"
  aid="UA-8883888-8"
  currency="USD">
</script>

In addition, to track Google Checkout orders, you must enable e-commerce reporting for your website in your Google Analytics account. The following steps explain how you enable e-commerce reporting for your website:

1. Log in to your Google Analytics account.

2. Click the Edit link next to the profile you want to enable. This link appears in the Settings column.

3. On the Profile Settings page, click the Edit link in the Main Website Profile Information box.

4. Change the selected E-Commerce Website radio button from No to Yes.

Understanding CSS Annotations

When your customer adds an item to the shopping cart (or clicks a Buy Now button to proceed directly to Google Checkout to buy the item), the JavaScript parses the HTML on your web page to locate information about that item. The following HTML snippet shows a simple example:

<div class="product">
  <img class="product-image" src="mug.jpg"/>
  <span class="product-title">Travel Mug</span>
  <span class="product-price">$4.99</span>
  <div class="googlecart-add-button"></div>
</div>

This example shows a <div> tag that uses the CSS product class. That tag contains several other tags that use CSS classes to identify product data – an image, product title and price – as well as an add-to-cart button. (The add-to-cart button is defined by the <div> tag that uses the CSS googlecart-add-button class.) When the customer clicks this element to add the mug to the shopping cart, the JavaScript first identifies the parent element that uses the CSS product class. Then, the JavaScript extracts information about the mug from the other tags inside that parent element.

Key Point: The JavaScript only processes elements that appear within a tag that uses the CSS product class. For example, in the HTML snippet above, if the price (and the product-price class) appeared outside of the <div> element, the shopping cart JavaScript would not identify a price for the item.

The following table lists different HTML elements and identifies the information that the shopping cart JavaScript will extract from each element. As noted above, these elements must appear within an element that uses the CSS product class.