My fingers have been tingling to write this article. Ever since I implemented Enhanced Ecommerce<\/a> on my blog a couple of weeks ago, I\u2019ve been getting such an impressive amount of useful data that it\u2019s mind-boggling.<\/p>\n In this article, I\u2019ll walk you through the steps I went to implement the solution, along with examples of the data I can now access through Google Analytics\u2019 reporting interface. As you might have guessed, if you\u2019ve read my articles before, I implemented Enhanced Ecommerce with Google Tag Manager. Note, this is not a step-by-step guide, but should rather provide inspiration for you to think out-of-the-box when it comes to Google Analytics\u2019 features.<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n You might be surprised at what the premise of this article is. Usually, Ecommerce plugins are used to track transactions on your web store, so what does this have to do with content? Well, I don\u2019t have a web store on my blog, but every reader who reads an article is valuable to me. If they are valuable, there must be some way to measure their value, and perhaps use this data to benchmark against future products (i.e. articles) I want to create.<\/p>\n Enhanced Ecommerce gives you a bunch of useful reports<\/a>, which you can use to track not only store transactions but any kind of user interaction on your site. You just have to see your site in terms of funnels<\/em>. This means that you need to translate Ecommerce terminology to match the conceptual framework of your site, whether it\u2019s a blog, a web store, a news portal, or a brand site.<\/p>\n On my blog, the terminology ended up something like this:<\/p>\n Product<\/strong>: A blog article.<\/p>\n<\/li>\n Product price<\/strong>: The number of words in the article.<\/p>\n<\/li>\n Product impression<\/strong>: At minimum the title, but usually title + ingress combination of articles on various category pages, and in article sidebars.<\/p>\n<\/li>\n Product list<\/strong>: A page or widget which holds a number of Product impressions. For example, my home page, category pages, tag pages, and related posts lists are all considered Product lists in my Enhanced Ecommerce setup.<\/p>\n<\/li>\n Product list click<\/strong>: A click action on an article title or \u201cRead more\u2026\u201d link in the product lists.<\/p>\n<\/li>\n Product detail view<\/strong>: When the article is loaded.<\/p>\n<\/li>\n Add to cart<\/strong>: When scrolling begins on the article. I can assume that the reader wants to \u201cbuy\u201d it if they start scrolling.<\/p>\n<\/li>\n Checkout<\/strong>: The Checkout funnel in my setup is based on scroll tracking. The first step is when the reader reaches one third of the article, the second step when they scroll two thirds, and the last step is when the article end is reached.<\/p>\n<\/li>\n Purchase<\/strong>: Purchase occurs when the checkout funnel is passed through, and a minimum of 60 seconds has elapsed since the article was loaded. This is an arbitrary number of seconds I simply chose to weed out casual readers from actual readers.<\/p>\n<\/li>\n<\/ul>\n UPDATE<\/strong>: Thanks to an idea from Robert Petkovi\u0107<\/a>, I updated the collection method with Product Detail<\/strong> impressions and Add To Cart<\/strong> actions. These were missing from the first version of this article. I also changed the checkout funnel to reflect scroll depth.<\/p>\n First, here\u2019s the Git repository link for this solution: eec-gtm<\/a>.<\/p>\n I\u2019ll reveal a dirty secret from the get-go: I scrape the DOM for my setup. It\u2019s definitely not the most robust way to go, but since I\u2019m the developer, the marketer, the owner, and the content creator on my site, I can be safe to know that any changes to the page template are totally under my own control.<\/p>\n The way it SHOULD work is to leverage Anyway, I scrape. I\u2019m a scraper. I did it for science, for progress, for technology. And because I was a bit lazy and didn\u2019t want to customise my WordPress hooks. But, in short, here\u2019s how my setup works.<\/p>\n On every page which has product lists, I build the Main posts – the home page listing<\/p>\n<\/li>\n Category posts – if a visitor has chosen to see all posts in a given category<\/p>\n<\/li>\n Tag posts – if a visitor has chosen to see all posts tagged with a specific tag<\/p>\n<\/li>\n Search results – the list of results you get if you use internal search<\/p>\n<\/li>\n Recent posts – the \u201cRecent posts\u201d widget in the sidebar<\/p>\n<\/li>\n Recent comments – the \u201cRecent comments\u201d widget in the sidebar<\/p>\n<\/li>\n GTM Tips – the \u201cGTM Tips\u201d widget in the sidebar<\/p>\n<\/li>\n<\/ul>\n List position is determined by the order of posts in the list. An individual product object would look something like this:<\/p>\n As you can see, it\u2019s very simple. So for every impression, I push an object like above into the Array. I also have a Promotion view<\/strong> for my \u201cWere you looking for my GTM posts?\u2026\u201d info box on the home page of my site, but this hasn\u2019t proven very useful, so I might remove it.<\/p>\n On any given page, the Array might look something like this:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n A very simple setup for a very simple purpose. I send this Array with a Non-Interaction: True<\/strong> Event tag, because I don\u2019t want to delay my pageview from firing until the impression Array is built, and I don\u2019t want impressions to affect bounce rate.<\/p>\n I track product list clicks using a Link Click<\/strong> trigger. When someone clicks on an article title or the \u201cRead more\u2026\u201d link on the product list, I push details about the clicked product into <\/p>\n <\/a><\/p>\n<\/div>\n Firing this event lets me see the effectiveness of my product lists. It gives me information about how the different lists fare in light of the entire customer journey from product impression to purchase.<\/p>\n The checkout flow combines Product Detail impressions, Add To Cart actions, and the checkout flow itself.<\/p>\n A Product Detail impression<\/strong> is sent as a Non-interaction: True event as soon as the article is loaded. This impression can thus be interpreted as the reader quickly checking out whether or not they want to read the article.<\/p>\n The Add To Cart<\/strong> action occurs when the user starts scrolling. The payload is sent with a normal Event tag to Google Analytics. I consider scrolling to be revealing of the reader\u2019s intention to consume the content, but it\u2019s not a checkout yet, as they might just want to skim the first paragraph.<\/p>\n The checkout flow itself is pretty cool. I use the scroll tracking plugin Justin Cutroni wrote about<\/a> on his site. I\u2019ve modified it to work with Google Tag Manager, and I also customised it to work with \u201cPurchases\u201d as well (see next chapter).<\/p>\n Here\u2019s how it works right now:<\/p>\n I calculate the length of the content DIV in pixels.<\/p>\n<\/li>\n When the viewport of the user\u2019s browser reaches one third of this length, the first checkout step is sent as a normal Google Analytics event. This step is labelled \u201cRead one third\u201d.<\/p>\n<\/li>\n When the browser reaches two thirds of the content length, the second checkout step is sent as a GA event. This step is labelled \u201cRead two thirds\u201d.<\/p>\n<\/li>\n When the browser reaches the end of the content DIV, the final checkout step is sent as a GA event. This step is labelled \u201cReached end of content\u201d.<\/p>\n<\/li>\n Finally, if the user has reached Step 3 and<\/em> spent a minimum of 60 seconds on the article page, the \u201cPurchase\u201d event is sent as well (see next chapter).<\/p>\n<\/li>\n<\/ol>\n <\/p>\n <\/a><\/p>\n<\/div>\n You\u2019ll need to modify this funnel and the setup to match the type of content you write. You might want to change the dwell time from 60 seconds to something else, and you might want to add more steps to the checkout funnel (25 %, 50 %, 75 %, for example). For me, this level of granularity was enough.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n That\u2019s a sample checkout object for the second step of the funnel. As you can see, I have price<\/strong> as one of the properties of the article. Here\u2019s the kicker: price is the number of words on the article<\/strong>. Naturally, I\u2019ve turned it into a \u201c.99\u201d number to make it more realistic as an actual price \ud83d\ude42 You\u2019ll see the usefulness of this once I get to the reports.<\/p>\n Like I wrote in the previous chapter, a \u201cPurchase\u201d event is pushed when the checkout funnel is completed, and the visitor has spent 60 seconds on the site. The purchase itself is a perfectly standard Enhanced Ecommerce Purchase object, which might look like this:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n The transaction ID is basically epoch timestamp<\/em> plus a string of random characters. The quantity of products in a transaction will always be 1.<\/p>\n So, let\u2019s go over my favorite reports and segments. First, there\u2019s the Shopping Behavior report:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n As you can see, this shows the interactions during the selected timeframe. In this example, the timeframe is just one day. I\u2019ve removed the absolute numbers, but I\u2019ll update this screenshot once I have more data. The behavior funnel is fairly logical. There\u2019s around 20 % drop-off on each step, with a larger abandonment leading up to purchase. 15 % of people never open an article, which is interesting! This could also be a measurement error thanks to my DOM scraping, but it\u2019s still understandable considering the amount of traffic I get on my blog.<\/p>\n Also, 25 % of the people who start scrolling never reach one third of the article. This is also interesting. It means that there\u2019s something in the first paragraphs that drives the reader away.<\/p>\n This data should next be segmented and carefully analysed. How can I optimise the funnel further? Two immediate concerns I have is the overall low conversion rate (only 25 % of my readers end up reading an entire article while spending more than 60 seconds on the article page), and the fact that only 40 % of people who start reading end up reading the article thoroughly. This is, of course, a sign of normalcy in the blogosphere, but it\u2019s definitely something I want to improve.<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nEcommerce and content, huh?<\/h2>\n
![\"Checkout](\"https:\/\/www.simoahava.com\/images\/2014\/12\/checkout-funnel.jpg#ZgotmplZ\")
<\/p>\n\n
How to set it up<\/h2>\n
dataLayer<\/code>. You have a number of options when doing this. You could, for example, store every single product on the page into dataLayer<\/code> when the page is rendered, and then pick the relevant objects when impressions are loaded, or when user actions like clicks take place. Another way to go is to store the products in some other global JavaScript variable, which is, perhaps, a bit easier to access, but it does pollute the global namespace which should generally be avoided.<\/p>\n1. Product impressions<\/h3>\n
ecommerce.impressions<\/code> Array as soon as the DOM has loaded. In this Array, each object is a single article title (+ ingress) that\u2019s visible in one of the possible product lists. Product lists on my site are:<\/p>\n\n
{\n 'category'<\/span> : 'analytics'<\/span>,\n 'id'<\/span> : 'TriggerGuideForGoogleTagManager'<\/span>,\n 'list'<\/span> : 'Main posts'<\/span>,\n 'name'<\/span> : 'Trigger Guide For Google Tag Manager'<\/span>,\n 'position'<\/span> : 2<\/span>\n}\n<\/code><\/pre>\n<\/div>\ncategory<\/code> is the WordPress category assigned to the post (there\u2019s only every one category on my articles), id<\/code> is a truncated version of the article title, name<\/code> is the name of the article, and list<\/code> and position<\/code> define where the impression was listed.<\/p>\n![\"Sample](\"https:\/\/www.simoahava.com\/images\/2014\/12\/sample-datalayer.jpg#ZgotmplZ\")
<\/p>\n2. Product list clicks<\/h3>\n
dataLayer<\/code>, together with the \u2018productClick\u2019 value for the \u2018event\u2019 key, which then triggers an Event tag.<\/p>\n![\"Product](\"https:\/\/www.simoahava.com\/images\/2014\/12\/product-click-datalayer.jpg#ZgotmplZ\")
<\/p>\n3. The Checkout Flow<\/h3>\n
\n
![\"Enhanced](\"https:\/\/www.simoahava.com\/images\/2014\/12\/enhanced-ecommerce-checkout.jpg#ZgotmplZ\")
<\/p>\n![\"Checkout](\"https:\/\/www.simoahava.com\/images\/2014\/12\/checkout-step.jpg#ZgotmplZ\")
<\/p>\n4. Purchase<\/h3>\n
![\"Purchase](\"https:\/\/www.simoahava.com\/images\/2014\/12\/purchase-datalayer.jpg#ZgotmplZ\")
<\/p>\nThe analysis<\/h2>\n
![\"Shopping](\"https:\/\/www.simoahava.com\/images\/2014\/12\/shopping-behavior.jpg#ZgotmplZ\")
<\/p>\n
![\"Product](\"https:\/\/www.simoahava.com\/images\/2014\/12\/product-performance.jpg#ZgotmplZ\")
<\/p>\n![\"Product](\"https:\/\/www.simoahava.com\/images\/2014\/12\/product-list-performance.jpg#ZgotmplZ\")
<\/p>\n