I migrated to Google Tag Manager
I was very disappointed when a popular Google Analytics WordPress plugin moved most of its features to a $200 / year plan. I looked for a free alternative because I had very little requirements: add the tracking code to the page and track page scroll. It’s barely a dozen lines of code using autotrack. I think I have checked all WordPress plugins that appeared after searching for “Google Analytics” and I found only ONE that met the requirement. Unfortunately, it was not compatible with Google Analytics (analytics.js code), but only with Google Tag Manager (gtm.js)…
Table of contents
What is Google Tag Manager
Google Tag Manager is another solution from Google to manage analytics on a page, but it does not replace Google Analytics. It rather augments it. The problem with Google Analytics was the need to implement changes in the web page’s code itself if one wanted to monitor more things, like scrolling or clicking. Moreover, extra solutions had to be added independently to update other services, like Google AdWords or Facebook Pixel.
Google Tag Manager solves these problems by managing configuration outside of the page and by integrating with a multitude of external services (unfortunately, Facebook Pixel does not have native support yet, but it’s easily doable anyway). It does not provide any analytics or metrics by itself. That’s why it’s very confusing for newcomers from Google Analytics (like me).
The best benefit for regular users is the ease of gathering new data (clicks or scroll events) compared to the previous solution.
By the way, I’ve put together a small collection of tools I use regularly — things like time tracking, Git helpers, database utilities, and a few others that make development a bit smoother.
Google Tag Manager 360
Tag Manager 360 is a paid version of Tag Manager with extra features. Most users won’t need it. The limitation of 3 workspaces that can be used for staging or testing will be also enough for most cases. More about workspaces can be found on this page.
Apart from that, there are other limits too.
Create an account
First, log in to Google Tag Manager and create an account. Here is my setup:
What is the difference between an account and a container?
Google Tag Manager account
An account is the topmost grouping level that includes containers and permissions.
Google Tag Manager container
A container is a lower level grouping that includes all the settings, environments and permissions. One container has one associated Google Tag ID and script that has to be put on a page.
Remarks:
- It is possible to copy the containers between accounts (export and import in the administration)
- Generally, it’s advised to use one container per site, but it is possible to use one container for multiple sites if they use similar features and require similar tags. Three things to remember: add per page filtering if necessary, vary Google Analytics IDs (and any other necessary IDs) per site and be aware that all sites will be always upgraded at the same time. Details:
Install Google Tag Manager on page
After creating the account and container and confirming the policy, you will be shown the code that should be added to your web page:
It can be always shown again after clicking your ID:
Remember to remove the previous code you used for Google Analytics or you’ll have duplicated data!
Link Google Tag Manager to Google Analytics (page views)
Let’s start with the elementary thing: having all the metrics go from your page through Google Tag Manager to Google Analytics.
- Click the New Tag button, then Tag Configuration.
- Choose Google Analytics: Universal Analytics.
- Choose Track Type: Page View.
- Select Google Analytics Settings: New Variable.
- Paste your Tracking ID and click Save.
- Click Triggering and select All Pages – Page View.
Check the video below for details:
What does it do? A tag enables us to send data to an external service – in this case it’s Google Analytics. Then we pass the GA ID via a variable. Finally, a trigger allows determining when GA will be notified – here when entering any page.
Verify and publish
Please remember that all changes made in the console are not automatically applied. Instead, they are queued (see the Workspace Changes: 2 in the top bar?). The changes are visible in the Workspace Changes panel in the Overview tab.
If you made a mistake, you can delete an individual change here by clicking the dots button and selecting Abandon Change.
Pressing the Preview button starts “debug mode”. You will know by a big orange message:
Now you can open your page (with the GTM script) in the same browser session and see diagnostic console appear on that page. Refresh the page (CTRL+F5) if the console isn’t shown. It shows all data that is sent to Google Tag Manager from the site and allows verify whether the configuration and communication between your site and GTM works.
To exit the preview mode, press Leave Preview Mode link just below the orange box.
Finally, the most important thing is publishing changes. After you press the Submit button, review the changes again and optionally describe them in a text field (which would be useful to easily locate them in future), click the Publish button. Now the script on your page will automatically update with new configuration – nothing has to be done with it. All changes were made only in the Google Tag Manager console.
Track scroll events via Google Tag Manager
The next thing I wanted was tracking how far users scrolled in pages. When I used Google Analytics alone, there had to be a script on the page that followed user actions and sent events to the analytics. Google Tag Manager simplifies it a bit (and complicates it in another way 😉 ).
- Go to Variables, then Configure in the Built-In Variables panel.
- Select Scroll Depth Threshold, Scroll Depth Units, Scroll Direction.
- Go to Overview, click the New Tag button, then Tag Configuration.
- Choose Google Analytics: Universal Analytics.
- Choose Track Type: Event.
- Category: name anything you want, e.g. Scroll Depth.
- Action: name anything you want, e.g. Percentage.
- Label: select the Scroll Depth Threshold variable and append %. The result should be: {{Scroll Depth Threshold}}%.
- Non-Interaction Hit: True
- Google Analytics Settings: select the Google Analytics Settings variable.
- Click Triggering and select Scroll Depth.
- Click the New Trigger button (plus).
- Click Trigger Configuration and select Scroll Depth.
- Select Vertical Scroll Depths and type several thresholds that you want to send to Google Analytics, e.g. 25,50,75,100.
- Save both the trigger and the tag.
Check the video below for details:
What do these steps do? First, we enable sending variables related to the scroll event. They are sent when the trigger occurs, which says: send current values when the user scrolled vertically to: 25%, 50%, 75% or 100% of the page height.
Finally, the trigger sends the values through to Google Analytics as Events. They can be seen in Realtime > Events panel and Behavior > Events. You can further configure goals to be monitored how many people scrolled to the half or end of pages. Let me know if you want to read about that!
At the end, do not forget to publish the changes to the tag.