Things I learned about Google Analytics: Enhanced E-Commerce (That You Should Know Too)

If you sell stuff online (or even write blogs), and you’d like to analyze your performance in order to make improvements, then Enhanced E-Commerce (an advanced feature of Google Analytics) is a must-have.

The problem is, setting it up has never been made easy for beginners to understand as far as I can tell. Until now. Hopefully.

Here are the five essential components of this system:

  1. Your shopping cart’s template variables.
  2. Access to the template files from your shopping cart provider (for example: Shopify). This will be HTML. If you don’t have the files, call or e-mail the company who made your shopping cart and get it. They may give you FTP access (download FileZilla).
  3. DataLayer code (JavaScript. Google provides examples, but more on this later)…
  4. Google Tag Manager (Indispensable. No, really. Set up your account now).
  5. Google Analytics account (duh).

Ok, we’re all ready. I’m not going to reinvent the wheel here by going into further details on how to use Google Analytics or Google Tag Manager once you’ve got them set up. I stand on the shoulders of giants: Canonicalize, Simo Ahava, and Himanshu Sharma at OptimizeSmart, and many more. Go look them all up, they’re great resources.

My job here is just is help you get set up ASAP. Like in a week, as opposed to months, or even a year. You’re welcome.

#1 SHOPPING CART VARIABLES

First, you need to see if your shopping cart provider even has the shopping cart variables that you’ll need. They may look something like this: {{Product Name}} or this [Product Price].

They’ll either be located in your developer documentation (the easy way) or you’ll have to hunt for them in the shopping cart template files (the hard way. Use tools like Sublime to help you with this).

If you don’t see them, call or e-mail your shopping cart provider to see if they can give them to you and send you the documentation files. Then you can read up on them and (hopefully) get a nice list.

Here’s an example of the Shopping Cart values that you’ll need variables for in order to use Enhanced E-Commerce (not all are mandatory, but these are what you’d like to have if available):

  1. Transaction ID
  2. Transaction Revenue
  3. Transaction Tax
  4. Transaction Shipping
  5. Product Name
  6. Product ID
  7. Product Price
  8. Product Quantity
  9. Product Category
  10. Product Brand

Ok, if you’ve got these 10 variables, you’re in good shape. You can use the shopping cart’s built-in server variables for the dataLayer, which is the best practice.

If not, you may have to fill in your dataLayer by using JavaScript code to scrape the DOM (take your values from the HTML text), which is a last resort (and discouraged).

Apparently, this is because the shopping cart variables (from your shopping cart provider’s server) are nearly instantly available and don’t depend on the page to load, whereas the DOM is slower and isn’t available until after the page loads. This means that you could lose some data if things move too slow. Still better than nothing though!

#2 SHOPPING CART TEMPLATE FILES

This is where you’ll need access to your shopping cart template files. Specifically, you’ll need access to the following templates:

  1. The Category page template. The place where a collection of products is shown.
  2. The Product page template. The place where all the details about an individual product are shown.
  3. The Add to Cart button (the code for this could be in a separate file from the product page, even though it’s on the product page. Ask your shopping cart provider where to find all this stuff).
  4. The Checkout button. (the code for this could be in a separate file from the checkout page, even though it’s on the checkout page. Ask your shopping cart provider where to find all this stuff).
  5. The Receipt page (also known as a Thank You page).

The reason why you need access to all these pages, is because this is where all the Enhanced E-Commerce “events” happen that you want to track for your Google Analytics reports. For example:

  1. The impressions event: tracks when a category page was seen on your site.
  2. The click event: tracks when one of the products on a category page was clicked.
  3. The detail event: tracks when an individual product page was seen on your site.
  4. The add event: tracks when someone adds a product to their shopping cart from your product page by clicking the “add to cart” button. There’s also a remove event, which had a similar-looking code.
  5. The checkout event: tracks when a shopping cart enters the checkout funnel through your checkout page by clicking the “checkout” button. There are also minor (optional) steps you can set up under the checkout event, like Address, Shipping, Review, etc.
  6. The purchase event: tracks when someone lands on your Thank You (or Receipt) page and completes an order.

Ok great. Shopping Cart Variables or not, at least you have access to your Shopping Cart Template Files (hopefully).

That means you can either write your tracking code by inserting the Shopping Cart Variables into your dataLayers or by DOM scraping and manually entering  the info you need into your dataLayers (which I won’t cover, because you’ll need to learn JavaScript for that).

If you can’t get the shopping cart template files (for some strange reason), then you’re probably out of luck here. Sorry. Now, about those dataLayers…

#3 DATALAYER CODE

The experts say that a dataLayer is a Javascript array of objects. It has a very specific format, so be careful. For your info to feed into those Google Analytics reports you’d like to have, the code has to be right. Here’s the basics:

window.dataLayer.push({AllYourProductInfoGoesInHere});

That’s all you’ll get outta me. Others have done the legwork to make this accessible. See the links above.

Just put the correct type of dataLayer code on the correct page, and everything will be fine. By the way, you’ll probably want to insert the code for the Add and Checkout events into your store’s “Add to Cart” and “Checkout” buttons using something called a “JavaScript event handler.”

It’s basically a fancy way of coding a dataLayer (or a function that calls a dataLayer) into your button’s code using the onclick() function. Google it, or better yet check out W3Schools or StackOverflow. Next!

#4 GOOGLE TAG MANAGER (GTM)

I’m old school, so I remember a time before GTM existed. It was a dark time… like before 2012. Anyway, I say all this so that you’ll cherish having it. It’s a powerful yet simple data portal that lets you specify all your tracking settings (tags) without having to code. And then it sends it all into those Google Analytics dashboards for you automatically. Beautiful!

Again, I won’t reinvent the wheel here, but there’s no separating GTM from Google Analytics and Data Layers. Just do it.

In GTM, you’ll be using variables (special names that store values for specific quantities, metrics, etc.), triggers (basically events that alert the computer to take specific actions such as when a page is viewed or a button is clicked), and tags (the info you want sent to Google Analytics when the trigger alerts go off).

#5 GOOGLE ANALYTICS

Obviously, none of this works without the Great-grandaddy of web analytics, with all of its beautiful tables, graphs, dashboards, reports, etc. This is the final destination of all your data. It allows you to analyze everything, all in one place.

Where is that? Inside of Google Analytics, look to the menu on the left and go to Conversions > Ecommerce. If you’ve got Enhanced E-Commerce turned on correctly in your admin settings, and you’re using Universal Analytics, then you should see 6 reports which include an overview chart, two behavior funnels, and three performance tables:

  1. Overview
  2. Shopping Behavior Analysis
  3. Checkout Behavior Analysis
  4. Product Performance
  5. Sales Performance
  6. Product List Performance

(There are also Marketing Reports included with Enhanced Ecommerce: Internal Promotions, Order Coupons, Product Coupons, and Affiliate Codes).

Here’s a brief summary of your data’s journey:

  1. Shopping Cart Variable: feeds the info through from the server (your shopping cart provider’s computer) to your shopping cart web pages via the template files.
  2. Shopping Cart Template Files: this is where all the important pages of your website live. This is where you’ll write/edit the dataLayer code using your variables (or by using JavaScript to custom-code things if you’re forced to scrape the DOM).
  3. Data Layer: the place where your shopping cart info gets sent to GTM.
  4. GTM: the place where you choose all your tracking details without having to code. The info that gets sent to GTM from the dataLayer is automatically sent through to Google Analytics where you can see it and analyze it.

And that’s it. You’re done. Welcome to the good life!

I just told you all the stuff I wish somebody would’ve told me, SO GO TELL SOMEBODY!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s