What I Learned at Work This Week: Google Analytics Pixels and Data Layer
I work for a company that provides software as a service (SaaS), which means that, as a Solutions Engineer, I’m constantly interacting with client websites. While each site has independent quirks and features, most of them follow or utilize certain tools and frameworks. Understanding these patterns helps make me better at my job, which led me to research one of the most common tools used by e-commerce businesses today: Google Analytics.
Google Analytics
As a business owner, you want to know everything about your business and everything about your customer. You want to find people with a need and meet that need at a (reasonable?) price. Historically, that might have meant spending time in your store and speaking with people, mailing out surveys, or hiring a marketing firm to do research on your behalf. Today, Google Analytics offers us a free option to learn about our customers.
By simply adding a few lines of code to your app or website, you too can invoke the power of Google Analytics to collect data and organize data such as a user’s age or location, how they navigated around your site, or even how they got to your site (ad clickthrough, Google search, etc.). It’s easy to see the value for an online marketplace, and of course if the owner of that marketplace shares all that data with Google, all the better.
How is this Data Collected?
I was introduced to Google Analytics through the pixel, which was very confusing to me because I thought I knew what a pixel was: a form of digital measurement that refers to a very small segment of a visual interface. The good news is the pixel used in pixel-based tracking is so named because of its relationship to that tiny space on the screen. Google Analytics can help us create a tiny gif that measures 1 pixel x 1 pixel. Placing this gif onto our site helps facilitate the data tracking that makes Google Analytics so powerful.
Part of the beauty of Google Analytics is that non-devs aren’t required to understand how the pixel works before to implement it. Google will write the script and it’s our job to simply paste it into the Header of our web page. But if you’re like me and get a bit anxious around a black box, you might be wondering why our pixel has to be a gif at all. If I wanted to send data from my webpage to an external server of some sort, I’d be thinking POST request. Where does an image come into play?
The folks at Google, of course, are very smart, so they found a unique use for this tiny, transparent gif. Thanks to the img src attribute, we have the opportunity to request a file from an external server. The pixel script includes all of the data we want to send to Google in this request, essentially providing a huge string that can be parsed into whatever we want to know. Using a gif also helps get around users who may have JavaScript blocked on their browser, is less likely to affect the page layout if there’s an error, and can be ever-so-slightly smaller than a png.
How Can We Interact With the Data?
As your app grows, Google expects that you’ll want to use more and more of their features, which means adding more code to your Header through use of additional tags. Tags are more or less self-contained code snippets that can be added onto a website for additional functionality. The pixel, for instance, is a tag that collects information. Google Analytics supports their own tags as well as third-party tags, but specifically suggests that users deploy a data layer to maximize functionality.
A data layer is an object that organizes information for easy reference. It’s not unusual to see multiple objects within a data layer on a single page, each uniquely written to be read by a different application or script. Google’s docs, of course, provide a neat example:
We can set our data layer on page load, but they are also dynamic. If we wanted to add a key/value pair to our data layer during an event trigger, we could invoke the push method:
Note that we’re not using JavaScript’s default push, which is associated with arrays. Since we’re dealing with a custom object, there is a unique push method written into the Google Analytics script that works to add to our data layer. With this tool in-hand, our options are endless: we can collect data from forms, buttons, or anything else on what users view, what they click, or how they pay.
Testing the Data Layer
Originally, I expected that any data Google was collecting would be trapped behind a complex hashing or minimization, but actually it’s really easy to traverse data layer objects using DevTools!
The data layer is a child of the window element, so if you navigate to a website that utilizes one (almost all of them do), you should be able to see it by typing window.dataLayer into your console. I decided to try it out on Bonobos.com — the company I worked for before I became a developer.
That’s a lot of data! If we look closely, we can start to understand how valuable it is to track this information. We see data on whether a user is logged in (is_logged_in) and what creative users are seeing (campaignName). We also see that the push method is defined at the very end of our data layer object. But I think it would be really useful if there were a data layer that showed which items I browsed — I wonder if that’s being tracked.
I followed the Final Sale promotion and clicked on the first item available. My data layer array’s size increased to 75! After doing a bit of searching, I found the info for the product I was viewing.
Look at all this great stuff! Price, SKU, is_markdown, color. And not only that, but I found info on a product I had previously viewed while I was doing research for this blog post! It goes to show just how much information can be collected through a simple pixel and how incredibly valuable this tool can be for e-commerce merchants.
Conclusion
The first thing worth noting is that Google Analytics isn’t the only provider of this service. Facebook and Shopify work in very much the same way and if you check out the Network tab in DevTools you’ll often see calls to Google, Facebook, and Shopify all on the same site. Perhaps most important, though, is the insight into how much data is collected, stored, and shared online. It’s not my intent to comment on the implications or ethics of such acts, so I will simply remind my reader to be conscious of their actions and decisions, be they in researching privacy legislation or in clicking “accept” when prompted to allow cookie collection.