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

Transcription

1 Setting Up Google Analytics Enhanced Ecommerce Using Google Tag Manager: A Step by Step Guide For More Information, please visit: MoreVisibility Fx:

2 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 1

3 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: 2

4 <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: <script> datalayer =[{ 'visitorid': ' ']; </script> Added to the datalayer after page load: 'visitorid': ' '); 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 official Google help center for GTM. 3

5 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. <script> // An example of measuring promotion views. This example assumes that // information about the promotions displayed is available when the page loads. '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 of those values for another tag or if you have no other dependencies on that data.) 4

6 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. * {Object promoobj An object representing an internal site promotion. */ function onpromoclick(promoobj) { 'event': 'promotionclick', 'promoclick': { 'promotions': [ { 'id': '44444', 'name': '10% off 100', 'creative': 'shimmery3', 'position': 'Promo Box 2' ], 'eventcallback': function() { document.location = promoobj.destinationurl; ); </script> // Use any internal code. Name or ID is required. 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 browser to move on to the desired page. 5

7 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: <script> 'impressions': [ { 'name': 'Basic Widget', 'id': '123456', 'price': '19.95', 'category': 'Industrial', 'variant': 'blue' 'list': 'Search Results', 'position': 1, {, { // Name or ID is required. 'name': 'Deluxe Widget', // Name or ID is required. 'id': '222222', 'price': '29.95', 'category': 'Home', 'variant': 'blue' 'list': 'Search Results', 'position': 2 'name': 'Premium Widgets', 'variant': 'blue' 'list': 'Search Results', 'position': 3 // Name or ID is required. ] ); </script> 6

8 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. <script> function(productobj) { 'event': 'productclick', 'click': { 'actionfield': {'list': 'search results', 'products': [{ 'name': 'Premium Widgets', 'variant': 'blue' ] // Name or ID is required. // Optional list property., 'eventcallback': function() { document.location = document.location = '/product/widgets/acme/id= '; ); </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. 7

9 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. <script> // Measure a view of product details. This example assumes the detail view occurs on //pageload. 'detail': { 'products': [{ ; 'name': 'Premium Widgets', 'variant': 'blue' // Name or ID is required. 'actionfield': {'list': 'You May Also Like', //optional list property. 'products': [{ 'name': 'Widget Bag', // Name or ID is required. 'id': ' ', 'price': '19.95', 'brand': 'Dundler Mifflin', 'category': 'Storge', 'variant': 'small' ] ; 'promoview': { 'promotions': [ { 'id': '44444', ); </script> 'name': '10% off 100', 'creative': 'static', 'position': 'right rail box 2'] // Array of promofieldobjects. // Use any internal code. Name or ID is required. 8

10 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. 'event': 'addtocart', ); 'currencycode': 'USD', //optional 'add': { // 'add' actionfieldobject measures. 'products': [{ // adding a product to a shopping cart. 'name': 'Premium Widgets', // Name or ID is required. 'variant': 'blue', 'quantity': 1 ] Remove from Cart: 'event': 'removefromcart', 'remove': { 'products': [{ 'name': 'Premium Widgets', 'variant': 'blue', 'quantity': 1 ] ); // Name or ID is required. 9

11 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 'event': 'checkout', 'checkout': { 'actionfield': {'step': 1, 'products': [{ 'name': 'Premium Widgets', // Name or ID is required. '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: 'event': 'checkout', 'checkout': { 'actionfield': {'step': 4, 'option': 'shipping-standard', 'products': [{ 'name': 'Premium Widgets', // Name or ID is required. 'variant': 'blue', 'quantity': '1' ] 10

12 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: '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. 'variant': 'blue', 'quantity': 1, 'coupon': '14Summer' ] Notice that you can pass coupons and pricing item by item but only one string per transaction. 11

13 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. Recommended Resources for Further Reading: Much of the coding in this document was modified from the official Google Analytics Enhanced Ecommerce support page. The link is here for your convenience and further reading:

14 About MoreVisibility As a Google Analytics Certified Partner, MoreVisibility offers a wide range of Google Analytics consultation and guidance. Want to learn more? us at Analytics@MoreVisibility.com or call. For more about MoreVisibility, check out: For the latest Analytics information, subscribe to our Analytics Blog: 13