Setting Up Google Analytics Enhanced Ecommerce Using Google Tag Manager: A Step by Step Guide

(1)

For More Information, please visit:

www.MoreVisibility.com

Setting Up Google Analytics

Enhanced Ecommerce Using

Google Tag Manager: A Step by

Step Guide

925 South Federal Highway, Suite 750, Boca Raton, FL 33432

800-787-0497

Ph: 561-620-9682 Fx: 561-620-9687

(2)

1 www.morevisibility.com

800-797-0497 Ph: 561-620-9682 Fx: 561-620-9684

Introduction

As a Google Analytics Certified Partner and Google Tag Manager Specialist,

MoreVisibility is deeply involved in the field of Analytics. From getting started with your web analytics software to training your staff to use your analytics tools more effectively, MoreVisibility can help. This guide covers a step-by-step outline to help you deploy Google Analytics Enhanced Ecommerce via Google Tag Manager.

I. About Enhanced Ecommerce

Ecommerce functionality in Google Analytics (GA) is nothing new. For years site owners have been able to accurately measure how shoppers convert, which products are most popular, and how much revenue is attributed to shipping and tax. What hasn’t been as easy is understanding user behavior from promotional impression to purchase. Questions like these…

1. How did the visitor first find this product on my site? 2. Which promotions did this customer see on my site?

3. How many other items did they add or remove from the cart before checkout? 4. Was a coupon used?

5. Which product suggestions were effective?

6. What happens if a client returns the item for a refund?

…were always difficult to answer without leveraging other GA features like custom variables and custom dimensions and event tracking. While it wasn’t impossible; it required sophisticated deployments of the Google Analytics Tracking Code (GATC) and considerable developer resources. The result was a disconnected set of reports that mandated that the Analyst had a complete understanding of custom reporting and the advanced segmentation built into GA.

Enhanced Ecommerce (EE) introduces a new collection of reports that build on the transactional capabilities of Classic GA to add insight into the entire shopping journey.

What’s New?

Besides a great set of reports, the big change with Enhanced Ecommerce in GA is the data model. Previously, Ecommerce hits consisted of transactional data that was pushed into GA from the receipt page of your site and contained information related to

(3)

800-797-0497 Ph: 561-620-9682 Fx: 561-620-9684

the overall transaction along with an array that represented the products purchased in the transaction. This was pushed to GA in a hit when the “track trans” and “add item” methods were called.

Enhanced Ecommerce data is now integrated into the overall GA data model and opportunities abound to uncover how visitors interact with your site’s merchandising. Now rather than calling Ecommerce Transaction coding on the receipt page; Ecom calls are made from multiple pages. Let’s look at a typical path through an

Ecommerce site as an example:

 Click on a home page promotional offer

 See product listings in an internal search result page  Click a product listing

 View the product detail page  Add to cart

 Checkout Steps  Finalize Transaction

In each of these steps (and more), the EE Production Collection model lets you add data to get keen insight into the performance of your merchandising and checkout funnel flow.

Let’s explore how to use Google Tag Manager to deploy the new Enhanced Ecommerce code to properly capture steps in the path above.

II. About Google Tag Manager

Google Tag Manager (GTM) is a Tag Management System (TMS) that simplifies the deployment of measurement pixels for Marketers.

The GTM data layer is critical to a successful deployment for Google Tag Manger. The data layer exists to hold information that is available on page and pass it to the macros and tags in GTM.

Since the data layer is simple JavaScript Object Notation (JSON), it is easy to deploy and update. Page level data that you may want to pass to the data layer could use JavaScript Constants, DOM Elements and Attributes or any other information about the page and page interactions that you would like to capture. An example of the syntax would be:

(4)

800-797-0497 Ph: 561-620-9682 Fx: 561-620-9684 <script> dataLayer = [{ 'pageCategory': 'signup', 'visitorType': 'high-value' }]; </script>

The easiest way to enhance your collection capabilities is by programmatically passing information into the dataLayer for consumption by the tags or as a cue to fire

measurement pixels.

In order for Google Analytics Ecommerce code to function properly via GTM; the variables in this document denoted as (Required) must be declared and populated in the data layer.

On page load you can deploy the dataLayer directly in the code. If data is not available on page load then you can deploy using the dataLayer.push method to update the dataLayer.

Information available on page load:

'visitorId': '2222445'}];

</script>

Added to the dataLayer after page load:

dataLayer.push({

'visitorId': '2222445'});

Some things to keep in mind regarding the data layer:

1. The data layer name is case sensitive and should always be represented in code as dataLayer as in dataLayer.push method.

2. Variables are page level only and, as a best practice, should always be enclosed in single quotes and should always be consistent throughout all pages of the site. This document assumes that you have familiarity with GTM and the dataLayer that is critical for a successful deployment. For more information of GTM, please visit the

(5)

800-797-0497 Ph: 561-620-9682 Fx: 561-620-9684

III. Product Promotions

Promotion Impressions

Enhanced Ecommerce (EE) has a great collection of methods to pass more data into Google Analytics (GA). (For a complete list please see the resource section below.) To track the effectiveness of promotions, you will need to pass related impression and click data into the dataLayer. This will allow GTM to pass data to GA to see how many users are exposed to the creative and also to calculate a click through rate for the various offers on a site.

// An example of measuring promotion views. This example assumes that

// information about the promotions displayed is available when the page loads. dataLayer.push({

'ecommerce': { 'promoView': {

'promotions': [ // Array of promoFieldObjects. {

'id': '22222', // ID or Name is required. 'name': 'Free Shipping',

'creative': 'v1-sparkle', 'position': 'Promo Box 1' },

{

'id': '44444', // Use any internal code. Name or ID is required. 'name': '10% off 100',

'creative': 'shimmery3', 'position': 'Promo Box 2' }] } } } }); </script>

The name values pairs above represent only the JSON required for Enhanced

Ecommerce. If you are currently pushing any other information to the dataLayer, you would also need to account for that on each page – with the exception of the

Ecommerce receipt page. (The Enhanced Ecommerce dataLayer can replace the existing JSON pairs as they relate to the dataLayer – as long as you are not using any

(6)

800-797-0497 Ph: 561-620-9682 Fx: 561-620-9684

Promotion Clicks

Now that we’ve notified GTM & GA that a user was exposed to a promotion, we need to listen for clicks. How you deploy this depends on the architecture of your site and systems, and can be handled through a custom event listener and a helper function as illustrated below:

<script> /**

* Call this function when a user clicks on a promotion. This function uses the

eventCallBack datalayer variable to handle navigation after the ecommerce data is sent to Google Analytics.

*

* @param {Object} promoObj An object representing an internal site promotion. */ function onPromoClick(promoObj) { dataLayer.push({ 'event': 'promotionClick', 'ecommerce': { 'promoClick': { 'promotions': [ {

'creative': 'shimmery3', 'position': 'Promo Box 2' }] } }, 'eventCallback': function() { document.location = promoObj.destinationUrl; } }); } </script>

In the code above the helper function PromoClick is called by the event listener and builds the promo information – exactly as in the impression example – to pass into GA. The eventCallback function simply waits for all the tags to fire before allowing the

(7)

800-797-0497 Ph: 561-620-9682 Fx: 561-620-9684

IV. Product Listings and

Impressions

There are many opportunities for a user to see a product on your site. These could include (among others) promotional landing pages, site search results, category pages and the product page itself. EE has a method for measuring all of these by recording a product impression and modifying what kind of impression it was. For example a search results page for blue widgets:

dataLayer.push({ 'ecommerce': {

'impressions': [ {

'name': 'Basic Widget', // Name or ID is required. 'id': '123456',

'price': '19.95', 'brand': 'Acme',

'category': 'Industrial', 'variant': 'blue'

'list': 'Search Results', 'position': 1

}, {

'name': 'Deluxe Widget', // Name or ID is required. 'id': '222222',

'price': '29.95', 'brand': 'Acme', 'category': 'Home', 'variant': 'blue'

}, {

'name': 'Premium Widgets', // Name or ID is required. 'id': ' 3456789',

'price': '39.95', 'brand': 'Acme',

'category': 'Commercial', 'variant': 'blue'

}] } }); </script>

(8)

800-797-0497 Ph: 561-620-9682 Fx: 561-620-9684

In the example above we’ve only built the array for the first three products but all displayed or visible products should be included in the array. You would track other product impressions in the same manner by using the list attribute to denote where the product appeared (when appropriate). For example: 'list': 'Related Products' or

'list': 'Search Results' etc. The impression can be tied to a product detail view (see section VI) to track “related products” or “you may also like” or similar

recommendations.

V. Product Clicks

Now that GTM & GA has registered a product impression, the next interaction to measure is the click on the link or image to the product detail page. As mentioned above, your site architecture will dictate how you push this data into the dataLayer.

'actionField': {'list': 'search results'}, // Optional list property. 'products': [{

'name': 'Premium Widgets', // Name or ID is required. 'id': ' 3456789', 'price': '39.95', 'brand': 'Acme', 'category': 'Commercial', 'variant': 'blue' }] } }, 'eventCallback': function() {

document.location = document.location = '/product/widgets/acme/id=3456789'; }

}); </script>

As in previous examples, the callback function is used to slightly delay the navigation until the data has been pushed to GTM & GA. We recommend pushing this data using an event listener.

(9)

800-797-0497 Ph: 561-620-9682 Fx: 561-620-9684

VI. Product Detail Views

Once a product detail page is loaded, we want to categorize this for GTM and alert GA that this has taken place and pass any relevant list information into the interface. In the example below we are registering the detail view and also the impression from a

hypothetical promotion.

// Measure a view of product details. This example assumes the detail view occurs on //pageload.

dataLayer.push({ 'ecommerce': { 'detail': {

'products': [{

'name': 'Premium Widgets', // Name or ID is required. 'id': ' 3456789', 'price': '39.95', 'brand': 'Acme', 'category': 'Commercial', 'variant': 'blue' } };

'actionField': {'list': 'You May Also Like'}, //optional list property. 'products': [{

'name': 'Widget Bag', // Name or ID is required. 'id': '999999',

'price': '19.95',

'brand': 'Dundler Mifflin', 'category': 'Storge', 'variant': 'small' }] }

};

'promoView': {

'promotions': [ // Array of promoFieldObjects. {

'creative': 'static',

'position': 'right rail box 2'}] }

}); </script>

(10)

800-797-0497 Ph: 561-620-9682 Fx: 561-620-9684

VII. Cart Interaction

Enhanced Ecommerce now natively tracks cart additions and removals so that true product level conversions can be measured.

Add to Cart:

// Measure adding a product to a shopping cart by using an 'add' actionFieldObject // and a list of productFieldObjects.

dataLayer.push({

'event': 'addToCart', 'ecommerce': {

'currencyCode': 'USD', //optional

'add': { // 'add' actionFieldObject measures. 'products': [{ // adding a product to a shopping cart. 'name': 'Premium Widgets', // Name or ID is required. 'id': ' 3456789', 'price': '39.95', 'brand': 'Acme', 'category': 'Commercial', 'variant': 'blue' , 'quantity': 1 }] } } });

Remove from Cart:

dataLayer.push({

'event': 'removeFromCart', 'ecommerce': {

'remove': { 'products': [{

'name': 'Premium Widgets', // Name or ID is required. 'id': ' 3456789', 'price': '39.95', 'brand': 'Acme', 'category': 'Commercial', 'variant': 'blue' , 'quantity': 1 }] } } }); }

(11)

800-797-0497 Ph: 561-620-9682 Fx: 561-620-9684

VIII. Checkout & Step Definition

For each step in the checkout process the following code variation could be used so that GA can represent whether items are added or removed as the user progresses through the checkout process. Along the way, the ‘step’ field is used to define the numbered step in the process (1,2,3, etc.) and the option field is used to pass data related to each step, like shipping option and payment type.

Initiating Checkout dataLayer.push({ 'event': 'checkout', 'ecommerce': { 'checkout': { 'actionField': {'step': 1}, 'products': [{

'name': 'Premium Widgets', // Name or ID is required. 'id': ' 3456789', 'price': '39.95', 'brand': 'Acme', 'category': 'Commercial', 'variant': 'blue' , 'quantity': '1', }] } } 'eventCallback': function() { document.location = '/checkout.php';

The values would be sent to the dataLayer via an event listener that fires when a visitor clicks on the “checkout” button.

Checkout Continued, Each Step Should be Defined:

dataLayer.push({

'event': 'checkout', 'ecommerce': { 'checkout': {

'actionField': {'step': 4, 'option': 'shipping-standard'}, 'products': [{

'name': 'Premium Widgets', // Name or ID is required. 'id': ' 3456789', 'price': '39.95', 'brand': 'Acme', 'category': 'Commercial', 'variant': 'blue' , 'quantity': '1' }] } }

(12)

800-797-0497 Ph: 561-620-9682 Fx: 561-620-9684

The values would be set or sent to the dataLayer on page load. Each step in the process is defined and named in the GA admin user interface so that a funnel can be built specific to Ecommerce. In the example above an “option” is also passed to provide more insight about what is selected in each step.

IX. Measuring a Transaction

On load of the receipt page, the following is a sample of how the dataLayer should be populated:

dataLayer.push({ 'ecommerce': { 'purchase': { 'actionField': {

'id': 'T12345', // Transaction ID required. 'affiliation': 'Online Store',

'revenue': '49.95', // Total transaction value (incl. tax and shipping) 'tax':'4.00',

'shipping': '6.00', 'coupon': '14SUMMER' },

'products': [{

'name': 'Premium Widgets', // Name or ID is required. 'id': ' 3456789', 'price': '39.95', 'brand': 'Acme', 'category': 'Commercial', 'variant': 'blue', 'quantity': 1, 'coupon': '14Summer' }] } }

Notice that you can pass coupons and pricing item by item but only one string per transaction.

(13)

800-797-0497 Ph: 561-620-9682 Fx: 561-620-9684

X. Importing Product Data

For all of the product data that we mentioned in the previous examples you can limit the data in your product array to only the id. The rest can be joined later by leveraging product data upload via the admin section of GA. This limits the amount of data that needs to be passed (there is a limit of 8192 bytes per hit) although it does require you to upload any deltas as required.

XI. Final Thoughts

For Enhanced Ecommerce, remember to configure the dataLayer to dynamically pass in the values you need for each of your page types:

 Promotional Landing Pages  Category Pages

 Search Results Pages  Product Detail Pages  Checkout Flow  Transaction Receipt

In addition, to improve your merchandising, remember to properly pass in your related products and other list attributes into the GTM dataLayer. While not discussed in this document, EE also allows you to push data into GA related to partial and full refunds.

About MoreVisibility

As a Google Analytics Certified Partner, MoreVisibility offers a wide range of Google Analytics consultation and guidance. Want to learn more? Email us at

Analytics@MoreVisibility.com or call 800-797-0497. For more about MoreVisibility, check out: http://www.morevisibility.com/about-us/ . For the latest Analytics information, subscribe to our Analytics Blog: http://www.morevisibility.com/blogs/analytics/.

Setting Up Google Analytics Enhanced Ecommerce Using Google Tag Manager: A Step by Step Guide

For More Information, please visit:

www.MoreVisibility.com