Build a Google Tag Manager monitor with notifications using Firebase
It was summertime and I set myself the goal to dive deeper into Firebase Functions and do something with Google Tag Manager’s new Custom Template feature.
For months I had been playing with the idea to build a monitoring tool for Google Tag Manager. I am confident such a solution will help improve data quality using tag management tools. For that reason I wanted Google Tag Manager to tell me when a tag had either failed in terms of loading and in terms of content.
Right before leaving on holiday with the family, Google Tag Manager launched their addEventCallback API. This is what was need to at least track tag load failures, but what a timing…
During the summer holiday, when the kids were asleep and my wife gave my the approval to geek-out I created a Firebase Functions notification script and edited Simo Ahava’s base GTM Monitor script to catch only tag failures.
The script uses Simo Ahava’s base GTM Monitor template with minor modifications and Firebase Functions and Real-Time database. Before I continue, please keep in mind that I am quite new at the whole cloud function, node server et al. stuff. Nevertheless I want to share this freely with you guys. So be kind with the critique.
Purpose
This updated GTM Monitor script will only fire when GTM’s addEventCallback function returns a tag with the status equal to failure. It will then forward the container ID, tag ID’s and tag names to a Firebase Functions endpoint which, in turn, will process it to Firebase's Real-Time data base.
The script will then monitor recurring failures on those tags based on the tag ID. If the tag fails again within a set amount of time it will trigger a notification and pause any further monitoring for 15 minutes. If the failures stop, a cron-job function will spot the inactivity and clean the database accordingly. There is also an additional cleaning function on every call to the main monitoring function itself... probably overkill, but I like it clean.
One caveat is that a Firebase Blaze plan (needs credit card) is required to send requests outside of the Google domain, but unless you have some major issues with your GTM implementation you should stay within the free limits set by Firebase, including the cron-job limits. However, I am in no way responsible for any costs made using this script on your Firebase account.
Prerequisites
Before getting started, please make sure you have installed, signed-up and/or setup the following:
- IDE, for editing code
- Node on local machine to install Firebase CLI
- Firebase account
- Firebase CLI, to deploy functions to Firebase
- Slack workspace (or Zapier account)
- Firebase Functions script (Github repo)
- Simo Ahava’s edited GTM Monitor Custom Template (Github repo)
Setup Instructions
Step 1 Create Firebase project through Firebase UI and create a Real-Time database. You can add Google Analytics if you want, to track the number of errors over time. But this setup will not focus on that aspect.
Step 2 Use NPM to install Firebase CLI on your local machine and login using your Firebase/Google credentials.
Step 3 Connect to your Firebase project through the Firebase CLI and create a local working folder. Intructions can be found here.
Step 4 Start your favorite IDE and open the newly created Firebase working folder and main index.js file
Step 5 Copy the content of the gtm-monitor-firebase-function.js file into the index.js file.
Step 6 Edit script where necessary, ie. add your own Slack webhook URL on line #3. You can get the webhook URL through Slack, using the menu: Administration > Manage Apps
NOTE At the time of writing Slack announced that the Webhook custom integration will be depracated. Zapier will be a good alternative moving forward. Read this article to learn how to use this app with Zapier Webhooks.
Step 7 Deploy to Firebase ‘firebase deploy — only functions’
Step 8 Copy URL for your gtmMonitor function from Firebase for use in Google Tag Manager Monitor template.
Step 9 In Google Tag Manager, select Templates from the side menu and click New. Click on the 3-dots menu item in the top right and select import. Then select the Tagticians Google Tag Manager Monitor template file (.tpl) and import into your Google Tag Manager account.
Step 10 Change the permissions of the template to reflect your personal Firebase Functions endpoint URL.
Step 11 In the Template Preview, same page as Step 10, paste the Firebase Functions endpoint URL again intp the GET Request endpoint field.
Step 12 Save the template. If you want to test the template, you will have to change the code temporarily and force a failure. The easiet way to do this is change the word failure in line 39 of the template code to success.
NOTE Don’t forget to change the conditional statement back after testing.
This should generate results in your Firebase Real-Time database. If not make sure to check the logs to see what the potential problem could be.
The test will send 3 tags to your script and process them accordingly.
If you now wait at least 5 minutes, or 6 depending on the cron-job, you will see these tag records disappear. This is the clean-up functionality at work.
When you perform the Test 3 times, leave a few seconds between each Test click, you will see the tag monitor status change to paused.
The tags get paused based on the limits set in the Firebase Functions script. Change these to values interesting to you. My advice is to however not change the updateLoopTimeLimit since this will help prevent infinite loops in your script. This is something that needs improvement.
After 15 minutes, if no other failures have been received the tag records will be cleaned-up. Otherwise it will re-enter the monitoring loop and, if applicable, send you a new notification.
You can also check Slack, or which ever application you have setup, for the notifications sent when the limits were reached.
Step 11 Create a new tag in Google Tag Manager and use the Tagticians Google Tag Monitor template and add the function URL as the endpoint value. Add a Custom Event trigger that triggers on regex value .*` and check the option Use regex matching. This is explained in more detail in Simo’s article.
Step 12 Deploy the container and monitor your Slack channel.
Tips & Recommendations
1. Feel free to remove any of the console.log lines in the code. I used these for testing and quality control.
2. I think there are some promise issues in the script where nothing is returned which needs to be fixed.
3. Replace Slack with anything you want since the Webhook functionality will be depracated. Zapier is a great alternatives.
4. Please share any enhancements or code optimizations you make through Github. I am more than happy to learn about how the function codes could possibly work better.
