Introducing the Adobe DTM Debugger

by Adam Haining October 6, 2015

At Disruptive Advertising, we love Adobe DTM. It truly is (in my opinion) the best tag manager for marketing analytics out there. I’ve used pretty much everything out there and, when I’m in another tool, I keep wishing it was using Adobe DTM.

As great as DTM is, it is impossible to know what’s actually firing without using developer tools (Chrome Developer Tools, Firebug, Firefox Inspector, etc). I knew there could be a better way to easily debug and see what is going on with Adobe DTM on any page, so I finally built a neat little tool to help.

Meet the Adobe DTM Debugger! Before we get into the details, let’s get it installed!  If you’ve ever used the Adobe DigitalPulse Debugger, using this is very similar.  Create a new bookmark in your favorite browser, and set the location of that bookmark to the following code:

javascript:void(window.open("","disruptive_dtm_debugger","width="+screen.width+",height="+screen.height+",location=0,menubar=0,status=1,toolbar=0,resizable=1,scrollbars=1").document.write("<script id=\"disruptive_dtm_debugger\" src=\"https://static.disruptive.co/disruptive/dtm_launch_debugger.js\"></"+"script>"));

Did you see what I did there? I host the tool in Adobe DTM that helps you debug DTM!

Now, on to the features:

Settings

At the very top of the rule are some basic settings.  You’ll see the following:

 

Pretty simple. Shows you which DTM environment is loaded (production or staging), and it will give you a button to click that will reload the page and load the new environment. BUT WAIT, THERE’S MORE!

One thing that can be confusing is if you are in a development environment that has the staging library already loaded on the page. You cannot have the production library loaded over the staging library; so, to avoid any confusion, you will not see an option to load the production library.

Rules

The previous method for knowing if a rule fired on your page was to turn on the DTM debug mode and then scour the console in your browser. If that sentence didn’t even make sense, don’t worry about it, just know it was fairly difficult to see what was happening on the page.

Now, when you open the DTM debugger, you’ll see a list of ALL of your rules, if the rule is on the current page, whether or not the rule has fired and what kind of rule it is.

dtm-debugger-rules-list

Not only does it show when a rule has fired or not; but, if that rule fires after the initial page load, such as an event-based rule or direct-call rule, the rule will highlight when it fires and show the little green tag that it has fired.

Seeing all of your rules can be overwhelming and involve a lot of scrolling, so we’ve also included a nice feature to only show the rules that have fired. Just check that box and your rules will automatically be filtered. New rules that fire after the initial page load will even appear once they have fired.

dtm-debugger-fired-rules-checkbox

That’s it for now, but there are some plans to expand what this does, including:

  • List the various conditions and their details.
  • List the tools that are configured for the rule, and what the settings are.
  • List the 3rd party tags; and, if possible, link or show the code for each of the tags for easy access.

Data Elements

If you’ve used DTM in the past, you had to use the console of a browser to check the value of a data element.  This involved:

  1. Using use _satellite.getVar in the console
  2. Knowing the exact name of the data element, including if something was uppercase or lowercase

Seems fairly easy, but it was quite the chore.  This tool will automatically show you a list of all of your data elements, as well as the current value of that data element!

dtm-debugger-data-elements

You can even click on the underlined “type” of the data element, and it will show you the definition of the data element.

dtm-debugger-data-element-definition-custom-js

dtm-debugger-data-element-definition-query-parameter

As great as showing the data element value automatically is, we plan to have it be optional where you can click to get the value, as there may be some implementations that have the data element do more than just return a value.

DTM Notifications

Previously, the way to debug DTM was to turn on the debug mode and look in the console of your browser. Now, DTM automatically puts information into the debugger when tools load, rules fire, and on a many other events.

You can also use the _satellite.notify function to put your own content into the debugger. Here is what your typical view of the debug messages and notifications looks like:

Adobe DTM Debugger Console Notifications

Since I am running my examples from adobe.com, there is A LOT of information here, so this is just a preview.

In the DTM debugger, you can view this same list without having to open the console and you exclude the prefixed “SATELLITE: ” on the messages as well as any non-DTM messages printed to the console.

dtm-debugger-notifications-default

BUT WAIT, THERE’S MORE! This list will automatically update as new items are printed to the page, and it has 2 really handy checkboxes.

1. Only show custom notifications

If you use _satellite.notify in your code, and your messages don’t match any of the default DTM messages, they will be the only ones to show up.

This is really handy for looking at what you purposefully coded without wading through a lot of notifications. Look at the difference between the above screenshot and what it looks like after filtering for custom notifications.

dtm-debugger-custom-notifications

2. Show newest notifications on top

By checking this box, you don’t have to scroll to the very bottom to see what’s new on the page, it will list the newest notifications on top. Makes this really easy to debug!

dtm-debugger-newest-notifications

Configuration

The last feature of the DTM debugger is the configuration.  It shows the environment that is loaded (yes, it shows it up top, too). It currently only shows the environment and the installed tool. In the case of adobe.com, there are a lot of analytics tools installed.dtm-debugger-configuration

The plans for this are to be able to click on a tool and view the configuration / settings of the tool.

DTM Not Installed?

This might be my favorite part.  At the 2015 Adobe Summit, the DTM team wore these shirts that are a play on the Run DMC logo that say “RUN DTM”.  They are genious.  As a tribute to this shirt (which I still do not have), if you open the DTM debugger on a site that doesn’t have DTM installed, it will show this:

Screen Shot 2015-10-06 at 5.14.40 PM

Contribute! (Your time and ideas, not money)

As great as this tool is, there may be a few bugs that pop up, as well as better features that will make it even more awesome.  Please, please please send any bugs or recommendations our way! There is a link at the very bottom of the DTM debugger that will auto-draft an email, but you can also submit a comment on this post.

  • Analytics

Adam Haining

Adam Haining

Adam Haining is the Chief Technology Officer at Disruptive Advertising. He oversees the technical strategy, product engineering, cybersecurity, and technical operations across the organization. Adam is a curious soul who loves to build (and sometimes break) things. He studied mechanical engineering as a pursuit of his passion to build, only to find his way into the digital marketing industry. He learned that he could build with nothing but a keyboard and fingers, and is a self taught coder. He worked in the digital analytics industry for over a decade before joining Disruptive Advertising. He leads a small and talented development team, still works with a few clients, and is continually driving technology forward to solve difficult problems in creative ways. When he's not solving a technical problem, Adam is busy being a husband or father to his 5 children. He enjoys building things with his hands, fishing, snow skiing, drawing on his kids' lunch bags (shameless plug for @dadslunchbags on Instagram), reading anything by Brandon Sanderson, and spending time with his kids. He has already met Dave Grohl from the Foo Fighters, but would like to someday hang out with him.

Leave a comment

Featured Posts

Background Parallax
Background Parallax

Let's Do This!

Let's get in touch to see if we're a good fit to help you reach your business goals.
Contact the Disruptive Team
  • Google Premier Partner Logo White
  • Hubspot Certified Partner Logo
  • Bing Ads Accredited Professional Logo
  • Facebook Marketing Partner Logo
  • Klaviyo Master Elite Marketing Partner Logo
  • 5-Star Reviews on Clutch Logo
  • Best PPC Rankings Award
    Best PPC Rankings Award
  • Utah Venture Entrepreneur Forum Top 25 Under 5 Company
    Utah Venture Entrepreneur Forum Top 25 Under 5 Company
  • UB Best Companies to Work For Award
    UB Best Companies to Work For Award
  • 2020 National Excellence Award Winner
    2020 National Excellence Award Winner
  • Inc. 5000 Fastest-Growing Companies Award
    Inc. 5000 Fastest-Growing Companies Award
  • Inc. 500 Fastest-Growing Companies #145 Icon
    Inc. 500 Fastest-Growing Companies #145 Icon
  • Top PPC Company 2022 Design Rush Award
    Top PPC Company 2022 Design Rush Award
  • Top 1000 Companies Global 2021 Clutch Award
    Top 1000 Companies Global 2021 Clutch Award
  • Top Digital Marketing Agencies 2022 Clutch Award
    Top Digital Marketing Agencies 2022 Clutch Award

©2024 Disruptive Advertising