On a Ecommerce website, there are a serie of micro-conversions that have to be completed before the macro-conversion, the sale, can happen. Adding the Product to Cart is one important micro-conversion. If you aren't tracking, analyzing and optimizing this, you are missing insight in buying behaviour, and money are most likely left on the table.
Tracking this is often done by programming code into the Ecommerce solution (that may take some time/cost extra money since you will probably have to involve other people to do the programming/implementation, and then you have to wait for the release). To get around this problem I track this with some help from javascript and jQuery.
Scripts in this blog post are not "out of the box", so you will have to rewrite them to suit your needs. It's your HTML structure and elements that defines what your script will look like.
Tracking Add to Cart in Google Analytics
I track products added to cart using Event Tracking. Although Event Tracking is great for this task, Events have their limitations. These are the questions I will have answered with my Add to Cart tracking:
- Which product where added to cart?
- How many items where added to cart?
- What was the product value (price*items)?
- Was it the main product on the page, or was it a related product?
- Are visitors adding products to the cart from the frontpage or category pages?
- Are products Added to Cart bought?
If you are familiar with the Event Tracking syntax, you know that an Event is built up by Category, Action, Label and Value.
If you take a look at the list above, you will see that all the things I want to know can't be fitted into 1 Event tracker. With other words, we will have to run several Event trackers when a product is Added to Cart.
This is how my Events are organized. Red text means that this information is collected from the page using jQuery and javascript. The Button tracking tells me if this product is added to cart as a related product, or directly from the frontpage or a category page.
| Category | Action | Label | Value |
| Add to Cart | Items | Product Name | Number of Items |
| Add to Cart | Sum | Product Name | Product Price*Number of Items (No decimals) |
| Add to Cart | Buy Button Big | Product Name |
As you can see from the report below, sometimes Event 2 & 3 aren't tracked (can happen if the page does a refresh. We don't live in a perfect data world unfortunately). It's therefor important to put the most "valuable" tracker first in your script. For me that is the "Sum tracker".
Even if this data tell you a story inside the Google Analytics interface, this data begs for Excel. Here I combine Sum & Items data, graph the data, and I can also "score" Added to Cart products against sold or removed from cart products.
To extract the data from Google Analytics to Excel I use NextAnalytics, an Excel plugin that I highly recommend. It gives you a ton of possibilites for slicing and dicing data from Google Analytics, Facebook, Twitter and more, and the support is awesome.
Tracking the Main Product Added to Cart
Tracking the main product is the easy part. Imagine this is (part of) your HTML on the product page.
Product HTML
- <div class="productinfo">
- <h1>Your Product Name</h1>
- <div class="price">USD 268.00</div>
- <input class="quantity" type="text" value="1" name="prodQuantity">
- <input class="buy" type="submit" value="BUY" name="addToCart1">
- </div>
jQuery/javascript for tracking product
You will at least have to replace the code in red. What to replace with depends on your HTML.
- <script type="text/javascript">
- $(document).ready(function() {
- $('input.buy').on("mousedown tap", function() { // Using "tap" to collect iPad/iPhone data
- var productName = $.trim($('.productinfo h1').text());
- var productPrice = $.trim($('.productinfo .price').text().replace(/\,/g,".")) // If you are using , (comma) as a 1000 separator, change this RegEx to (/\,/g,"")
- productPrice = Math.round(productPrice.replace(/(?!\.)[\D\s]/g,"")); // Decimals are not allowed in Events. We strips away everything except numbers and . (dot), and then we round the number.
- var productQuantity = $.trim($('.productinfo .quantity').val());
- var totalSum = productPrice*productQuantity;
- if (productQuantity > 0) { // Only track the product if quantity > 0
- // Send data to Google Analytics
- _gaq.push(['_trackEvent', 'Add to Cart', 'Sum', productName, Number(totalSum)]);
- _gaq.push(['_trackEvent', 'Add to Cart', 'Items', productName, Number(productQuantity)]);
- _gaq.push(['_trackEvent', 'Add to Cart', 'Buy Button Big', productName]);
- }
- });
- });
- </script>
Tracking Related Products Added to Cart
(or products on the frontpage or category pages).
This can be a little bit more difficult to track since you will have several HTML elements with the same naming.
Related Product HTML
Below is an HTML example that is the same for all products listed.
- <div class="productWrapper">
- <h4>My Related Product 1</h4>
- <img src="/file/my-related-product-1.jpg" alt="My awesome product" />
- <p>My awesome short description.</p>
- <div class="price">$ 23.99</div>
- <input class="quantity" type="text" value="1" name="prodQuantity2">
- <input class="quickBuy" type="submit" value="BUY" name="addToCart2">
- </div>
The HTML above is demonstrated below. Click "Add to Cart" to see the script in action.
My awesome product
This product has a dollar sign in front of the price just to demonstrate that the script handles that.
Another awesome product
This product has a NOK sign after the price just to demonstrate that the script handles that and , (comma).
jQuery/javascript for tracking Related Products
You will at least have to replace the code in red. What to replace with depends on your HTML.
- <script type="text/javascript">
- $(document).ready(function() {
- $('input.quickBuy').on("mousedown tap", function(AtC) { // Using "tap" to collect iPad/iPhone data
- var prodElement = $(this).parent(); // Number of .parent() you have to use is based on your HTML structure. Ex. $(this).parent().parent();
- var productName = $.trim($(prodElement).find("h4").text()); // Find the product name based on H4 heading.
- var productPrice = $.trim($(prodElement).find('.price').text().replace(/\,/g,".")); // If you are using , as a 1000 separator, change this RegEx to (/\,/g,"")
- productPrice = Math.round(productPrice.replace(/(?!\.)[\D\s]/g,"")); // Decimals are not allowed in Events. We strips away everything except numbers and . (dot), and then we round the number.
- var productQuantity = $.trim($(prodElement).find('.quantity:first').val()); // Get Quantity using class-name. Change this to match your HTML.
- var totalSum = productPrice*productQuantity;
- if (productQuantity > 0) { // Only track the product if quantity > 0
- // Send data to Google Analytics
- _gaq.push(['_trackEvent', 'Add to Cart', 'Sum', productName, Number(totalSum)]);
- _gaq.push(['_trackEvent', 'Add to Cart', 'Items', productName, Number(productQuantity)]);
- _gaq.push(['_trackEvent', 'Add to Cart', 'Buy Button Quick', productName]);
- }
- });
- });
- </script>
So how can this be easier than just get somebody to implement the necessary scripts into the HTML of the page? The answer to that is Tag Management Systems, which makes you less dependent of the IT-department.
The demo script on this page is served through Google Tag Manager.
Google Universal Analytics
Update: 2013-01-13
With the next version of Google Analytics, called Google Universal Analytics, only 1 Event is needed since additional data can be tracked as Custom Dimensions and Metrics. This will improve the data quality, and make the data more accessible in Google Analytics.
Below is an example how Related Products could be tracked with Universal Analytics.
- <script type="text/javascript">
- $(document).ready(function() {
- ....original script here
- if (productQuantity > 0) { // Only track the product if quantity > 0
- // Send data to Google Analytics
- ga("send", "event", {eventCategory: "Add to Cart", eventAction: "Items", eventLabel: productName, eventValue: Number(productQuantity), metric1: Number(totalSum), dimension1: "Buy Button Quick"});
- }
- ...original script here
- </script>
Some final words
A big thank you to Maarten Berge who helped med out with the first version of the jQuery/javascript for tracking related products.
If you think the code could be improved, feel free to comment (I'm not a programmer).
I'm also curious about how you are tracking products Added to Cart in Google Analytics, and how you are using this data for optimization?