Learn the basics of debugging tracking calls that are initiated from
utag.link() are used to track page views and events, respectively. This article shows how to debug these functions to see how and when they are being called and what data is being passed.
To enable debug mode, open the debugging tools in your favorite browser and run the following command:
This cookie turns on debug mode within
utag.js, which generates useful output to the console.
Once debug mode is enabled, when you trigger actions on the page that are tracked, debug logs appear in the console. Inspect the console output for:
trigger: view or
The following example demonstrates how this looks in the console after an event is tracked:
Click the line under
trigger:link to expand and collapse the event data object.
For more in-depth debugging, it is useful to set breakpoints in
utag.js to pause the code when calls tracking calls are made. This allows you to review the data being passed as well as examine the stack trace to see where the call originated.
To use Chrome developer tools to set a breakpoint:
In Chrome Developer Tools, go to Sources and open
Unminify (pretty print) the code by clicking the curly braces at the bottom left of the window.
Find the line with
return this.track(and click the line number to set a breakpoint:
Return to the main window and perform an action to invoke one of the tracking calls. When a tracking call is made, one of the breakpoints stops the action in order to inspect the code.
In the right-hand side of the developer tool there is a section called “Watch Expression”. Click the + sign to add a watch expression. Type
aand click Enter to add a watch expression for this variable.
Expand the object that is contained in parameter
ato show the data was passed to the tracking call. This is the data that you have to work with in extensions, load rules and mappings.
Learn more about setting breakpoints in Chrome Developer Tools.
One of the advantages of this method is the use of the Call Stack, reported through the Developer Tools in the Sources tab, to inspect the origin of the tracking call.
The following is an example of where to look for the location of a
The preceding image shows the breakpoint in
utag.js that was placed to trap the
utag.link() call. Item (2), when clicked, shows the
utag.link() call that is made within the source code (to the left).
You have now successfully been able to debug three things:
- Did the breakpoint get hit. If yes, then the function is set up to be triggered correctly.
- Since the breakpoint was hit, you were able to see what data was sent when
- You were able to view the actual configuration of the
This is helpful when you are not seeing the correct data passed when certain events are triggered. It is likely that the data being sent in the function is incorrect.
Below is a breakdown of the different output results you see. This is not a comprehensive list as the output is specific to your implementation. The log output may change at any time due to updates and enhancements.
||Pre Loader scoped extensions are now running|
||The library reads data such as the UDO, Meta Data, DOM data and more|
||All Tags scoped extensions are now running|
||Tags waiting for DOM Ready|
||The library is ready for DOM Ready to occur|
||Indicates how many tags are set to wait (for example, the
||Tag script is added into the source code|
||The specified tag is loaded into the browser but to wait until DOM Ready to fire the tags|
||The tag is triggering the call to the vendor|
||Tags are about fire due do DOM Ready|
||A tracking call was made|
Thank you for your feedback!
This page was last updated: January 7, 2023