As a JavaScript developer, you may find it disorienting when you first start learning about yet another large subject matter that is Google Analytics and Google Tag Manager (GA/GTM). There are many GA/GTM articles and examples that paint a confusing or outdated picture for single page and mobile apps. However, fear not. This post introduces GA/GTM to seasoned JavaScript developers and suggests the best practices we’ve adopted here at Rangle. By following our tips, you’ll be able to drive better value for clients and produce actionable insights from your application’s data.
The Basics for Google Analytics
Google Analytics is a service to push analytically relevant event data to. As you probably already know from reading your typical website reports, it aggregates event data and provides useful custom reports on how people get to and use your web applications. A tag is a piece of code that sends information to a third party such as Google Analytics. Tags "fire" when an event of analytic interest occurs.
Google Tag Manager is a tool for injecting analytics data collection logic into your web page. It enables tagging changes to occur without changing your web page and is intended for technically savvy digital marketers rather than developers. It wraps Google Analytics and other analytics engines.
Why are Tags called ‘Tags’?
The term page tagging came to be in the era of an architecture in which most user actions required a roundtrip to the web server. To address inaccuracies in web log analysis caused by caching and to enable hosted analytics services, HTML IMG tags with a URL pointing to the web analytics server were placed on a static page. Of course, the image wasn’t needed (and was just a single pixel), but the query string parameters used to fetch the image is interpreted as the web usage data. Alternative names for tag are web bug, tracking bug, page tag or web beacon. Fast forward to 2016, and the term tag is still used to mean a piece of code that sends information to a third party.
Google Analytics: Gifts and Gotchas
As a JavaScript developer, it is easy to send information to Google Analytics. For example:
// Send a page view event
ga('set', 'page', '/new-page.html');
ga('send', 'pageview');
// Send a Video Play Event
ga('send', {
hitType: 'event',
eventCategory: 'Videos',
eventAction: 'play',
eventLabel: 'Fall Campaign'
});
Having sent basic information to GA, you get a wealth of usage, behaviour and referral reports. Here’s a small example of a GA screenshot.
Once the event is processed by GA, it is forgotten. This has implications that are important to understand. Developers used to working with traditional business intelligence services may be surprised that metrics cannot be defined and computed for past time periods. For example, if you have defined viewing a ‘Thank You’ page as a conversion event (i.e. a goal), the conversion rate can only be known from the time that definition was configured because the original hit is not stored. Note that this is not the case with many other web analytics tools.
Google Tag Manager: The Big Hack
OK, I said it, instead of just thinking it. Here’s a typical Tag Manager use case to illustrate the point.
- A marketer is configuring conversion statistics and wants to count downloading a file as a conversion.
- There is a download button with a CSS class of btn-primary on the download page.
- In GTM, a new Tag and Trigger is created so that when a click event occurs on a button that has the CSS class of btn-primary on the download page, the tag is fired.
- The changes are tested and published.
- The next time a user runs the page the new tag logic is downloaded to the browser and an event is collected signifying that the conversion occurred when the button is pressed.
At this point, disciplined JavaScript developers maybe feeling a little queasy. How would this look when a huge number of tracking rules are overlaid on top of a complex web site? And what happens to all the tagging logic when a new version of the page is published? What about mobile? Welcome to Google Tag Manager.
The principle benefit of Google Tag Manager is to allow marketers to perform analytics inexpensively, without having to engage with scarce and expensive developer resources. It does not help a developer with instrumentation.
The differences between the GA API and GTM API are also worth considering. GA has a simple (but somewhat expansive) and understandable API as shown above. GTM uses a dataLayer array that you can push events and values onto. This is also simple. However, nothing actually makes it to GA until you also go into the GTM admin tools to create a tag, create a trigger, and deploy the changes. This creates a tight binding between your JavaScript code and a configuration stored in the cloud that is typically controlled by someone outside of the development team. In other words, this is an accident waiting to happen.
GTM or no GTM
You will find many articles describing how to move your site tagging from GA to GTM and warning of the dangers of a partial switch (double counting mostly). The presumption being that everyone should use GTM, and that certainly seems to be Google’s positioning.
But hold on. Let’s think this through from the perspective of a JavaScript developer. To bring further context to this thought experiment, assume now that a team of developers and web designers are maintaining a continuously deployed (CD) web application, with related mobile apps and deploys happening daily. As with most advanced CD shops, many features are controlled by feature flags. Features might be deployed ‘dark,’ tested with a percent of users and then turned on for everyone if all goes well.
Let’s also assume that that there is a requirement to include web and mobile user behaviour data in the shiny new enterprise data lake.
In this scenario, all of the tagging logic is implemented in JavaScript by developers and GTM provides little or no value.
Now let’s consider a different environment. For example, a small business has paid a development shop to build a website and now the development budget is used up and the developers are long gone. The CEO is expecting to reap the benefits of the new site. Marketing is stepping on the gas and visitors are streaming in, but conversions are disappointing. In this environment, GTM is an indispensable tool.
Be Abstract
So how do JavaScript engineers support and augment this duality?
- Write the instrumentation logic in a way that supports both GA and GTM.
With this approach, you can build the instrumentation features and analytic reports during the application development with the usual considerations of delivering easy to understand and maintainable code. If a new analytics requirement arises down the road and developers are not around, a GTM user can do some simple augmentation to the foundational instrumentation delivered in the app.
This approach also works equally well on JavaScript mobile technologies which don’t allow for dynamic tagging with GTM.
The rangle/redux-beacon library does this for you. It assumes you are using Redux or ngrx and lets you concisely wiretap the action stream to push events to analytics service of your choice, including GA and GTM. You can import a GTM container that creates the necessary tags so your events flow to GA. When your colleagues building the data lake are ready, you’ll be able to provide useful web and mobile behavioral data by adding your own target without changing your instrumentation. If the development team is otherwise occupied, a technically savvy marketer who is skilled in GTM will be able to make changes to the instrumentation.
Conclusion
Building applications that measure their own business value and provide a foundation for marketers and product owners to establish efficient innovation workflows can be a key ingredient to business success. Google Tag Manager is a great tool for non-developers, but the rule base can be a maintenance problem. You need not sacrifice good engineering practices or the ability for digital marketers to work independently if you have a good instrumentation strategy. The rangle/redux-beacon library provides a good instrumentation strategy for Redux and ngrx applications. Similar approaches can be followed if you’re not using Redux.
Learn How Rangle Can Help With Your Analytics
Our built-in custom analytics solutions allow you to measure and then optimize for greater conversions and revenue. Contact us to learn more about our analytics consulting and how we can help you get the most out of your data.