Fixing Shopify product data in Google Analytics

If your Shopify store happens to sell products with variants, you have likely felt the futility of attempting to use the Product Performance report in Google Analytics. 

With data available only at the variant level, doing what should be very simple analysis, like understanding what key products were bought from an email, becomes tedious. None of us want to export this data to excel, parse it and then use a pivot table to get a report that we can actually use. Instead of seeing data at the variant level, what we really need is a way to view it at the master product level. 

 Wouldn’t it be better to have a report like the following? 

Layering on GA segments like the existing customers segment we created in the last post or a new customers segment makes this report even more useful. Just think how powerful it would be to know which products convert best for new customers vs. existing customers. I bet that would change the way you think about merchandising and selecting products for acquisition ads. Applying a segment of email traffic to such a report would let us know if those visitors actually bought what we featured in our email creative. Those are real insights that can drive your business forward.

The good news is if you’d like to put this fix in Google Analytics in place for your Shopify store, just read on!

OVERVIEW

To put this solution in place, we’ll be utilizing Google Tag Manager, customizing Google Analytics and inserting a bit of code into our Shopify implementation.

In GTM, we’ll be creating three new GA tags: one for product page impressions, one for add to cart events and a final one for products ordered.

Moving over to GA, we’ll create new custom dimensions and custom metrics to capture the data from our GA tags. Then we’ll create a few calculated metrics from these custom metrics. Finally, we’ll create the custom report to replace the existing GA product report. We’ll be moving a bit faster in this post, so if any of the GTM concepts are a bit hard to follow, please see my first post for a more detailed walkthrough.

Ready to put this in place? Let’s get going!

PRODUCT PAGE IMPRESSIONS

We will want to fire our product impression GA tag every time that a product page is viewed. To start, let’s edit our Shopify code so that we can capture our product name in a GTM variable. In our code, find the html element that wraps your product title on your product page. For example:

<h2>{{ product.title }}</h2>

Let’s go ahead and add an id to this h2 tag like follows:

<h2 id="product-title">{{ product.title }}</h2>

In GTM, we can now create a variable to capture the product name. Let’s call the variable Product Name and use DOM Element for the Variable Type. Use ID for the Selection Method and enter our id above for the Element ID 

Before we create our GA tag, we’ll create a trigger that will fire on every product page impression. The trigger condition will use the Product Name GTM variable created above and will be set to fire when it is present on the page (i.e. not null).

Let’s jump over to GA now. Before we can create the GA tag for the product impression, we need to create a custom dimension to record the name of the product viewed. We’ll call it Product Name as well.

Note the index position for this new custom dimension after you save it. You’ll be using it when creating your GA tag in GTM.

Now, we’ll create a custom metric in GA to record the impression. Let’s call it Product Page View. In addition to serving as a counter for the number of page views a product receives, this custom metric will also serve as the denominator in a few calculated metrics coming later (Add To Cart Rate and Product Conversion Rate). When creating this custom metric, leave the Scope as Hit and the Formatting Type as Integer. Again, note the index position for this new custom metric after you save it, as you’ll need it when creating the GA tag.

Let’s head back to GTM. Now on to creating the GA Tag. Let’s call it GA – Product Page – Impression. For Track Type, select Event. For Category, enter Product. For Action, select the {{ Product Name }} GTM variable you created above by clicking the + button and selecting it. This will populate the actual product name in GA for the event. For the Label, you can enter Impression. These values for the Category, Action and Label define the taxonomy for this event in GA. Be sure to check the Enable override settings in the tag box. For the Tracking ID, either create a new GTM variable using the Constant variable type and include your GA Tracking ID as the value or just copy and paste your GA Tracking ID directly into the input. In my example below, I’ve chosen to create a new variable called {{GA-ID}}. This will prevent me from having to continually copy and paste in my GA Tracking ID for future GA tags.

Expand the More Settings section. Under Custom Dimensions, enter your index position from above and select your {{Product Name }} GTM variable. Under Custom Metrics, enter your index position from above with a value of 1.

Here’s the competed GA tag: 

Just assign it to the Product Page – Impression trigger you created and we’re all set.

ADD TO CART EVENT

Our objective here is to fire a GA tag every time a product is added to the cart. To begin, let’s find the code in your theme which handles the add to cart action. Most themes will use an ajax event that looks very similar to the following: 

	    $.ajax({
	      type: 'POST',
	      url: '/cart/add.js',
	      data: data,
	      contentType: 'application/x-www-form-urlencoded',
	      dataType: 'text',
	      success: function() {
	        ajaxCart.load();
	        {% increment cart.item_count %}
	      },
	      error: function() {
	      }
	    });

This is the code allows us to add to cart without requiring a page refresh. What we need to do is notify the data layer that an add to cart event has occurred. We will place this data layer code within the <script> tag that houses the add to cart action above. The code we will inject needs to go before the POST action above. Here’s the code:

        dataLayer.push({
    		event: 'GTM-ADD-TO-CART',
    		AddToCartHit: 1
  	});

For simplicity, we are assuming that the quantity added to cart will be a unit of 1 each time. To handle the case where a variable number of units can be added to cart, we would capture this selection on the page by the customer with an additional variable in the data layer. It would be included in the data layer array as a separate entry after the AddToCartHit variable in the code above. We would then create a new GTM variable to house the value. 

Now we create the GTM variable to record the AddToCartHit variable that has been injected into the data layer.

And here’s the trigger we’ll need to create the fire the GA tag. Note that the Event name is the same as the one we used in the data layer push above (GTM-ADD-TO-CART):

Jumping back into GA, we don’t need to create a new custom dimension, as we already have one for the product name. We do however need a new custom metric to record the add the cart event.

All good. Now we just need to create the GA tag. The tag is very similar to the product impression tag we created earlier with just a few changes.

Note the change in the index we are using in the Custom Metrics section. For the Metric Value, we have input a value of 1, but if you have created a GTM variable to capture the add to cart quantity, you’ll use that variable here instead.

PRODUCT PURCHASE EVENT

To record the purchase event in GA, we will again need to populate the data layer. This time we will be informing GA which products have been purchased via a GA tag in GTM. Since we don’t have access to the source code on the Shopify thank you page, we’ll utilize the Additional Scripts area of the checkout settings in Shopify (Settings > Checkout).

In my first post, we inserted the following code into this area:

<!-- GTM Tagging -->
 
{% if first_time_accessed %}
 
<p id="GTM-PURCHASE-TRIGGER" style="color:white">GTM</p>

{% endif %} 

We’ll use this code as our base to insert new code to populate the data layer. Put the following code right after the closing </p> above:

	{% for item in line_items %}
 
        	<script type="text/javascript">
           
            	window.dataLayer.push({
                	'event' : 'GTM-PRODUCT-PURCHASED',                	
                	'PRODUCT_PURCHASED' : '{{item.product.title}}'
            	});
           
        </script>
           
	{% endfor %}

This code will loop through all of the items purchased and inject a variable for each product purchased into the data layer. If you would like to account for a variable number of units purchased per product, simply inject an additional variable into the data layer after the PRODUCT_PURCHASED variable above and assign it the appropriate quantity via {{line_item.quantity}}. In GTM, you can then record this quantity in a Data Layer Variable and then replace the Metric value with this new GTM variable when populating the GA tag.

Once again, we’ll create a GTM variable to record the variable injected into the data layer (PRODUCT_PURCHASED in this case). 

If you happen to use apostrophes in your product titles, you’ll want to take this next step. We need to replace the encoded apostrophe values that are fed into the data layer in order for our product names to appear correctly in our GA reporting. Note that if you use other special characters, you can use the following technique as well. You’ll just need to edit the encoded html character reference to match the special character you want to replace (in our case, an apostrophe is represented as ').

We’ll replace encoded apostrophe values by creating a new GTM variable called Product Name Purchased. We’ll use the Custom Javascript Variable Type and the following code:

function() {
	var name = {{Data Layer - Product Purchased}};
	var decodeName = name.replace(/'/g, "'");
	return decodeName;
}

Now we create a Custom Event trigger type for our GA tag. This time we’ll use GTM-PRODUCT_PURCHASED as the Event name and set the trigger to fire when Data Layer – Product Purchased is not null. 

Just two more steps and we are done with our GTM setup. Pop over to GA and create a new custom metric for the product purchase event.

And back to GTM one more time to create the GA – Thank You Page – Product Purchased tag. Note that we are using the {{Product Name Purchased}} GTM variable that we created above instead of the {{Product Name}} GTM variable used in the product impression and add to cart tags.

For our custom metric, we’ll assume 1 unit ordered per item, but if you created an additional GTM variable to house the quantity ordered per product, you’ll use it here instead.

Before submitting the changes to your GTM container, preview it and test that all three GA tags fire correctly (GA – Product Page – Impression, GA – Product Page – Add To Cart and GA – Thank You Page – Product Purchase). If all three tags fire, you are ready to submit!

CUSTOM REPORTS IN GOOGLE ANALYTICS

The rest of our work will take place in GA. We just need to set up two calculated metrics first before we can create our custom reports. In the Admin section of GA, under View, you will see Calculated Metrics. The first calculated metric to create will be one for Add To Cart Rate. For the Formatting Type, select Percent. For the Formula, use two of the custom metrics we created before: {{Add To Cart Event}} / {{Product Page View}}

We also need to create a calculated metric for Product Conversion Rate. For this Formula, we’ll use {{Product Purchase Event}} / {{Product Page View}}.

And now on to the custom report. This is where all our previous work comes together. For the Metric Groups, we’ll be selecting the custom metrics and calculated metrics that were previously created in GA:

  • Product Page View (custom metric)
  • Add To Cart Event (custom metric)
  • Add To Cart Rate (calculated metric)
  • Product Purchase Event (custom metric)
  • Product Conversion Rate (calculated metric)

For the Dimension Drilldowns, we will use the Product Name custom dimension we previously created.

Save it and you are all set! Apply your favorite segments to this report and you’ll be analyzing your product activity in new and truly insightful ways.

ADDITIONAL READING

I found this post on Digital Darts to be extremely helpful when setting up GA for my Shopify sites. If you want an A+ setup, read Joshua’s guide and implement it with my product reporting hack above.

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.