The functions utag.view() and 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 trigger: link
The following example demonstrates how this looks in the console after an event is tracked:
Click the line under trigger:view or 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 utag.js.
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 a and click Enter to add a watch expression for this variable.
Expand the object that is contained in parameter a to 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 utag.link() call:
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 utag.view() or utag.link() was called.
You were able to view the actual configuration of the utag.view() or utag.link() call.
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
The standard utag.js file logic is initiated
All Tags EXTENSIONS
All Tags scoped extensions are now running
utag.loader.INIT: waiting 1
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 "services-dang/tiq-as" profile has 4 tags enabled and all 4 are set to wait)
Attach to head
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’s u.send function runs, sending data to the tag