Zero code Google Analytics tracking with Vue JS
We’ve all be there. We just finished building an amazing Vue JS application. Then the product owner asks something like, “how many page views will we have with our single page application?”
How would you solve the problem?
You might start with looking at Awesome Vue for some packages or manually adding the GA script to the page and trigger the page view via a Vue Router hook. However, there’s a better way.
Over the years I’ve found that tightly coupling tracking code, whether it is Google Analytics or Adobe Analytics (Omniture), is never winning strategy. It never gets tested well before a deployment. Things get missed and fall through the cracks.
Enter Google Tag Manager!
Google Tag Manager, GTM, allows for decoupling of tracking code sprinkled through your application code.
In four easy steps, you will be tracking page views.
- Sign up for Google Analytics, or grab your GA Tracking Id
- Sign up for Google Tag Manager
- Configure GTM (see section below)
- Add the Google Tag script to the
<head>and<body>of your HTML. Visit the Quick Start Guide.
I’m not going to dig into signing up and adding the scripts to the pages, but I will for step three - configuring GTM.
A very quick Google Tag Manager overview
Before we start configuring GTM, we will take a quick look at it from the “10,000 feet” level or if you are comfortable with the GTM basics, skip to the next section.
GTM is a tag management system that decouples adding tags and code snippets from your source code. See Google’s overview.
The high level terminology you should know:
Account
This is our starting point. Usually you will have one account per company.
Google defines an account as:
An account is the topmost level of organization in Tag Manager. Typically, only one account is needed per company, as all tags for a company’s content can be be managed from this single account.
Setup and installation
Container
You can think of a container as a website, iOS or Android app, or an AMP site.
A container is defined by Google as:
An account contains one or more containers, one for each type of application (web site, AMP site, Android app, iOS app.)
Setup and installation
Workspace
A workspace enables you to group changes to your container for publishing.
More on works spaces can be found on Google’s Workspaces documentation.
Versioning
Google Tag Manager provides a way for you to version and test your changes before publishing them into your production environment.
Tag
Google defines a tag best:
Tags are pieces of code provided by analytics, marketing, or support providers to help you integrate their products into your websites or mobile apps. With Google Tag Manager, you no longer need to add these tags directly to your projects. Instead, you configure and publish tags and how they fire from within the Tag Manager user interface.
About Tags
Trigger
A trigger is an event that makes a tag report the event. Or as Google defines it:
Tags execute, or fire, in response to events. Events could be page loads, button clicks, page scrolls, etc. In Google Tag Manager, you define triggers to listen for those events and specify when tags should fire.
Components of Google Tag Manager
Okay, that should be the basic terminology needed to configure the basic page view.
Configuring Google Tag Manager to track page views with Single Page Applications
For this tutorial we will start with a blank web container with the GTM scripts installed on your pages. Also, double check that all Google Analytics (GA) scripts have been removed from the pages, otherwise you will double track.
We will perform the following steps:
- Add a page view tag
- Configure the Google Analytics Tracking Id variable
- Setup the trigger for your page view tag
- Preview the changes on your page
- Publish the change
Let’s dive in.
The starting page should look similar to the following image.
- Click the Tags link in the sidebar. This is where all of the tags are defined.
- Click the New button. (Note: from the main screen you can click the Add a new tag link in the New Tag card.)
- First we need to name the tag. Usually I use the platform name and tracking type as a name. So for this example, I would use
GA - Page View.
4. Next, we will configure the tag by clicking in the Tag Configuration card.
5. Choose Universal Analytics under the Featured section.
6. By default, the Track Type is Page View. So we don’t have to change anything there.
7. Click the Google Analytics Settings drop-down, and select New variable.
8. We will name the variable, GA Tracking Id.
9. Enter your Google Analytics Tracking Id into the Tracking ID field.
10. Leave the Cookie Domain set to auto.
11. Click the Save button in the top right. The new variable screen will save and close and the new tag screen will be back in focus.
12. Leave the Enable overriding settings in this tag unchecked.
13. It is now time to define when the tag will be executed. Click in the Triggering card to open the choose a trigger screen.
Normally, in a standard web application with full page refreshes, we would choose the All Pages option. However, in a Single Page Application, we don’t reload any pages. Because of this we need to define a new trigger type. In this instance it will be on History State Change.
14. Click the plus icon in the top right to create a new trigger.
15. Change the name to History Change
16. Click in the Trigger Configuration card.
17. The Choose trigger type screen will slide into view, scroll down to the Other section and select History Change.
18. Click the Save button in the top right of the screen. The choose trigger type screen will slide out of view and the new trigger screen will be in focus.
19. Click the Save button in the top right of the screen.
Google Tag Manager provides testing and debugging so when you make a change you won’t have to cross your fingers and hope for the best.
20. Click the Preview button. The page will reload.
21. Open a browser window and go to your site. A Google Tag Manager overlay will display.
22. As you click around your site, you will see what tags have fired, how often they have fired, and what data was sent.
22. After you are happy with the results, switch back to the Google Tag Manager window and click the Leave Preview Mode link, then click the OK button to confirm.
23. Now we need to publish the container. Click the Submit button. This will load the Submit Changes screen.
Google Tag Manager will keep track of the changes made to the container. This will give you the ability to roll back changes. On larger teams, it will also keep a paper trail of who changed what.
24. In the Version Name field enter Add GA page view tracking
25. Optionally, you can add in the Version Description field Configured GA Page View tracking when the HTML5 History State changes.
26. Click the Publish button. The Versions tab will be selected showing the first version of tags in your container. When users visit your site and start clicking through pages, GTM will pass the data to GA when the history changes.
Congratulations for making it to the end! If you have any questions, comments, or suggestions please create a reply or ping me on Twitter, @webchad.
The next tutorial in this very mini-series will be sending custom events from Vue to GTM to GA.
