Part of the buying process on an Ecommerce site are visitors removing products from the shopping cart.
Image may be NSFW.
Clik here to view.
Tracking this can be 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 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.
In this blog post you will find 2 different examples of shopping carts that hopefully will make it easier for you to do the rewriting.
Tracking Removed Products from Cart in Google Analytics
I track products removed from the shopping 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 Removed Products from Cart tracking:
- Which product where removed from cart?
- How many items where removed from cart?
- What was the product value?
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 2 Event trackers when a product is Removed from Cart.
This is how my Events are organized. Red text means that this information is collected from the page using jQuery.
| Category | Action | Label | Value |
| Removed from Cart | Items | Product Name | Number of Items |
| Removed from Cart | Sum | Product Name | Total Product Price (No decimals) |
As you can see from the report below, sometimes Event 2 isn'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".
Image may be NSFW.
Clik here to view.
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 Removed from Cart products.
Image may be NSFW.
Clik here to view.
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.
Removing products using checkboxes
To remove products from some shopping carts, checkboxes are used. This means that several products can be removed in one operation. On purpose I'm mixing different currencies just to demonstrate that the script can handle that.
| Product | Items | Item Price | Total Price |
|---|---|---|---|
| My Awesome Product | 1 139.40 NOK | 1 139.40 NOK | |
| Another Awesome Product | $ 23.95 | $ 47.90 | |
| Total Price inc. VAT | NOK 334.00 | ||
| VAT | NOK 66.80 | ||
Product HTML
Below is how the HTML for the example above looks like.
- <table class="basket">
- <tr>
- <th>Product</th><th align="right">Items</th><th align="right">Item Price</th><th align="right">Total Price</th>
- </tr>
- <tr class="data">
- <td><input id="remove-123" type="checkbox" name="remove-123" />My Awesome Product</td><td align="right"><input name="quantity-123" type="text" value="1" size="2" id="quantity-123" /></td><td align="right">1 139.40 NOK</td><td align="right">1 139.40 NOK</td>
- </tr>
- <tr class="data">
- <td><input id="remove-456" type="checkbox" name="remove-456" />Another Awesome Product</td><td align="right"><input name="quantity-456" type="text" value="2" size="2" id="quantity-456" /></td><td align="right">$ 23.95</td><td align="right">$ 47.90</td>
- </tr>
- <tr>
- <td colspan="3"><strong>Total Price inc. VAT</strong></td><td align="right"><strong>NOK 334.00</strong></td>
- </tr>
- <tr>
- <td colspan="3">VAT</td><td align="right">NOK 66.80</td>
- </tr>
- </table>
- <input type="button" name="btnRemove" value="Remove" id="btnRemove" />
jQuery for tracking Products Removed using Checkboxes
Since several products can be removed in one operation, the jQuery script will have to loop through the shopping cart based on which checkboxes that are checked. You will at least have to rewrite the code in red.
- <script type="text/javascript">
- $(document).ready(function() {
- if ($(".basket .data").length > 0){ // Only run the script if there are rows that contains products
- function removeItems() {
- $('.basket .data:has(input:checked)').each(function() { //Check if checkbox is checked, then loop through those that are checked.
- var productName = $.trim($(this).find("td").filter(':first').text()); // Product name is in first column. You may have to change this part
- var productSum = $.trim($(this).find("td").filter(':last').text().replace(/\,/g,".")); // Product sum is in last column. If you are using , (comma) as a 1000 separator, change this RegEx to (/\,/g,"")
- productSum = Math.round(productSum.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 productItems = ($.trim($(this).find("td input").filter(':last').val())); // Find last input field that contain Items and get the value.
- // Send data to Google Analytics
- _gaq.push(['_trackEvent','Removed from Cart','Sum',productName,Number(productSum)]);
- _gaq.push(['_trackEvent','Removed from Cart','Items',productName,Number(productItems)]);
- });
- }
- }
- $("#btnRemove").on("mousedown tap", (removeItems)); // When a visitor clicks on the "Remove Button", run the tracking function. Using "tap" to collect iPad/iPhone data better.
- });
- </script>
Removing Products One by One
In the shopping cart demo below, products are removed one by one. On purpose I'm mixing different currencies just to demonstrate that the script can handle that.
| Product | Items | Item Price | Total Price | Remove |
|---|---|---|---|---|
| My Awesome Product | 1 139,40 NOK | 1 139.40 NOK | Remove | |
| Another Awesome Product | $ 23.95 | $ 47.90 | Remove | |
| Total Price inc. VAT | NOK 334.00 | |||
| VAT | NOK 66.80 | |||
Product HTML
Below is how the HTML for the example above looks like.
- <table class="basket">
- <tr>
- <th>Product</th><th align="right">Items</th><th align="right">Item Price</th><th align="right">Total Price</th><th>Remove</th>
- </tr>
- <tr class="data">
- <td>My Awesome Product</td><td align="right"><input name="quantity-123" type="text" value="1" size="2" /></td><td align="right">1 139,40 NOK</td><td align="right">1 139.40 NOK</td><td><a href="#" class="btn-remove">Remove</a></td>
- </tr>
- <tr class="data">
- <td>Another Awesome Product</td><td align="right"><input name="quantity-456" type="text" value="2" size="2" id="quantity-456" /></td><td align="right">$ 23.95</td><td align="right">$ 47.90</td>
<td><a href="#" class="btn-remove">Remove</a></td> - </tr>
- <tr>
- <td colspan="3"><strong>Total Price inc. VAT</strong></td><td align="right"><strong><u>NOK 334.00</u></strong></td><td align="right"> </td>
- </tr>
- <tr>
- <td colspan="3">VAT</td><td align="right">NOK 66.80</td><td align="right"> </td>
- </tr>
- </table>
jQuery for tracking Products Removed One by One
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() {
- $('a.btn-remove').on("mousedown tap", function() { // Using "tap" to collect iPad/iPhone data better.
- var prodElem = $(this).parent().parent();
- var productName = $.trim($(prodElem).find('td:first').text()); // Product name is in first column. You may have to change this part
- var productSum = $.trim($(prodElem).find('td:first').next().next().next().text().replace(/\,/g,".")) // If you are using , (comma) as a 1000 separator, change this RegEx to (/\,/g,"")
- productSum = Math.round(productSum.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 productItems = $.trim($(prodElem).find("td input").filter(':last').val()); // Find input field for Items and get the value.
- // Send data to Google Analytics
- _gaq.push(['_trackEvent','Removed from Cart','Sum',productName,Number(productSum)]);
- _gaq.push(['_trackEvent','Removed from Cart','Items',productName,Number(productItems)]);
- });
- });
- </script>
The demo script on this page is served through Google Tag Manager.
Google Universal Analytics
With the next version of Google Analytics, called Google Universal Analytics, only 1 Event is needed since additional data can be tracked as a Custom Metric. This will improve the data quality, and make the data more accessible in Google Analytics.
Below is an example how this could be tracked with Universal Analytics.
- <script type="text/javascript">
- $(document).ready(function() {
- ...original script here
- // Send data to Google Analytics
- ga("send", "event", {eventCategory: "Removed from Cart", eventAction: "Items", eventLabel: productName, eventValue: Number(productItems), metric2: Number(productSum)});
- ...original script here
- </script>
Some final words
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 Removed from Cart in Google Analytics, and how you are using this data for optimization?
Related Articles
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.