Debugging

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.

Debug Mode

To enable debug mode, open the debugging tools in your favorite browser and run the following command:

document.cookie="utagdb=true";

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.

Breakpoints

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:

1. In Chrome Developer Tools, go to Sources and open utag.js.

2. Unminify (pretty print) the code by clicking the curly braces at the bottom left of the window.

3. Find the line with return this.track( and click the line number to set a breakpoint:
   

   

4. 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.

5. 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.

6. 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.

Console Output

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.