As businesses adapt to a cookieless world, web tracking & analytics becomes increasingly important to build up 1st-party data assets and insights. Marketers are turning to digital tools to accurately interpret user activity across digital properties
One such tool is a tag debugger.
What is a Tag Debugger?
A debugging tool – otherwise commonly known as a tag debugger – is a browser plugin that is used to verify and troubleshoot marketing tags across a website. Because tag debuggers extend your browser’s developer tools, they are also known as browser extensions.
This plugin is a great medium to check for labeling errors, verify governance rules, and establish parameters on how user activity is tagged.
The tag debugger also classifies user activity in a clear, structured way in which events, triggers, and variables can be scanned in an organized fashion.
Why Use a Tag Debugger?
Marketers, web designers, and data specialists use a tag debugger as a tool to ensure that site activity is being accurately tracked. But more importantly, a debugger covers 3 core functions:
Platform Governance: Particularly helpful if you have several campaigns, or analytics tools. Assume for instance you are running a Twitter campaign, you are running A/B tests in Adobe Target, and you are tracking web behavior via Google Analytics. A debugger allows you to see which pieces of javascript code are firing on the website when a page (or pages) load and send back information to these platforms that have been connected.
Tag Governance: Useful for keeping inventory of tags, triggers and data layers. Using a debugging tool to kick-start this process allows for evaluation of current implementation in place and begin identifying gaps. It is also useful when a website updates or campaigns are being planned.
Tag Audit: To check for accurate implementation when an update has been made or is being planned and to help find tagging errors
How to Use A Tag Debugger
So you’ve just launched your new website and now that things are live you want to check that your dimensions are being accurately tracked.
Let’s follow this example on how to use a tag debugger:
Make sure you’ve correctly installed a debugger
Refresh your browser or restart your computer as needed
Right-click on the website you want to check tags for
Click “Inspect” or press F12 to open the developer console
Then select the tag debugging extension you installed
Refresh browser page
Check the event you want to verify by initiating the interaction. If it’s a button or a link, click on it; if it’s a video, press play.
Remember, tag debuggers show all the third party pixels a browser is sending, so it may be a good idea to filter to only the Adobe or GA pixels you are interested in seeing. To do that, go to the filter icon on the top right corner of the console, and select the values you need.
Here’s an example below:
Notice the browser on the right-hand panel. In this case, we have selected Omnibug where the filter icon is the second one from left to right. Clicking on these icons will allow you to filter requests to your desired value and add rules that will make it simpler to identify the tags you are interested in viewing.
Omnibug before filtering pixels
In this example, we have filtered requests to show Adobe Analytics tags only.
Omnibug after filtering pixels
Comparing Some Popular Debugging Tools
There are several popular debugging tools out there. To keep it concise, we will focus on the key differentiators of the following:
Key differentiator: ObservePoint’s chrome extension allows you to easily debug tags from within your browser, enabling you to view information such as Tag Name / Path, Account, Category for instance, to quickly run an audit tag on a page.
Tag auto-detect feature: identifies every type of tag, including those sent through POST requests
Shows SEO information about the page being inspected
Common Mistakes to Avoid when Using a Debugger
Debuggers fire events on your website that have already been tagged. Assuming your events are implemented correctly, here are some common mistakes to avoid:
Ensure you are on the right pages / URLs when inspecting. It may sound obvious, but on large websites (particularly retail websites with thousands of similar individual SKU pages), you want to ensure that whichever event you are evaluating is tagged properly and is firing on the page you want to analyze behavior in.
Evaluate how your events fire across multiple pages. Ensure labels for similar events across multiple pages are labelled distinctively. If they aren’t, remember to use other variables to inform, as most pages will fire multiple events tied to a single page view. This is particularly true when evaluating events that persist through ecommerce / shopping funnels for instance.
Stick to one analytics tool at a time. A debugger can help you understand where the pieces of javascript data is being sent to be analyzed. For instance, some teams may implement the use of both Adobe Analytics and Google Analytics as web analytics platforms. When evaluating how your events are firing, ensure to stick to one at a time and when possible, refer to a schema that lists the event hierarchies occurring on your website. This is also applicable if you’re performing a tag audit – try utilizing one tag debugger at a time as opposed to using several versions for the same tag.
Clear requests when evaluating different sections of the site. Some tools will allow you to record a session as you navigate through a website. Remember to clear requests so you can easily track what events are firing and on which pages.
Sample image: clear requests in Omnibug
Debugging Adobe Analytics and Google Analytics Server Calls on Developer Console
Like many debugging tools, Adobe Analytics and Google Analytics sends the data to the servers in form of a HTTP request. To debug them, you can use ‘/collect’ to filter Google Analytics server calls and ‘b/ss’ for Adobe Analytics. This will check for errors in implementation and help you infer where the code has gone wrong.
Google Analytics
In Google Analytics use the following steps for tag debugging through Inspect:
Right Click + Inspect or F12 on your browser
Click on the Network tab
In the top left corner, type “/collect”. This will bring all Google Analytics server calls with detailed information
Adobe Analytics
In Adobe Analytics, use the following steps for tag debugging through Inspect
Right Click + Inspect or F12 on your browser
Click on the Network tab
In the top left corner, type “b/ss”. This will bring all Adobe Analytics server calls with detailed information
Now that you know more about tag debugging and how it elevates the integrity of your data, use our Tag Debugging checklist for your debugging tasks.